browser-qa

Use it when:: A feature just reached staging or preview, or a frontend PR needs checking before it ships.
It does:: Drives the pages through Claude in Chrome, Playwright or Puppeteer in four phases: smoke test, interactions, visual regression and accessibility.
You get:: A QA report ending in SHIP, SHIP WITH FIXES or DO NOT SHIP, or INCONCLUSIVE when there are no baseline screenshots.
Stays:: Read-only by default: no checkout, payment or delete journeys on production, test credentials only, and secrets redacted from screenshots.
Needs:: A browser automation MCP, and committed baseline screenshots for the visual comparison.

TL;DR

ECC's browser QA has the agent use a live site the way a user would. The smoke test loads the page, filters analytics noise out of the console, checks for 4xx and 5xx responses, takes desktop and mobile screenshots and measures LCP, CLS and INP against web.dev thresholds. Interaction tests click every nav link, submit forms with valid and invalid data, log in, open a protected page and log out with test credentials, and walk critical journeys. Visual regression screenshots key pages at 375, 768 and 1440 pixels, compares them with committed baselines, flags layout shifts over 5 pixels, missing elements and overflow, and checks dark mode. The accessibility phase runs axe-core or similar for WCAG 2.2 AA violations and checks keyboard navigation and landmarks, with a reminder that automated checks cover only 30 to 40 percent of WCAG, so a clean run doesn't make a page accessible. Journeys that change data, such as checkout or deletion, run only on staging and only when you opt in.

Summarizes the skill at d2ef268.

npx skills add https://github.com/affaan-m/ecc --skill browser-qa

skills.sh page Source on GitHub All skills from affaan-m/ecc

Total Downloads: 6,000 on skills.sh, Nov 9, 2026
Repo stars: 299,776 affaan-m/ecc
First seen: May 19, 2026 on skills.sh

Weekly Downloads

503

+79% over the 8 weeks to Nov 9

Weekly values

Week to	Installs
Sep 21	281
Sep 28	183
Oct 5	172
Oct 12	254
Oct 19	457
Oct 26	461
Nov 2	522
Nov 9	503

Category	category:debugging category:browser category:software-engineering Find root causes, review code and test what you built. Drive browsers, scrape pages and search the web. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills.
Type	type:workflow A multi-step process the agent follows: interview, debug, run a TDD loop, review.
Effect	effect:remote Its own steps change something outside your machine: post, send, deploy, provision, file issues, drive a website, or upload data to a service.
Needs	needs:mcp needs:browser Needs an MCP server connected. Drives a real Chromium or Chrome browser.
Publisher	by:community Everyone else. Unverified vendor claims default to community.
Topics	testing browser-automation verification accessibility performance
Stack	stack:playwright stack:puppeteer

SKILL.md

From affaan-m/ecc at d2ef268. Checked daily, last changed Nov 6, 2026.

Frontmatter

name: browser-qa
description: "Run automated post-deploy UI verification with a browser automation MCP (claude-in-chrome, Playwright, or Puppeteer): console-error and Core Web Vitals smoke checks, form and auth-flow interaction tests, screenshot visual regression across three breakpoints, and axe-core accessibility audits ending in a SHIP / DO-NOT-SHIP verdict. Use when testing a deployed feature on staging or preview, before shipping frontend changes, reviewing a frontend PR, or checking responsive layout and accessibility."
metadata:
  origin: ECC

Browser QA — Automated Visual Testing & Interaction

When to Use

After deploying a feature to staging/preview
When you need to verify UI behavior across pages
Before shipping — confirm layouts, forms, interactions actually work
When reviewing PRs that touch frontend code
Accessibility audits and responsive testing

How It Works

Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.

Safety first — blast radius (run read-only by default)

Browser QA drives real auth and real user journeys, so treat the blast radius explicitly. Default to read-only: never run a mutating journey (checkout, payment, delete, mass-update) against a production URL — require an explicit opt-in and a staging/preview URL. Use seeded test credentials, never real production logins, and redact credentials/tokens/PII before saving any screenshot.

Phase 1: Smoke Test

1. Navigate to target URL
2. Check for console errors (filter noise: analytics, third-party)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold on desktop + mobile viewport
5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
   (INP replaced FID in March 2024; thresholds per web.dev)

Phase 2: Interaction Test

1. Click every nav link — verify no dead links
2. Submit forms with valid data — verify success state
3. Submit forms with invalid data — verify error state
4. Test auth flow: login → protected page → logout (test creds only, never prod)
5. Test critical user journeys (checkout, onboarding, search)
   — read-only by default; only exercise mutating journeys against staging
     with explicit opt-in (see "Safety first" above)

Phase 3: Visual Regression

1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against committed baseline screenshots
   — no baseline ⇒ report INCONCLUSIVE, never a silent PASS
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable

Phase 4: Accessibility

1. Run axe-core or equivalent on each page
2. Flag WCAG 2.2 AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks

Note: axe-core automatically covers roughly 30–40% of WCAG. A clean run is necessary, not sufficient — keyboard nav, focus order, and a screen-reader pass still need a manual check. Don't report "accessible" from an automated pass alone.

Output Format

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

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Network: all 200/304, no failures
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: missing error state for invalid email
- [✓] Auth flow: login/logout working

### Visual
- [✗] Hero section overflows on 375px viewport
- [✓] Dark mode: all pages consistent

### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)
# verdict ∈ SHIP / SHIP WITH FIXES / DO NOT SHIP; use INCONCLUSIVE if no visual baseline

Integration

Works with any browser MCP:

mChild__claude-in-chrome__* tools (preferred — uses your actual Chrome)
Playwright via mcp__browserbase__*
Direct Puppeteer scripts

Pair with /canary-watch for post-deploy monitoring.