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

■■■第1章　Playwrightハンズオン
■■1.1　Playwrightのセットアップ方法
■1.1.1　インストールと初期設定
■1.1.2　Playwrightのディレクトリ構成
■■1.2　テスト用Webアプリケーションの作成
■1.2.1　Playwrightの導入
■■1.3　表示のテストとテストの実行方法
■1.3.1　新規ページの作成
■1.3.2　最初のテスト
■1.3.3　テストの実行
■■1.4　ページ遷移のテストとテスト生成機能
■1.4.1　フォーム入力のテストを生成する
■■1.5　フォーム操作のテスト
■■1.6　まとめ
■■■第2章　E2Eテストツールの紹介
■■2.1　E2Eテストツールの歴史
■■2.2　ブラウザベースのE2Eテストツール
■2.2.1　Cypress
■2.2.2　Puppeteer
■2.2.3　Playwright
■2.2.4　E2Eテストツールの比較
■■2.3　WebフロントエンドフレームワークとE2Eテストツール
■2.3.1　Svelte
■2.3.2　Vue.js
■2.3.3　React
■2.3.4　Angular
■2.3.5　Electron
■■2.4　まとめ
■■■第3章　Playwrightのテスト用ツールセット（1）ロケーター
■■3.1　テストツールのカテゴリ
■［column］アサーションとPlaywright
■■3.2　ロケーター
■3.2.1　getByRole()
■3.2.2　getByLabel()
■3.2.3　getByPlaceholder()
■3.2.4　getByText()
■3.2.5　getByAltText()
■3.2.6　getByTitle()
■3.2.7　getByTestId()
■［column］data-testidはいつ使うべきか？
■3.2.8　その他のロケーター
■■3.3　壊れにくいテスト
■3.3.1　ラベルやプレースホルダーのみによる要素取得
■3.3.2　適切なラベルの付け方
■■3.4　getByRole()で指定可能なロール
■3.4.1　テストで頻繁に利用するロール
■3.4.2　テストでの利用頻度が低いと思われるロール
■■3.5　高度なロケーター
■3.5.1　フィルター
■3.5.2　一度絞り込んだ要素の中からさらに検索
■3.5.3　複数の要素の絞り込み
■3.5.4　その他のロケーター
■3.5.5　複数要素のあるリストやテーブルからの情報取得
■■3.6　まとめ
■■■第4章　Playwrightのテスト用ツールセット（2）ナビゲーション、アクション、マッチャー
■■4.1　ナビゲーション
■4.1.1　goto()
■4.1.2　waitForURL()
■4.1.3　toHaveTitle()とtoHaveURL()
■■4.2　アクション
■4.2.1　アクション可能性
■4.2.2　キーボード操作：fill()/clear()/press()/pressSequentially()
■4.2.3　チェックボックスやラジオボタンのチェック：check()/uncheck()
■4.2.4　セレクトボックスの選択：selectOption()
■4.2.5　マウス操作：click()/dblclick()/hover()/dragTo()
■4.2.6　フォーカス：focus()
■4.2.7　ファイルのアップロード：setInputFiles()
■■4.3　マッチャー
■4.3.1　toContainText()/toHaveText()/toBeVisible()/toBeAttached()
■4.3.2　not
■4.3.3　toBeChecked()
■4.3.4　toBeDisabled()とtoBeEnabled()
■4.3.5　toBeEmpty()とtoBeHidden()
■4.3.6　toBeFocused()
■4.3.7　toHaveCount()
■4.3.8　toHaveValue()とtoHaveValues()
■4.3.9　その他のマッチャー
■■4.4　リトライの挙動
■4.4.1　リトライのタイムアウト
■4.4.2　固定時間を待つコードはやめよう
■■4.5　まとめ
■■■第5章　テストコードの組み立て方
■■5.1　何をテストとするか？
■5.1.1　テストの分類とPlaywrightができること
■5.1.2　テストのボリュームのパターン
■5.1.3　最初の一歩：一筆書き
■■5.2　テストコードを書く
■5.2.1　test()
■5.2.2　テストのグループ化
■［column］ビヘイビア駆動開発（BDD）の用語
■5.2.3　準備・片付けコードを共有する
■5.2.4　すばやく繰り返す
■■5.3　テストのコメントを書くべきか
■■5.4　テストファイルの命名
■■5.5　ビジュアルリグレッションテスト
■■5.6　まとめ
■■■第6章　実践的なテクニック
■■6.1　スクリーンショットとビデオ
■6.1.1　スクリーンショットの撮影
■6.1.2　ビデオの撮影
■■6.2　認証を伴うテスト
■6.2.1　認証を使わないモードを実装する
■6.2.2　セッション情報を共有する
■■6.3　ネットワークの監視とハンドリング
■6.3.1　ネットワークの監視
■6.3.2　ネットワークのハンドリング
■■6.4　複数ブラウザでの動作確認
■6.4.1　ブラウザの基礎知識
■6.4.2　Playwrightのサポートブラウザ
■6.4.3　ブラウザのインストール
■6.4.4　ブラウザの設定
■6.4.5　複数ブラウザのテストを実行
■6.4.6　ブラウザのエミュレーション
■［column］Playwright Test for VSCodeで実行するブラウザを指定するには129
■［column］設定のスコープ
■■6.5　まとめ
■■■第7章　ソフトウェアテストに向き合う心構え
■■7.1　テストの7原則
■■7.2　ソフトウェアテストの構成要素
■7.2.1　テストレベル
■7.2.2　テストタイプ
■［column］確認テストとリグレッションテスト
■7.2.3　テスト技法
■［column］テスト技法を理解すると設計力も上がる
■■7.3　コード品質とは何か？
■■7.4　E2Eテストとユニットテストの効率の良い棲み分け
■［column］パラメータ化テスト
■■7.5　テストコードの設計方針とリファクタリング
■7.5.1　テストは単独で実行できるようにする
■7.5.2　テストは単独で読めるようにする
■7.5.3　壊れにくいテストにする
■■7.6　モックとの付き合い方
■■7.7　E2Eテストの投資対効果を上げる
■［column］テスト自動化の8原則
■■7.8　まとめ
■■■第8章　E2Eの枠を超えたPlaywrightの応用例
■■8.1　ランダムテスト
■8.1.1　ランダムにリンクをクリックするテスト
■■8.2　コンポーネントのテスト
■8.2.1　インストール
■8.2.2　コンポーネントに対するテストのメリット／デメリット
■8.2.3　コンポーネントに対するテストのサンプル
■8.2.4　コンポーネントに対するビジュアルリグレッションテスト
■■8.3　再利用可能性
■8.3.1　テストの流れを把握しやすくする
■8.3.2　テストを書きにくい画面に気づいたとき
■■8.4　テストの並列実行
■8.4.1　並列実行におけるPlaywrightの仕様
■8.4.2　並列にテストを実行しないようにする
■8.4.3　並列にテストを実行する際の注意
■■8.5　まとめ
■■■第9章　Web APIのテスト
■■9.1　PlaywrightにおけるWeb APIテスト
■■9.2　テストの実行例
■■9.3　タイムトラベルデバッグ
■■9.4　より詳細なテスト方法
■9.4.1　メソッド
■9.4.2　ヘッダとクエリの送信
■9.4.3　ボディの送信
■■9.5　通常のE2Eテストの中からWeb APIを呼び出す
■■9.6　まとめ
■■■第10章　E2Eテストの実戦投入
■■10.1　どのテストから書き始めるか
■10.1.1　人力テストからE2Eテストへ移行する
■10.1.2　テストシナリオを洗い出してからE2Eテストを書く
■10.1.3　ユニットテストから書き始める
■■10.2　E2Eテストをどのリポジトリに置くか
■10.2.1　E2Eテスト専用リポジトリ
■10.2.2　フロントエンドのリポジトリとの相乗り
■■10.3　CIでのE2Eテスト実行
■10.3.1　GitHub ActionsでPlaywrightのE2Eテストを実行
■10.3.2　CI実行結果のレポートを確認
■10.3.3　CI実行時間の短縮
■■10.4　プロジェクト管理との統合
■10.4.1　テストのプロジェクト管理
■10.4.2　自動テストとの統合
■■10.5　まとめ
■■■第11章　Playwrightの内部構造
■■11.1　Playwrightのアーキテクチャ
■■11.2　他のE2Eテストツールのアーキテクチャ
■11.2.1　Cypressのアーキテクチャ
■11.2.2　Seleniumのアーキテクチャ
■■11.3　クライアント／サーバ構成でのテスト実行
■11.3.1　サーバの起動
■11.3.2　接続先サーバの指定
■11.3.3　テストの実行
■11.3.4　使いどころ
■■11.4　まとめ
■■■付録
■■付録A　生成AIによるテストコードの自動生成
■A.1　テストの作成
■A.2　テストデータの作成
■A.3　テストケースの作成
■■付録B　VSCode Dev Containersを利用した環境構築
■B.1　VSCode Dev Containersとは
■B.2　セットアップ手順
■B.3　PlaywrightのUIモード実行
■■付録C　ユニットテストフレームワークとの共存
■C.1　Jestとの共存
■C.2　Vitestとの共存
■■付録D　Playwrightを使ったスクレイピング
■D.1　スクレイピングを行う際の注意
■D.2　プロジェクトの作成とひな形のコード生成
■D.3　構造の修正とコマンドライン引数のパース
■D.4　都道府県情報のパース
■D.5　週間天気のパース
■■付録E　Microsoft Playwright Testing
■E.1　Microsoft Playwright Testingを試す
■E.2　ワークスペースを作成する
■E.3　テスト環境を設定する
■E.4　テストを実行する