Browser QA — ビジュアルテストとインタラクションの自動化
使用タイミング
- 機能をステージング/プレビューにデプロイした後
- 複数ページにわたるUIの動作を確認する必要がある場合
- リリース前に、レイアウト、フォーム、インタラクションが実際に動作することを確認する
- フロントエンドコードに触れるPRをレビューするとき
- アクセシビリティ監査とレスポンシブテスト
仕組み
ブラウザ自動化MCP（Claude-in-Chrome、Playwright、Puppeteer）を使用して、実際のユーザーのようにライブページと対話します。
安全第一 — 爆発範囲（デフォルトは読み取り専用）
Browser QAは実際の認証と実際のユーザージャーニーを操作するため、爆発範囲を明示的に扱います。 デフォルトは読み取り専用：本番URLに対して変更を伴うジャーニー（購入、支払い、削除、一括更新）を決して実行してはいけません。明示的なオプトインおよびステージング/プレビューURLが必要です。シードされたテスト認証情報を使用し、実際の本番ログインは絶対に使用しないでください。スクリーンショットを保存する前に、認証情報/トークン/PIIを編集（redact）してください。
フェーズ1：スモークテスト
1. 対象URLに移動
2. コンソールエラーを確認（ノイズをフィルタリング：アナリティクス、サードパーティ）
3. ネットワークリクエストに4xx/5xxがないことを確認
4. デスクトップ + モバイルビューポートでabove-the-foldをスクリーンショット
5. Core Web Vitalsを確認：LCP < 2.5s、CLS < 0.1、INP < 200ms
（INPは2024年3月にFIDを置き換えました。閾値はweb.devに準拠）
フェーズ2：インタラクションテスト
1. すべてのナビリンクをクリック — デッドリンクがないことを確認
2. 有効なデータでフォームを送信 — 成功状態を確認
3. 無効なデータでフォームを送信 — エラー状態を確認
4. 認証フローをテスト：ログイン→保護ページ→ログアウト（テスト認証情報のみ、本番は絶対に使用しない）
5. 重要なユーザージャーニーをテスト（購入、オンボーディング、検索）
— デフォルトは読み取り専用。変更を伴うジャーニーは明示的なオプトインがある場合のみステージングで実行（上記「安全第一」を参照）
フェーズ3：ビジュアルリグレッション
1. 主要ページを3つのブレークポイント（375px、768px、1440px）でスクリーンショット
2. コミット済みのベースラインスクリーンショットと比較
— ベースラインがない場合はINCONCLUSIVEと報告し、決してサイレントPASSにしない
3. 5pxを超えるレイアウトシフト、欠落した要素、はみ出しをフラグ
4. 該当する場合はダークモードをチェック
フェーズ4：アクセシビリティ
1. 各ページでaxe-coreまたは同等のツールを実行
2. WCAG 2.2 AA違反（コントラスト、ラベル、フォーカス順序）をフラグ
3. キーボードナビゲーションがエンドツーエンドで機能することを確認
4. スクリーンリーダーのランドマークをチェック
注意：axe-coreは自動でWCAGの約30〜40%をカバーします。自動テストのパスは必要だが十分ではないため、キーボードナビゲーション、フォーカス順序、スクリーンリーダーのパスは手動チェックが依然として必要です。自動パスのみで「アクセシブル」と報告しないでください。
出力形式
## QAレポート — [URL] — [タイムスタンプ]
### スモークテスト
- コンソールエラー：クリティカル0、警告2（アナリティクスノイズ）
- ネットワーク：すべて200/304、失敗なし
- Core Web Vitals：LCP 1.2s ✓、CLS 0.02 ✓、INP 89ms ✓
### インタラクション
- [✓] ナビリンク：12/12 動作
- [✗] お問い合わせフォーム：無効なメールアドレスに対するエラー状態が欠落
- [✓] 認証フロー：ログイン/ログアウト 動作
### ビジュアル
- [✗] ヒーローセクションが375pxビューポートではみ出している
- [✓] ダークモード：全ページ一貫
### アクセシビリティ
- AA違反2件：ヒーロー画像の代替テキスト欠落、フッターリンクのコントラスト不足
### 判定：修正して出荷（2件の問題、0件のブロッカー）
# 判定 ∈ 出荷 / 修正して出荷 / 出荷不可。ビジュアルベースラインがない場合はINCONCLUSIVEを使用
統合
任意のブラウザMCPで動作：
mChild__claude-in-chrome__*ツール（推奨 — 実際のChromeを使用）- Playwright経由の
mcp__browserbase__* - 直接のPuppeteerスクリプト
デプロイ後の監視には /canary-watch と組み合わせて使用してください。