Browser Qa
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of browser-qa by affaan-m - installs and ranking accrue to the original listing.
browser-qa is an ECC agent skill that automates browser-based visual and interaction testing on live staging or preview URLs for developers who need pre-merge UI verification including console errors and Core Web Vitals.
About
browser-qa is an agent skill from affaan-m/ecc (Everything Claude Code) that automates visual testing and UI interaction verification using browser automation MCP tools such as claude-in-chrome, Playwright, or Puppeteer. Phase 1 smoke tests navigate target URLs, filter console noise, check for 4xx/5xx network errors, capture desktop and mobile screenshots, and validate Core Web Vitals thresholds (LCP under 2.5s, CLS under 0.1, INP under 200ms). Phase 2 interaction tests click navigation links, submit forms with valid and invalid data, and verify error states. Developers reach for browser-qa after deploying to staging or preview, when reviewing frontend PRs, or before shipping to confirm layouts, forms, and interactions actually work in a real browser.
- Automates visual testing and UI interaction verification using browser automation
- Runs read-only smoke tests by default with explicit opt-in for any mutating journeys
- Checks console errors, network status, screenshots across desktop and mobile viewports
- Validates Core Web Vitals including LCP < 2.5s, CLS < 0.1, and INP < 200ms
- Supports accessibility audits and responsive testing across multiple pages
Browser Qa by the numbers
- 1,439 all-time installs (skills.sh)
- +87 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill browser-qaAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.4k |
|---|---|
| repo stars | ★ 238k |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
How do you automate browser QA on staging preview URLs?
Automatically verify UI layouts, interactions, console errors, and Core Web Vitals on live preview or staging URLs before merging or releasing changes.
Who is it for?
Frontend developers verifying staging or preview deployments before merge with automated layout, interaction, and performance checks.
Skip if: Backend-only changes with no UI impact or teams without browser automation MCP access on preview environments.
When should I use this skill?
The user deploys to staging, reviews a frontend PR, or asks to verify UI, console errors, or Core Web Vitals before shipping.
What you get
Smoke test screenshots, console error reports, network failure logs, Core Web Vitals measurements, and interaction test results for desktop and mobile viewports.
- viewport screenshots
- console error report
- Core Web Vitals measurements
By the numbers
- Core Web Vitals thresholds: LCP under 2.5s, CLS under 0.1, INP under 200ms
- Two test phases: smoke tests and interaction tests in skill workflow
Files
ブラウザ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をキャッチ
Related skills
TddFollow test-driven development with a strict red-green-refactor loop when creating reliable features or fixing bugs.544k196k
Test Driven DevelopmentEnforce writing failing tests before any production implementation code.181k264kQaRun conversational QA sessions that turn user-reported bugs into well-written, domain-aware GitHub issues without manual ticket writing.179k196kMigrate To ShoehornAutomatically update TypeScript test files that rely on unsafe `as` type assertions by replacing them with type-safe partial objects from @total-typescript/shoehorn.164k196k
Webapp TestingVerify frontend behavior, debug UI issues, capture screenshots, and inspect logs of a running local web application using Playwright.123k165k
Playwright CliRun browser automation, generate element snapshots, inspect DOM attributes, and execute Playwright tests from the terminal.102k12.3kHow it compares
Use browser-qa over unit-test skills when the verification target is a live staging URL with real browser rendering, not isolated function logic.
FAQ
What Core Web Vitals thresholds does browser-qa check?
browser-qa checks Core Web Vitals against LCP under 2.5 seconds, CLS under 0.1, and INP under 200 milliseconds during Phase 1 smoke tests. It also captures desktop and mobile screenshots and filters console noise from analytics and third-party scripts.
Which browser automation tools does browser-qa support?
browser-qa uses browser automation MCP tooling including claude-in-chrome, Playwright, or Puppeteer to interact with live pages like a real user. Phase 2 runs interaction tests on navigation links and form submissions with both valid and invalid data.