はじめに
Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。
テストの独立性を高める
可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、
- １つのテストが失敗しても他のテストに影響しない
- テストの順序を考慮する必要がない
- テストをシンプルに保つことができる
あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after hooks を利用するのが良さそうですね。
外部サイトのテストをしない
タイトルの通り、自分が管理しているサイトだけをテストしようということです。外部サイトはコントロールできないので、テストが不安定になるし、テストの時間がかかるおそれがあります。
実装の中で外部サイトにアクセスすることを回避できない場合は、Network API を利用して、リクエストをモックしましょう。
Locator を利用する
対象の要素を指定する際は、Locator を利用しましょう。XPath や CSS セレクタで指定すると DOM の変更に追従することが難しくなるので、DOM の変更に強い Locator を使いましょう。
// 👎
page.locator('button.buttonIcon.episode-actions-later');
// 👍
page.getByRole('button', { name: 'submit' });
Test generator を使って Locator を生成する
Locator の生成は Test generator を使って生成しましょう。Test generator として VS Code の extension や Playwright Inspector を使って生成することができます。今回は Codegen コマンドを利用して実際に生成してみます。
Codegen を起動
以下のコマンドを実行して起動します。demo.playwright.dev/todomvc は接続する URL ですので、適宜読み替えてください。
% npx playwright codegen demo.playwright.dev/todomvc
テストを生成
Codegen を起動すると、ブラウザと Playwright Inspector ウィンドウの２つが立ち上がります。
立ち上がったブラウザで実際に操作（クリックやテキスト入力など）をすることで、操作に対応したコードが Playwright Inspector ウィンドウに生成されます。
例えば、テキストボックスをクリックして文字を入職した場合、以下のようなコードが生成されました。
await page.getByPlaceholder('What needs to be done?').click();
await page.getByPlaceholder('What needs to be done?').fill('hogehoge');
また、Locator の生成だけに利用したい場合は、Record を停止して、Pick Locator を有効にしてから、ブラウザで対象の要素をクリックすることで Locator を生成することができます。
Web first assertions を使ってアサーションする
Web の仕組み上、要素の読み込み時間や表示されるまでのタイムラグがあります。これらをアサーションする際に、手動で実装してしまうとテストを実行した瞬間の状態（まだ要素が存在しないかもしれない。）でアサーションが実行され、不安定なテストになってしまいます。（何秒か待機するようなワークアラウンドが必要になる。）
このような問題を解決するためには、あらかじめ用意されている Web first assertionsを利用しましょう。
// 👎
expect(await page.getByText('welcome').isVisible()).toBe(true);
// 👍
await expect(page.getByText('welcome')).toBeVisible();
自動で待機、またはリトライしてくれるアサーション一覧はこちらを確認してください。なお、デフォルトのタイムアウトは 5 秒となっています。変更したい場合は、こちらを参照してください。
最新の Playwright パッケージを利用する
基本的な事かもしれませんが、テストの実行は最新の Playwright を利用するようにしましょう。そうすることで、最新のブラウザでテストを実行することができます。また、最新の機能も利用することができるので、積極的に追従したいですね。リリースノートを確認することで、最新バージョンと変更点を確認することができます。
CI でテストを実行する
CI でテストを実行することで、テストの実行頻度をあげましょう。GitHub Actions での設定については、公式ドキュメントで解説されてますし、実際に実行してみたブログ も執筆していますので、確認してみてください。テストの実行頻度を上げることで、より早く失敗に気づくことができそうですね。
Linter を設定する
ESLint の @typescript-eslint/no-floating-promises ルールを設定しましょう。これにより非同期実行時に await が漏れていてうまく動かないなどに素早く気づくことができそうです。より早く気づくために可能であれば、ローカル開発環境に組み込むのが良さそうですね。
並列処理やシャーディングを設定する
テストの実行はデフォルトで並列実行されます。ただし、ひとつのファイル内のテストは同じワーカープロセス内で実行されます。各テストが独立している場合は、同じファイル内のテストも並列実行するように設定することができます。設定方法については API のドキュメントも参考にしてみてください。
test.describe.configure({ mode: 'parallel' });
さらにテストの規模が大きくなった場合は、複数マシンで実行することもできます。詳細については、Sharding 機能をご確認ください。
ソフトアサーションを利用する
通常、アサーションでテストが失敗した場合、その失敗したアサーションでテストが終了してしまいます。しかし、失敗したテストを修正した後に再実行すると、別の部分でまた失敗することがありますよね？ こういう場合、ソフトアサーションを利用することで、すべてのアサーションを実行して、失敗したアサーションの一覧を確認できるようになります。これにより、修正すべき箇所をより明確に把握することができます。
await expect.soft(page.getByTestId('status')).toHaveText('Success');
await expect.soft(page.getByTestId('eta')).toHaveText('1 day');