〔電子〕［入門］Webフロントエンド E2E テストーーPlaywrightによるWebアプリの自動テストから良いテストの書き方まで

【E2Eテストの概念と目的を理解し、モダンなノウハウを実践できるようになる】 E2Eテスト（End-to-End Testing）とは、システムの端から端（End-to-End）まで、全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し、E2Eテストをこれからプロジェクトに導入しようとしている人、すでに導入しているがパフォーマンスや保守性で課題を感じている人を対象に、E2Eテストのフレームワークとして近年人気が急上昇しているPlaywrightをツールとして、その目的からモダンなノウハウまで、E2Eテスト初心者の方にもわかりやすくハンズオンを交えながら解説します。CIへ組み込む方法やユニットテストとの棲み分けなど、E2Eテストを実際の開発現場に投入するうえでの知見も数多く紹介します。 ■こんな方におすすめ ・E2Eテストをこれからプロジェクトに導入しようとしている人 ・すでに導入しているがパフォーマンスや保守性で課題を感じている人 ■目次 第1章 Playwrightハンズオン 　　1.1 Playwrightのセットアップ方法 　　1.2 テスト用Webアプリケーションの作成 　　1.3 表示のテストとテストの実行方法 　　1.4 ページ遷移のテストとテスト生成機能 　　1.5 フォーム操作のテスト 　　1.6 まとめ 第2章 E2Eテストツールの紹介 　　2.1 E2Eテストツールの歴史 　　2.2 ブラウザベースのE2Eテストツール 　　2.3 WebフロントエンドフレームワークとE2Eテストツール 　　2.4 まとめ 第3章 Playwrightのテスト用ツールセット（1）ロケーター 　　3.1 テストツールのカテゴリ 　　3.2 ロケーター 　　3.3 壊れにくいテスト 　　3.4 getByRole()で指定可能なロール 　　3.5 高度なロケーター 　　3.6 まとめ 第4章 Playwrightのテスト用ツールセット（2）ナビゲーション、アクション、マッチャー 　　4.1 ナビゲーション 　　4.2 アクション 　　4.3 マッチャー 　　4.4 リトライの挙動 　　4.5 まとめ 第5章 テストコードの組み立て方 　　5.1 何をテストとするか？ 　　5.2 テストコードを書く 　　5.3 テストのコメントを書くべきか 　　5.4 テストファイルの命名 　　5.5 ビジュアルリグレッションテスト 　　5.6 まとめ 第6章 実践的なテクニック 　　6.1 スクリーンショットとビデオ 　　6.2 認証を伴うテスト 　　6.3 ネットワークの監視とハンドリング 　　6.4 複数ブラウザでの動作確認 　　6.5 まとめ 第7章 ソフトウェアテストに向き合う心構え 　　7.1 テストの7原則 　　7.2 ソフトウェアテストの構成要素 　　7.3 コード品質とは何か？ 　　7.4 E2Eテストとユニットテストの効率の良い棲み分け 　　7.5 テストコードの設計方針とリファクタリング 　　7.6 モックとの付き合い方 　　7.7 E2Eテストの投資対効果を上げる 　　7.8 まとめ 第8章 E2Eの枠を超えたPlaywrightの応用例 　　8.1 ランダムテスト 　　8.2 コンポーネントのテスト 　　8.3 再利用可能性 　　8.4 テストの並列実行 　　8.5 まとめ 第9章 Web APIのテスト 　　9.1 PlaywrightにおけるWeb APIテスト 　　9.2 テストの実行例 　　9.3 タイムトラベルデバッグ 　　9.4 より詳細なテスト方法 　　9.5 通常のE2Eテストの中からWeb APIを呼び出す 　　9.6 まとめ 第10章 E2Eテストの実戦投入 　　10.1 どのテストから書き始めるか 　　10.2 E2Eテストをどのリポジトリに置くか 　　10.3 CIでのE2Eテスト実行 　　10.4 プロジェクト管理との統合 　　10.5 まとめ 第11章 Playwrightの内部構造 　　11.1 Playwrightのアーキテクチャ 　　11.2 他のE2Eテストツールのアーキテクチャ 　　11.3 クライアント／サーバ構成でのテスト実行 　　11.4 まとめ 付録 　　付録A 生成AIによるテストコードの自動生成 　　付録B VSCode Dev Containersを利用した環境構築 　　付録C ユニットテストフレームワークとの共存 　　付録D Playwrightを使ったスクレイピング 　　付録E Microsoft Playwright Testing ■著者プロフィール 渋川 よしき（しぶかわ よしき）：フューチャーアーキテクト株式会社　Technology Innovation Group。自動車会社、ソーシャルゲームの会社を経て現職。Python/C++/JavaScript/Golangあたりを仕事や趣味で扱う。著書多数。 武田 大輝（たけだ ひろき）：フューチャーアーキテクト株式会社　Technology Innovation Group。アーキテクチャデザインからデリバリーまでを担うソフトウェアアーキテクト兼テックリード。 枇榔 晃裕（びろう あきひろ）：フューチャー株式会社　サイバーセキュリティイノベーショングループ。フロントエンドエンジニア。React.jsを用いたフロントエンド開発が得意。 木戸 俊輔（きど しゅんすけ）：フューチャー株式会社　サイバーセキュリティイノベーショングループ。踊るエンジニア。SaaS開発・運営を中心にキャリアを積んできた。 藤戸 四恩（ふじと しおん）：フューチャーアーキテクト株式会社　流通製造グループ機械学習が得意。最近はGoやReact.tsを使ってコードを書くことが好き。 小澤 泰河（おざわ たいが）：フューチャーアーキテクト株式会社　Technology Innovation Group。おもにB2Bの業務システムについて、Webアプリケーションの開発、顧客折衝を通したアーキテクチャの検討などを行っている。