browser-qa

name	browser-qa
description	Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.
origin	ECC

Browser QA — 自動ビジュアルテストとインタラクション検証

使用タイミング

• ステージング/プレビューに機能をデプロイした後
• 複数ページにわたる UI の動作を検証する必要がある場合
• リリース前にレイアウト、フォーム、インタラクションが実際に動作するか確認する場合
• フロントエンドコードに関わる PR をレビューする場合
• アクセシビリティ監査とレスポンシブテスト

仕組み

ブラウザ自動化 MCP（claude-in-chrome、Playwright、または Puppeteer）を使用して、実際のユーザーのようにライブページを操作します。

フェーズ 1: Smoke Test

1. ターゲット URL に遷移
2. コンソールエラーをチェック（アナリティクス、サードパーティのノイズをフィルタリング）
3. ネットワークリクエストに 4xx/5xx がないか検証
4. デスクトップ＋モバイルビューポートでファーストビューをスクリーンショット
5. Core Web Vitals をチェック: LCP < 2.5s、CLS < 0.1、INP < 200ms

フェーズ 2: Interaction Test

1. すべてのナビゲーションリンクをクリック — デッドリンクがないか検証
2. 有効なデータでフォームを送信 — 成功状態を検証
3. 無効なデータでフォームを送信 — エラー状態を検証
4. 認証フローをテスト: ログイン → 保護ページ → ログアウト
5. 重要なユーザージャーニーをテスト（決済、オンボーディング、検索）

フェーズ 3: Visual Regression

1. 主要ページを3つのブレークポイント（375px、768px、1440px）でスクリーンショット
2. ベースラインスクリーンショット（保存済みの場合）と比較
3. 5px以上のレイアウトシフト、欠落要素、オーバーフローをフラグ
4. 該当する場合はダークモードもチェック

フェーズ 4: Accessibility

1. 各ページで axe-core または同等のツールを実行
2. WCAG AA 違反をフラグ（コントラスト、ラベル、フォーカス順序）
3. キーボードナビゲーションがエンドツーエンドで動作するか検証
4. スクリーンリーダーのランドマークをチェック

出力 Format

## QA Report — [URL] — [timestamp]

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Network: all 200/304, no failures
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: missing error state for invalid email
- [✓] Auth flow: login/logout working

### Visual
- [✗] Hero section overflows on 375px viewport
- [✓] Dark mode: all pages consistent

### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

統合

任意のブラウザ MCP で動作します:

• mChild__claude-in-chrome__* ツール（推奨 — 実際の Chrome を使用）
• Playwright（mcp__browserbase__* 経由）
• 直接 Puppeteer スクリプト

デプロイ後のモニタリングには /canary-watch と組み合わせてください。