はじめに
Playwightとは、ChromiumやWebKitなどのレンダリングエンジンの操作を自動化してE2Eテストを行うNode.jsライブラリです。
開発チームでは、MRCのWebフォームとトラッキングのサービスのE2EテストをPlaywrightで実装し、ECSタスクとして本番環境で毎日実行しています。
本記事ではE2EテストをPlaywightで実装する上での私なりの考え方の共有をします。
全体像
「Playwight の API」がプログラムが動く上での土台となります。
以下、1~ 3の流れをグルグル繰り返し、ブラウザ操作を行います。
- 「DOM Locator」に対して、例:
page.locator(".link") - 「画面上のアクション」を行う 例:
click() - その「処理を待つ」
// 例
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Click the get started link.
await page.getByRole('link', { name: 'Get started' }).click();
// Expects the URL to contain intro.
await expect(page).toHaveURL(/.*intro/);
});また、その時々で変数の対して expect関数を呼び出し、値の比較を行って、テストの妥当性をチェックします。
// 例
const value = { prop: 1 };
expect(value).toBe(value);
expect(value).not.toBe({});
expect(value.prop).toBe(1);プログラムの流れ
0. Playwight の API ~ 何をどう使うか ~
Playwight の APIを通じてプログラムが動くので、そもそもそのAPIを使うことは正しいのか、使い方は正しいのかどうかがプログラムの土台として大事であると感じました。
また、使用する関数の引数にどのようなオプションを入れるかによって挙動が変わってくる場合もあり、APIの仕様をドキュメントからしっかり理解した上でコードを書いていくことが重要となります。
英語の公式ドキュメントを読んで仕様を理解することが難しい場合は、chatGPTに要約してもらうと便利で分かりやすくて良かったです。
1. DOM Locator ~ 対象の DOM は正しいか ~
Playwright Test for VSCodeのPick Locatorの機能を使うことで、ブラウザ画面からクリックし、簡単に操作対象のDOM Locatorを取得することができます。
要素が多く入れ子になっていたり、iframeがあると、Pick Locatorで選択したいDOM Locatorを取得できないので、セレクタを指定してDOM Locator を取得することになります。この場合、HTMLが変更になる場合に備え、セレクタの指定方法を工夫する必要があります。
また、要素にクラスを付けるなどE2Eテストを想定したマークアップが、コードの可読性や保守性を高めることにつながります。
2. 画面上のアクション ~ アクションできているか ~
PlaywrightにはTrace viewerという実行したブラウザ操作のトレースをレコードするGUIの機能を使うことで、一連のアクションのリストや、画面のスクリーンショットからそのアクションが正しく実行できているのか確認をします。
3. 処理を待つ ~ できるだけAutoWaitingになるように ~
Playwightでは要素の可用性を自動的に判断し、操作可能になるまで待機するAuto Waitingの機能が備わっています。これにより待機時間を明示的に指定する必要がなくなり、コードが簡潔に読みやすくなり、可読性や再現性が増します。
テストを実行してAutoWaitingがされない場合は、それ以前の0~2で間違っている可能性を探りました。
難しい点
1度実行したらOKだったが、何回かに1回NGが起きる場合がありました。また、ローカル、Docker、AWSのそれぞれの環境の違いによりテスト結果が変わることもあるので、違う環境で何回か実行し確認を行う必要があります。
この辺りの再現性にムラがある点が「Playwightを通じてブラウザを操作するというE2Eテスト」の難しさに感じます。
まとめ
最初は自動テストが回らない原因を見つけることに時間がかかってしまうことも多かったですが、このように0~3の流れのどこで引っかかっているか順番に分けて考えると問題が解決しやすくなりました。
また、Playwrightの便利な点だけではなく難しい点に気づけたことで、より理解が深まりました。別の業務でも、「一連の流れを整理すること」「難しさを理解すること」を意識していけたらと思います。
