2026-claude-in-chrome

CodeGrid 連載「第３回 壊れにくいE2Eテストコードの生成 | Chrome拡張としてのClaude in Chrome」のサンプルリポジトリです。

Claude Code の e2e-test-maker スキルと Claude in Chrome を組み合わせ、実際の DOM 構造を確認しながら Playwright の E2E テストコードを生成します。

セットアップ

npm install
npx playwright install chromium

テストの実行

npm test              # 通常実行（ヘッドレス）
npm run test:ui       # インタラクティブ UI モード
npm run test:headed   # ブラウザを表示して実行
npm run test:debug    # デバッガー付きで実行

テストコードの生成

Claude Code で e2e-test-maker スキルを使います。

/e2e-test-maker <ファイル名> <テスト内容>