🔞

Playwright備忘録(TypeScript)

2022/03/06に公開




概要

個人でインスタグラム自動いいねツールが必用になったため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してから次の処理に遷移します。

  1. page.locator('button[type=submit]').first().click()でクリックする
  2. 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

GitHubで編集を提案

Discussion