著者紹介

内容

目次

■■■第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　テストを実行する