Browser Qa

作者 affaan-mef648e01899b無授權條款275K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 天前更新

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

僅含說明Software Development

AI 產生的概覽

自動化部署後的瀏覽器 QA：冒煙測試、UI 互動檢查、視覺回歸與無障礙稽核。

功能: 引導代理透過瀏覽器自動化對線上或預覽頁面執行四個階段：冒煙測試（主控台錯誤、4xx/5xx 請求、螢幕截圖、Core Web Vitals）、互動測試（導覽連結、表單送出、驗證流程、關鍵使用者旅程）、三個斷點的視覺回歸，以及使用 axe-core 或同類工具的無障礙檢查。它會產出結構化的 Markdown QA 報告，包含通過/失敗項目、標記的問題與螢幕截圖。也建議與 benchmark、canary-watch 及拉取請求工作流程搭配使用。
適用情境: 適用於將功能部署到預備或預覽環境後、需要驗證整頁 UI 行為時、出貨前確認版面、表單與互動正常時、審查前端拉取請求時，以及進行無障礙與響應式測試時。
執行需求: 需要瀏覽器自動化 MCP（例如 claude-in-chrome、Playwright 或 Puppeteer），並能連線至目標 URL 的網路。無障礙檢查需要 axe-core 或同類工具。僅為說明文件，不附帶指令碼。

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

來源與署名

來源：affaan-m/ecc位於docs/ja-JP/skills/browser-qa提交ef648e0

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Browser Qa

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

使用時期

動作方法

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

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

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

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

出力形式

統合

來源與署名

更多來自 affaan-m/ecc 的技能

Vue Patterns

Uncloud

Team Agent Orchestration

Tasteforge Video

Taste

Social Publisher

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices