PlaywrightというE2Eテストツールを布教したい​

PlaywrightというE2Eテストツールを布教したい​

Transcript

1. Playwrightという E2Eテストツールを布教したい
2. E2Eテストとは？ • E2E（エンドツーエンド）テストは、アプリ全体の流れが実際のユーザー 環境と同様の条件下で期待通りに動作するかを検証するテストです。 • E2Eテストは、外部システムとの連携やエラー時の動作、業務フローなど の観点でテストケースの作成をします。 • CI/CDパイプラインにE2Eテストを組み込むことで、デグレーション（新 しいコードの導入による既存機能への影響）の早期検知やテスト工数削減 などの効果が見込めます。
3. E2Eテスト自動化で得られる効果 • テスト工数の削減 o 自動化により繰り返し行われる手動テスト作業を削減 o バグ発見時の再テストが容易 o リリース頻度の向上 • テスト消化漏れ（デグレ確認漏れ）の防止 o 毎回同じ品質でテストが実施される o 人為的なミスの削減 • バグの可視化 o テスト結果の自動レポート生成によるバグの可視化 o バグの追跡と管理が容易
4. E2Eテストツール Playwrightについて • Playwrightは、Microsoftによって開発されたオープンソースの エンドツーエンド（E2E）テストツールです。 • Playwrightは、Chromium（Google Chrome、Microsoft Edge）、 Firefox、WebKit（Safari）など複数の主要ブラウザでのテストを サポートしています。 • ファイルのアップロード/ダウンロード、自動スクリーンショット、ビデオ録 画、ネットワークインターセプト、モックデータの使用など、豊富な機能を 提供しています。
5. Playwrightのできること • テストコード生成 • レポート生成と確認 • クロスブラウザでテスト確認
6. テストコード生成 • コマンド：npx playwright codegen 画面を操作することで コード生成が可能
7. レポートの生成と確認 • コマンド：npx playwright show-report ブラウザごとにテストが成功したか 失敗したか確認できる
8. レポートの生成と確認 • コマンド：npx playwright show-report テストコードのどの行で 失敗したか確認できる 各ステップにかかった時間や 失敗したステップが確認できる
9. レポートの生成と確認 エラー時のDOMのスナップショット やネットワーク、コンソールログが 確認できる
10. クロスブラウザでテスト確認 • playwright.config.js でブラウザを定義！ npx playwright installを 実施しておく必要がある モバイルにも対応可能！
11. クロスブラウザでテスト確認 テスト結果にブラウザ or モバイルを表示
12. E2Eテストはどうやって自動化するのか？ • E2Eテストツール（Playwrightなど）を使用してテストコードを作成する • CI/CDパイプライン内でテストツールを実行する • テスト時の環境はDockerで作成する（dind）
13. E2Eテスト自動化導入時に気を付けること • Dockerイメージはどこから取ってくるか o DockerHubからイメージを取得するとスロットリングに引っ掛かる • コンテナ間の通信はどう行うか o Docker Composeを使用したコンテナ間の通信は、ホスト名に「localhost」ではなく、 「コンテナID」または「コンテナ名」、「サービス名」を指定する。 • CodeBuildのリソースは足りているか o Docker Composeを使用してテストを行う場合、 最低でも vCPU 4、RAM 7GB 程度必要