browser-qa

What this skill does

When applied, it prepends a system prompt before your request is sent — no extra calls and no change to how you are billed beyond the added tokens.

---
name: browser-qa
description: このスキルを使用して、機能をデプロイ後にブラウザ自動化を使用した自動ビジュアルテストとUI相互作用検証を自動化します。
origin: ECC
---

# ブラウザ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をキャッチ

Use this skill

{
  "model": "gpt-4o-mini",
  "skill": "imp-803766c0-33ab-4b62-911c-1c547f058594",
  "messages": [{ "role": "user", "content": "…" }]
}

More skills