Saltar al contenido
Marketplace

browser-qa

de affaan-m

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

Resumen

SKILL.mdLeída en ef648e0

ブラウザ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. スクリーンリーダーランドマークをチェック

出力形式

## QA Report — [URL] — [timestamp]

### Smoke Test
- ✓ ページが読み込まれる
- ✗ コンソールエラー:オプト不可なトラッキング警告
- ✓ Core Web Vitals OK
- [スクリーンショット]

### 相互作用テスト
- ✓ ナビゲーション機能
- ✓ フォーム検証
- ✗ モバイルメニューが開かない

### ビジュアル回帰
- ✓ デスクトップレイアウト
- ✗ モバイルで画像がオーバーフロー

### アクセシビリティ
- 1 WCAG AA: コントラスト違反
- 0 WCAG A違反

統合

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

Archivos 1 archivo

Instálala a mano

Deska ejecuta esto por ti, para cada agente que elijas. Para ejecutarlo tú en una terminal:

npx skills add affaan-m/ecc --skill browser-qa

Más de affaan-m

  • docker-patternsaffaan-mDocker and Docker Compose patterns for local development, container security, networking, volume strategies, and multi-service orchestration. Use when setting up containerized development environments or reviewing Docker configurations.4,800 instalaciones en skills.sh0
  • security-reviewaffaan-mUse this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist and patterns.4,800 instalaciones en skills.sh0
  • backend-patternsaffaan-mBackend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access.4,700 instalaciones en skills.sh0
  • frontend-patternsaffaan-mFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.4,700 instalaciones en skills.sh0
  • coding-standardsaffaan-mBaseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns. Use when reviewing code quality or naming with no framework-specific skill that applies.4,500 instalaciones en skills.sh0
Todas las skills de affaan-m