🐋
テストを自動化する#2｜Playwright/Javascriptのサンプルコード
Playwrightでのテスト自動化に使えるJavascriptのコードです。
今回取り上げている内容
新しいタブでページを開きたい
新しいタブでページを開く際に、以下のコードを使ってページやページ遷移を定義することができます。押下するボタンをAAA、新しく開かれたタブをpage1として記述しています。
spec.ts
// 新しいページが開く「popup」イベントを待機する Promise（非同期処理の予約） を作成
const page1Promise = page.waitForEvent('popup');
// 名前が「AAA」のリンクをクリック→popupが作成される
await page.getByRole('link', { name: 'AAA' }).click();
// 新しく開かれたpopupをキャッチして、page1に代入
const page1 = await page1Promise;
🌿上記の順で記述することで、「page1が定義されていません」という旨のエラーとなってしまうことを防ぐことができます。
使用例
【想定仕様】
- 「ダウンロード画面を表示する」ボタンを押下すると、新しいタブでデータダウンロード用の画面が開かれる
- 新しいタブで開かれた画面で「ダウンロード」ボタンを押下すると、データがダウンロードされる
【操作手順】
- 「ダウンロード画面を表示する」で新しいタブ(=page1)が開かれる
- page1のタブで「ダウンロード」ボタンを押下し、データをダウンロード
spec.ts
// 1の操作
const page1Promise = page.waitForEvent('popup');
await page.getByRole('link', { name: 'ダウンロード画面を表示する' }).click();
const page1 = await page1Promise;
// 2の操作
await page1.getByRole('button', { name: 'ダウンロード' }).click();
AまたはBと表示されている項目をクリック・テキストを入力したい
使用想定場面：テスト環境で複数の言語が表示されてしまう場合など
それぞれ以下の記述で操作を行うことができます。
AまたはBと表示されている入力欄をクリックしたい
spec.ts
await page1.getByPlaceholder(/AAA|BBB/).click();
AまたはBと表示されている入力欄にテキストを入力したい
await page1.getByPlaceholder(/AAA|BBB/).fill('テストテキスト');
AまたはBと表示されているボタンをクリックしたい
await page1.getByRole('button', { name: /AAA|BBB/ }).click();
ダイアログをescキーで閉じたい
特定の画面へのアクセス時に 説明やガイダンスのダイアログが表示される場合には、以下のコードで escキーを押してダイアログを閉じる 操作を行えます。
spec.ts
await page.press('body', 'Escape');
他に以下のような記述方法がありますが、Playwrightでは上手く動作しなかったため保留中です。
await page.keyboard.press('Escape');
Discussion