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