🐡

テストを自動化する#3｜Playwrightのサンプルコード | .waitForTimeoutの活用など

に公開
JavaScript
TypeScript
Playwright
QA
テスト自動化
tech

Playwrightでのテスト自動化に使えるJavascriptのサンプルコードです。

今回取り上げている内容

〇秒待機するコード（.waitForTimeout）

〇秒待機する.waitForTimeoutのコードです。

実際には、クリックした後画面遷移が完全に完了するまで「〇秒待機して、その後に△△を確認する」 というような形で使用するのが便利かと思います。

await page.waitForTimeout(5000);　// 5秒待機

const formElements1 = page1.locator('body >> text="ユーザー２"');
await expect(formElements1).toHaveCount(0);

待機するコード（.waitForTimeout）を採用したい背景...

待機するコードを採用したい背景はこちら🪴

目標：クリック後の画面で○○が表示されていないことを確認したい
→しかし、クリックして画面が完全に表示されるまで2,3秒かかる
→待機するコードを記述すれば、画面遷移が確実に完了したところで「○○が表示されていないことを確認」できる！

待機するコード（.waitForTimeout）が適しているケース

主にクリックなどの操作を行って何秒か待機すれば期待の画面の状態になるという場合に適しているかと思います。

具体的には以下の条件が揃う場合は、待機するコードを適用するとコードが簡潔になるのかなと思います。

  • クリック後に遷移した画面で「○○が表示されていないこと」の確認を行いたい
  • 画面遷移が完全に完了するまで2,3秒ほどかかる

待機するコード（.waitForTimeout）設定時のデメリット

  1. 待機時間の設定があまりに短いと、時間内に画面遷移が完了できずエラーになってしまう可能性があります。待機時間の設定にはご注意ください

  2. 頻繁に待機するコードを使用しているとテスト自体の実行時間が伸びてしまいます。可能な限り、待機するコード以外の記述を検討してみてください🙇

コードの比較

「○○が表示されていることを確認する」コード⬇

// 詳細ボタンをクリックで画面遷移
await page1.getByRole('button', { name: '詳細' }).click();

// テキスト「ユーザー１」がbody内に表示されていることを確認する
await expect(page.locator('body')).toContainText('ユーザー１');

「〇秒待機し○○が表示されていないことを確認する」コード⬇

// 詳細ボタンをクリックで画面遷移
await page1.getByRole('button', { name: '詳細' }).click();

// テキスト「ユーザー２」がbody内に表示されていないことを確認する
await page.waitForTimeout(5000);　// 5秒待機

const text1 = page1.locator('body >> text="ユーザー２"');
await expect(text1).toHaveCount(0);

URLから文字列を取得して、他のURLに埋め込んで開きたい

URL①、URL②が存在する場合に、URL①のユーザー個別のIdを取得して、URL②のhttps://demopage/main/users/details/以下に埋め込む場合のコードです。

URL① https://demopage/main/users/new/userId=12345
　　　：ユーザーを新規作成した場合のURL。userId=以下の文字列12345がユーザー個別のId

URL② https://demopage/main/users/details/12345
　　　：ユーザー情報の詳細画面を開けるURL。details/以下にユーザー個別のIdが入る

※上記のURLは仮のもので実際には存在しません。

.ts
// URL①を開く
await page.goto('https://demopage/main/users/new/userId=12345');

// userId=以下の文字列を取得
const match = fullUrl.match(/[?&]userId=([^&#]+)/);
const eventId = match ? match[1] : null;

// userId を含む遷移先URL（URL②）を作成
const targetUrl = `https://demopage/main/users/details/${eventId}`;　

作成したURL②に遷移したい場合は、上記のコードの下にこちらを記述すればOKです。

await page.goto(targetUrl);　

Discussion