【結論】Playwright E2E環境の構築
Claude CodeはPlaywrightの導入、テスト作成、失敗解析を支援できますが、対話型初期化を無条件で自動承認させないことが重要です。
既存プロジェクトでは使用中のパッケージマネージャー、Node.js、テスト構成、開発サーバーを先に確認します。
認証情報や本番データを使わず、専用テスト環境で実行します。
# ターミナルで実行：既存のパッケージ管理を確認
ls package-lock.json pnpm-lock.yaml yarn.lock bun.lock 2>/dev/null
# npm環境で実行：Playwrightを開発依存へ追加
npm install -D @playwright/test
# ターミナルで実行：必要なブラウザを導入
npx playwright install
# ターミナルで実行：対象テストを実行
npx playwright test tests/login.spec.ts具体的な手順・設定方法
対象URL、テストユーザー、データ初期化、成功条件を決めます。
安定したRole、Label、Test IDを使い、固定時間待機を避けます。
失敗時はScreenshot、Trace、Videoを保存し、原因確認後に最小差分で修正します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
ログイン画面のE2Eテスト計画を作成してください。
本番URLと実ユーザーは使用せず、ローカル環境と専用テストアカウントを使ってください。
正常系、認証失敗、入力検証、アクセシビリティを含め、承認するまでインストールや編集は行わないでください。注意点・よくあるエラーと対処法
存在しない--quietなどのフラグを推測して付けないでください。
ブラウザバイナリの導入には容量とネットワークが必要です。
失敗を通すためにテストやAssertionを削除しないでください。