Browser Qa

by affaan-mef648e01899bNo license275K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 3 days ago

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

Instructions onlySoftware Development

AI-generated overview

Automates post-deploy browser QA: smoke tests, UI interaction checks, visual regression and accessibility audits.

What it does: Guides an agent through browser automation of a live or preview page in four phases: smoke testing (console errors, 4xx/5xx requests, screenshots, Core Web Vitals), interaction testing (navigation links, form submission, auth flows, key user journeys), visual regression at three breakpoints, and accessibility checks with axe-core or equivalent. It produces a structured markdown QA report with pass/fail items, flagged issues and screenshots. It also suggests pairing with benchmark, canary-watch and pull-request workflows.
When to use it: Use after deploying a feature to staging or preview, when page-wide UI behavior needs verification, before shipping to confirm layout, forms and interactions work, when reviewing frontend pull requests, or for accessibility and responsive testing.
Requirements: A browser automation MCP such as claude-in-chrome, Playwright or Puppeteer, plus network access to the target URL. Accessibility checks need axe-core or an equivalent tool. Instructions only; no scripts are shipped.

ブラウザ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

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. 重要なユーザージャーニーをテスト（チェックアウト、オンボーディング、検索）

1. すべてのnavリンクをクリック — デッドリンクがないことを確認2. 有効なデータでフォームを送信 — 成功状態を確認3. 無効なデータでフォームを送信 — エラー状態を確認4. 認証フローをテスト：ログイン→保護されたページ→ログアウト5. 重要なユーザージャーニーをテスト（チェックアウト、オンボーディング、検索）

フェーズ3：ビジュアル回帰

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

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

フェーズ4：アクセシビリティ

1. 各ページでaxe-coreまたは同等のものを実行2. WCAG AAの違反にフラグを立てる（コントラスト、ラベル、フォーカス順）3. キーボードナビゲーションがエンドツーエンドで機能することを確認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違反

## QA Report — [URL] — [timestamp]
### Smoke Test- ✓ ページが読み込まれる- ✗ コンソールエラー：オプト不可なトラッキング警告- ✓ Core Web Vitals OK- [スクリーンショット]
### 相互作用テスト- ✓ ナビゲーション機能- ✓ フォーム検証- ✗ モバイルメニューが開かない
### ビジュアル回帰- ✓ デスクトップレイアウト- ✗ モバイルで画像がオーバーフロー
### アクセシビリティ- 1 WCAG AA: コントラスト違反- 0 WCAG A違反

統合

/benchmarkとペアリングしてパフォーマンス確認
/canary-watchとペアリングしてデプロイ後の監視を自動化
PullRequestワークフローに組み込んでフロントエンドPRをキャッチ

Source and attribution

Source:affaan-m/eccindocs/ja-JP/skills/browser-qaat commitef648e0

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from affaan-m/ecc

Vue Patterns

affaan-m

Reference guide for Vue 3 Composition API, component architecture, Pinia state, Vue Router, and Nuxt SSR patterns.

Software Development275Kupdated 3 days ago

Uncloud

affaan-m

Reference guide for managing Uncloud clusters with the uc CLI: deploying services, Caddy ingress, ports, scaling and logs.

DevOps & Cloud275Kupdated 3 days ago

Team Agent Orchestration

affaan-m

Coordinates multiple AI agents as a team using work items, Kanban states, branch isolation, and merge gates.

AI & Agents275Kupdated 3 days ago

Tasteforge Video

affaan-m

Use for file-driven multimodal image, video, and 3D-asset discovery; taste interviews; distill or apply workflows; style-pack validation; editable EDL/FCPXML export; provenance audits; and offline planning that must fail closed before provider generation.

Awaiting classification275Kupdated 3 days ago

Taste

affaan-m

Defines an angelcore / cloud-trance / hyperpop visual direction for music videos and short-form edits, with mood, editing grammar and a beat-mapped shot plan.

Design & Creative275Kupdated 3 days ago

Social Publisher

affaan-m

Schedules and publishes social media posts across 13 platforms through the SocialClaw workspace API.

Marketing & Sales275Kupdated 3 days ago

Browser Qa

ブラウザQA — 自動ビジュアルテストと相互作用

使用時期

動作方法

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

フェーズ2：相互作用テスト

フェーズ3：ビジュアル回帰

フェーズ4：アクセシビリティ

出力形式

統合

Source and attribution

More from affaan-m/ecc

Vue Patterns

Uncloud

Team Agent Orchestration

Tasteforge Video

Taste

Social Publisher

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Testing Strategy

Tech Debt

System Design