第6回 — E2Eスキル /e2e

Phase 2｜部品スキル構築 ／ 8時間（講義2h + WS6h）／ GitHub前提

この回の狙い

• 「作成した成果物をE2Eテストする」スキルを自作する
• Webアプリをブラウザで動かし、合否と失敗内容をMD出力する

講義（2h）

1. E2Eとは：ユーザー操作を通しで検証（単体テストとの違い）
2. 題材Web版の構成（web/ + 共通コア src/todo.js）
3. Playwright の基礎：playwright.config.js／page.fill/click/expect／webServer自動起動
4. agent-browser（社内ツール）を代替経路として使う考え方
5. スキル設計：実行（npm run e2e）→ 結果（e2e/.report.json）→ 出力（.ai/e2e/<branch>.md）
6. フレーク対策・失敗の再現情報の残し方

ワークショップ（6h）

• npm run e2e:install（chromium取得）→ npm run e2e で現状を確認（一部わざと失敗）
• .claude/skills/e2e/SKILL.md を作成（完成版を参考に）
• /e2e を実行し、失敗テスト名・期待/実際・推定原因を含むMDを生成
• 既存のE2Eを1本追加（例：完了で取り消し線が付く）

OJT課題

実務（or 題材）でWeb操作シナリオを1つE2E化し /e2e で回す。

🎯 回のゴール

/e2e で、Webアプリのブラウザテスト結果をMD出力できる（合否＋失敗詳細）。

講師チェック

• [ ] npm run e2e が動く（環境セットアップ済み）
• [ ] .ai/e2e/*.md に合否サマリ＋失敗詳細
• [ ] 失敗が再現に足る情報を含む