🔞
Playwright備忘録(TypeScript)
概要
個人でインスタグラム自動いいねツールが必用になったためPlaywrightを使用しました。
詰まったとこが何箇所あったためPlaywrightで詰まるところを備忘録形式に記載しました🔞
DOMを取得
古い情報だとpage.$で選択すると言われてたりしますが、現在は非推奨です
現在はpage.locatorを使用してください。
// 要素を取得する
await page.locator('input[name=username]');
テキストを入れる
このメソッドは、要素の一致selectorを待機し、アクション可能性チェックを待機し、要素をフォーカスし、要素をinput入力し、入力後にイベントをトリガーします。空の文字列を渡して入力フィールドをクリアできることに注意してください。
上記のため空白を入れてクリアもできるそうです💁
// fillはテキストが入っていても上書きされる
await page.locator('input[name=username]').click();
await page.locator('input[name=username]').fill('hogehoge');
クリック/ダブルクリック
直感的でわかりやすいです。
// 要素をクリックする
await page.locator('input[name=username]').click();
// 要素をダブルクリックする
await page.locator('input[name=username]').dblclick();
Page遷移で待機
waitForNavigationで待てます(defaultでwaitUntil: 'loadですが明示的に記載しました。)
Promise.allで囲むことで全てpathしてから次の処理に遷移します。
-
page.locator('button[type=submit]').first().click()でクリックする -
page.waitForNavigation({ url: 'https://hogehoge', waitUntil: 'load' })で遷移先のURLで待機しloadイベント発生まで処理を進めない
await Promise.all([
page.waitForNavigation({ url: 'https://hogehoge', waitUntil: 'load' }), // 2
page.locator('button[type=submit]').first().click(), // 1
]);
Page遷移後、要素を取得できない場合
悩ましいとこですがpage.waitForNavigation({ url: 'https://hogehoge', waitUntil: 'load' })に関してはDOMイベントであるloadまでしか待機しません。
そのためDOMを取得できずerrorが起こる場合があります。その場合は明示的に待機させます。
// 2秒待機
await page.waitForTimeout(2000);
参照
リファレンスが充実しているため、お時間ある方はリファレンス参照をどうぞ
playwright.dev
Discussion