{
"$type": "site.standard.document",
"canonicalUrl": "https://blog.nove-b.dev//posts/angular-playwright-typescript-e2e-testing",
"path": "/posts/angular-playwright-typescript-e2e-testing",
"publishedAt": "2025-01-19T00:00:00.000Z",
"site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
"tags": [
"Angular",
"Playwright",
"TypeScript",
"E2E"
],
"textContent": "E2E（イーツーイー）\n\n英語の「End-to-End（エンドツーエンド）」の略で、「端から端まで」を意味する。\nE2Eテストはユーザーの視点からアプリケーション全体の動作を確認し、機能の一貫性と信頼性を保証する手法すること。\n\nE2Eテストの自動化\n\n自動化するツールはいくつかあり、それぞれメリットデメリットがあるっぽい。下記は [ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress）とChatGPTの情報を混ぜ合わせた、メリットデメリット表。\n\n| 項目 | Playwright | Puppeteer | Cypress | Selenium |\n| ------------------------- | ------------------------------------------------ | ------------------------------------------- | ------------------------------- | --------------------------------- |\n| サポートブラウザ | Chromium, Chrome, Edge, Firefox, Webkit (Safari) | Chrome, Firefox | Chrome, Edge, Firefox, Electron | Chrome, Edge, Firefox, Safari, IE |\n| テストツールの有無 | ✅ | 🟡 (Jest を使えば可能) | ✅ | 🟡 (外部ライブラリが必要) |\n| 複数タブ / ウィンドウ | ✅ | ✅ | 🛑 | ✅ |\n| Shadow DOM | ✅ | 🟡 (aria または pierce セレクタを使えば可能) | ✅ | 🟡 (限定的なサポート) |\n| ブラウザ拡張 | ✅ | ✅ | 🟡 | 🟡 (一部サポート) |\n| 要素の特定 | 🟡 | ✅ | 🟡 | ✅ |\n| 要素の自動待機 | ✅ | 🟡 | ✅ | 🛑 (手動で記述が必要) |\n| スクリーンショット | ✅ | ✅ | ✅ | ✅ |\n| 動画 | ✅ | 🛑 | ✅ | 🛑 |\n| 実行速度 | ✅ | ✅ | ✅ | 🟡 (ブラウザ依存でやや遅い) |\n\nこれだけ見るとPlaywrightが有望な気がする。気になるのは要素の特定なので調べてみた結果、PuppeteerとCypressはjQuery、javascriptでの記述で取得できるけど、Playwrightは独特な記法になるということだったので、特段問題なさそうだった。\n\nPlaywrightをインストールする\n\n長いプロジェクトでnodeのバージョンがv16.13.2だったので、\n\nしっかり怒られた。\n\nこれを機にnodeのバージョンを上げることにする。\n\n色々な依存関係を解消しつつ、最新LTSまで上げた。\n\nnode_modulesを最新化し、\n\nPlaywrightを初期化する。大量のエラーが吐き出され、TLS/SSL 証明書の検証に失敗した。\n\nを実行する。\n\nNODE_TLS_REJECT_UNAUTHORIZEDは、Node.jsが\nHTTPS通信を行う際に使用する環境変数で、0にすると、サーバー証明書の有効性が検証されなくなる。\n\nChromium、Firefox、Webkit、FFMPEGがインストール完了した。\n\nという警告が出ていたので、\n\nでサーバー証明書を再度有効にした。\n\nPlaywrightのテストファイルを実行まで\n\nテストファイルの作成\n\ntests/にテストファイルを作成する。\n\nトライする\n\n上記をnpx playwright testで実行したところ、\n\nというエラーが大量にでた。どうやら、標準のユニットテストと混合しているらしい。\n\nエラーと格闘し成功まで\n\ntests/以下に置いていることが影響している気がしたので、tests/e2e以下にファイルを置いて再実行したところ、何も変わらない。\n\n色々調べてみた感じ、playwright.config.tsが不足しているようだったので、\n\nルートに追加したところ、テストを通すことができた。そしてレポートのHTMLが作成されるので、結果を見ることができる。",
"title": "AngularプロジェクトでPlaywrightを導入しTypeScriptで自動E2Eテストを実行する"
}