E2E テスト自動生成（Playwright）

コース構成

このコースで学ぶこと

1. 01

   E2E テストが薄い 3 つの理由

   セレクタ取得が面倒 / 壊れやすい / 何をテストすべきか曖昧。Claude Code でこの 3 つを解決。

   Unit テストは増えても E2E テストが薄い、というのは多くのチームに共通する課題です。理由：(1) ボタンの正確なセレクタを書くのが面倒、(2) DOM 変更で壊れやすい、(3) 何をテストすべきか議論が分かれる。

   Claude Code に『ユーザーフローを自然言語で説明』するだけで、Playwright の Page Object パターンに沿った安定したテストを生成できます。

   Playwright のセットアップ
2. 02

   Playwright のセットアップ

   新規プロジェクトなら 1 コマンド。既存に追加する場合も簡単。

   bash

   pnpm create playwright
   
   # できるもの
   # - playwright.config.ts
   # - tests/example.spec.ts
   # - npm scripts: test, test:headed, test:ui
   
   # 既存プロジェクトに追加
   pnpm add -D @playwright/test
   pnpm exec playwright install chromium

   E2E テストが薄い 3 つの理由プロンプトテンプレ：フロー → テスト
3. 03

   プロンプトテンプレ：フロー → テスト

   ユーザー操作を自然言語で記述すると、安定した Playwright テストが生成される。

   text

   > 以下のユーザーフローを E2E テストで実装:
   
   ## シナリオ：ユーザー登録
   1. トップページにアクセス
   2. 『新規登録』ボタンをクリック
   3. メール入力（test+random@example.com、ランダム部分は uuid）
   4. パスワード入力（Test1234! 固定）
   5. 利用規約のチェックボックスをオン
   6. 『登録』ボタンをクリック
   7. ウェルカム画面が表示されることを確認
   8. ヘッダーに登録メールアドレスが表示されることを確認
   
   ## ルール
   - Page Object パターン（pages/RegisterPage.ts を作成）
   - セレクタは role/label/text 優先（data-testid フォールバック）
   - 安定性のため明示的な waitFor を使う
   - ランダム要素を含めて並列実行可能に
   - 失敗時のスクリーンショットを保存
   
   ## 出力
   - tests/register.spec.ts
   - pages/RegisterPage.ts

   出力イメージtests/register.spec.ts の冒頭

   import { test, expect } from "@playwright/test";
   import { RegisterPage } from "./pages/RegisterPage";
   
   test("新規登録が完了しウェルカム画面に遷移する", async ({ page }) => {
     const register = new RegisterPage(page);
     const email = `test+${crypto.randomUUID()}@example.com`;
     await register.goto();
     await register.submit(email, "Test1234!");
     await expect(page.getByText("ようこそ")).toBeVisible();
   });
   …（pages/RegisterPage.ts も併せて生成）

   Playwright のセットアップ壊れにくいセレクタの書き方
4. 04

   壊れにくいセレクタの書き方

   Claude に教えるルール：role > label > text > test-id > class の優先順。

   • 🟢 `page.getByRole('button', { name: '登録' })`
   • 🟢 `page.getByLabel('メールアドレス')`
   • 🟢 `page.getByText('ようこそ')`
   • 🟡 `page.getByTestId('register-btn')`（HTML 改造可能なら）
   • 🔴 `page.locator('.btn-primary')`（CSS class、変わりやすい）
   • 🔴 `page.locator('#user-form > div:nth-child(3)')`（位置依存）
   プロンプトテンプレ：フロー → テストSkill 化と CI 統合
5. 05

   Skill 化と CI 統合

   新機能 PR で関連テストを自動生成 → CI で実行 → 失敗時にレポート。

   手を動かす

   0 / 5

   • 上記プロンプトを `.claude/skills/e2e-gen/SKILL.md` に
   • Page Object パターンの命名規則を CLAUDE.md に
   • GitHub Actions で main マージ後に E2E を毎晩実行
   • 失敗テストは Slack #qa-alerts に通知
   • 3 ヶ月後、E2E カバレッジの推移を可視化

   理解度チェック

   1. Q1.E2E テストが『壊れにくく』なるためのセレクタ優先順位の本質は？

      ACSS class を優先するBrole > label > text > test-id > class の順で、利用者が見える意味に近いセレクタを優先するCxpath を優先するD毎回ランダムに選ぶ

   2. Q2.AI 生成 E2E テストを CI に組み込む前に、人間が必ず確認すべきは？

      Aテストファイルの行数B本番に近い実 API を叩いていないか、テスト用シードデータ・モックが適切に分離されているかCClaude のモデル名DPlaywright のロゴ

   3. Q3.E2E テスト自動生成の入力として最も適切な組合せは？

      Aユーザーフローの自然言語説明、対象 UI のソースコード、CLAUDE.md にあるセレクタ規約BPOS 売上 CSVC顧客の購入履歴D経費精算 PDF
   壊れにくいセレクタの書き方