Communitygithub.com

ブラウザQA — 自動ビジュアルテスト＆インタラクション

デプロイ後のUI検証をブラウザ自動化MCP（claude-in-chrome、Playwright、Puppeteer）で実行します。コンソールエラーやCore Web Vitalsのスモークチェック、フォームや認証フローのインタラクションテスト、3つのブレークポイントでのスクリーンショットビジュアルリグレッション、axe-coreアクセシビリティ監査を実施し、最終的にSHIP / DO-NOT-SHIPの判定を出力します。

ブラウザQA — 自動ビジュアルテスト＆インタラクションとは？

このスキルは、デプロイ後のUI検証をブラウザ自動化MCPを用いて自動実行するためのツールです。主にstaging環境やプレビュー環境にフィーチャーをデプロイした後、フロントエンドの変更を本番適用する前、フロントエンドPRのレビュー時、またはレスポンシブレイアウトとアクセシビリティを確認したい場合に使用します。4つのフェーズで構成されており、Phase 1ではコンソールエラーやネットワークリクエストの異常、Core Web Vitals（LCP・CLS・INP）をチェックするスモークテストを実施します。Phase 2ではナビゲーションリンクの動作確認、フォーム送信の正常系・異常系テスト、認証フロー、重要なユーザージャーニーをテストします。Phase 3では3つのブレークポイント（375px、768px、1440px）でスクリーンショットを取得し、ベースライン画像と比較してビジュアルリグレッションを検出します。Phase 4ではaxe-coreを用いてWCAG 2.2 AA基準のアクセシビリティ違反をチェックします。対応するブラウザ自動化MCPはclaude-in-chrome（推奨）、Playwright（Browserbase経由）、Puppeteerです。出力形式はマークダウンレポートで、各フェーズの結果と最終的な出荷判定（SHIP / SHIP WITH FIXES / DO NOT SHIP）を含みます。

対応✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/rhpxgr8pzm-max/claude-skills/tree/HEAD/plugins/tally-dev/skills/browser-qa

オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ChatGPT Claude Gemini Grok Perplexity DeepSeek

ドキュメント

ブラウザQA — 自動ビジュアルテスト＆インタラクションは何をしますか？

使用タイミング

staging/preview環境にフィーチャーをデプロイした後
ページ間のUI動作を確認する必要がある場合
出荷前にレイアウト、フォーム、インタラクションが実際に動作することを確認する
フロントエンドコードに変更を加えるPRをレビューするとき
アクセシビリティ監査やレスポンシブテストを行うとき

動作の仕組み

ブラウザ自動化MCP（claude-in-chrome、Playwright、Puppeteer）を使用して、実際のユーザーと同じようにライブページとインタラクションします。

安全第一 — 爆発半径（デフォルトは読み取り専用）

Browser QAは実際の認証と実際のユーザージャーニーを操作するため、爆発半径を明示的に扱います。デフォルトは読み取り専用：本番URLに対して変更を伴うジャーニー（チェックアウト、支払い、削除、大量更新）を決して実行しないでください — 明示的なオプトインかつ staging/preview URLが必要です。シードされたテスト用認証情報を使用し、実際の本番ログインは決して使用せず、スクリーンショットを保存する前に認証情報/トークン/PIIを必ずマスクしてください。

フェーズ1: スモークテスト

1. ターゲットURLに移動
2. コンソールエラーをチェック（ノイズを除外：アナリティクス、サードパーティ）
3. ネットワークリクエストに4xx/5xxがないことを確認
4. デスクトップ + モバイルビューポートでファーストビューをスクリーンショット
5. Core Web Vitalsをチェック: LCP < 2.5s、CLS < 0.1、INP < 200ms
   （INPは2024年3月にFIDを置き換えました。閾値はweb.devを参照）

フェーズ2: インタラクションテスト

1. すべてのナビゲーションリンクをクリック — デッドリンクがないことを確認
2. 有効なデータでフォームを送信 — 成功状態を確認
3. 無効なデータでフォームを送信 — エラー状態を確認
4. 認証フローをテスト: ログイン → 保護ページ → ログアウト（テスト認証情報のみ、本番は不可）
5. 重要なユーザージャーニーをテスト（チェックアウト、オンボーディング、検索）
   — デフォルトは読み取り専用。変更を伴うジャーニーは staging に対してのみ
     明示的なオプトインのもとで実行（上記「安全第一」を参照）

フェーズ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件）
# 判定 ∈ SHIP / SHIP WITH FIXES / DO NOT SHIP。ビジュアルベースラインがない場合は INCONCLUSIVE を使用

連携

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

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

デプロイ後監視のために /canary-watch と組み合わせて使用。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

rhpxgr8pzm-max/claude-skills

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support.

rhpxgr8pzm-max/claude-skills

Capture architectural decisions as numbered ADR markdown files in docs/adr/ with context, alternatives considered, consequences, and an index README. Use when the user says 'record this decision' or 'ADR this', chooses between frameworks or databases, discusses trade-offs, or asks why the codebase is shaped this way.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".