AngularプロジェクトでPlaywrightを導入しTypeScriptで自動E2Eテストを実行する

E2E（イーツーイー）

英語の「End-to-End（エンドツーエンド）」の略で、「端から端まで」を意味する。 E2Eテストはユーザーの視点からアプリケーション全体の動作を確認し、機能の一貫性と信頼性を保証する手法すること。

E2Eテストの自動化

自動化するツールはいくつかあり、それぞれメリットデメリットがあるっぽい。下記は [ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress）とChatGPTの情報を混ぜ合わせた、メリットデメリット表。

これだけ見るとPlaywrightが有望な気がする。気になるのは要素の特定なので調べてみた結果、PuppeteerとCypressはjQuery、javascriptでの記述で取得できるけど、Playwrightは独特な記法になるということだったので、特段問題なさそうだった。

Playwrightをインストールする

長いプロジェクトでnodeのバージョンがv16.13.2だったので、

しっかり怒られた。

これを機にnodeのバージョンを上げることにする。

色々な依存関係を解消しつつ、最新LTSまで上げた。

node_modulesを最新化し、

Playwrightを初期化する。大量のエラーが吐き出され、TLS/SSL 証明書の検証に失敗した。

を実行する。

NODE_TLS_REJECT_UNAUTHORIZEDは、Node.jsが HTTPS通信を行う際に使用する環境変数で、0にすると、サーバー証明書の有効性が検証されなくなる。

Chromium、Firefox、Webkit、FFMPEGがインストール完了した。

という警告が出ていたので、

でサーバー証明書を再度有効にした。

Playwrightのテストファイルを実行まで

テストファイルの作成

tests/にテストファイルを作成する。

トライする

上記をnpx playwright testで実行したところ、

というエラーが大量にでた。どうやら、標準のユニットテストと混合しているらしい。

エラーと格闘し成功まで

tests/以下に置いていることが影響している気がしたので、tests/e2e以下にファイルを置いて再実行したところ、何も変わらない。

色々調べてみた感じ、playwright.config.tsが不足しているようだったので、

ルートに追加したところ、テストを通すことができた。そしてレポートのHTMLが作成されるので、結果を見ることができる。