browser-qa

# ブラウザQA — 自動ビジュアルテストと相互作用 ## 使用時期 - ステージング/プレビューに機能をデプロイ後 - ページ全体のUIの動作を検証する必要がある場合 - 出荷前 — レイアウト、フォーム、相互作用が実際に機能することを確認 - フロントエンドコードに触れるPRをレビューする場合 - アクセシビリティ監査とレスポンシブテスト ## 動作方法 ブラウザオートメーションMCP（claude-in-chrome、Playwright、またはPuppeteer）を使用して、実際のユーザーのようにライブページと相互作用します。 ### フェーズ1：スモークテスト ``` 1. ターゲットURLに移動 2. コンソールエラーをチェック（ノイズをフィルター：分析、サードパーティ） 3. ネットワークリクエストで4xx/5xxがないことを確認 4. デスクトップ+モバイルビューポート上の上にスクリーンショット 5. Core Web Vitalsをチェック：LCP < 2.5s、CLS < 0.1、INP < 200ms ``` ### フェーズ2：相互作用テスト ``` 1. すべてのnavリンクをクリック — デッドリンクがないことを確認 2. 有効なデータでフォームを送信 — 成功状態を確認 3. 無効なデータでフォームを送信 — エラー状態を確認 4. 認証フローをテスト：ログイン→保護されたページ→ログアウト 5. 重要なユーザージャーニーをテスト（チェックアウト、オンボーディング、検索） ``` ### フェーズ3：ビジュアル回帰 ``` 1. 3つのブレークポイント（375px、768px、1440px）でキーページのスクリーンショット 2. ベースラインスクリーンショット（保存されている場合）と比較 3. レイアウトシフト> 5px、要素の欠落、オーバーフローにフラグを立てる 4. 該当する場合はダークモードをチェック ``` ### フェーズ4：アクセシビリティ ``` 1. 各ページでaxe-coreまたは同等のものを実行 2. WCAG AAの違反にフラグを立てる（コントラスト、ラベル、フォーカス順） 3. キーボードナビゲーションがエンドツーエンドで機能することを確認 4. スクリーンリーダーランドマークをチェック ``` ## 出力形式 ```markdown ## QA Report — [URL] — [timestamp] ### Smoke Test - ✓ ページが読み込まれる - ✗ コンソールエラー：オプト不可なトラッキング警告 - ✓ Core Web Vitals OK - [スクリーンショット] ### 相互作用テスト - ✓ ナビゲーション機能 - ✓ フォーム検証 - ✗ モバイルメニューが開かない ### ビジュアル回帰 - ✓ デスクトップレイアウト - ✗ モバイルで画像がオーバーフロー ### アクセシビリティ - 1 WCAG AA: コントラスト違反 - 0 WCAG A違反 ``` ## 統合 - `/benchmark`とペアリングしてパフォーマンス確認 - `/canary-watch`とペアリングしてデプロイ後の監視を自動化 - PullRequestワークフローに組み込んでフロントエンドPRをキャッチ