Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From ecc
Automates visual testing, UI interactions, accessibility audits, and performance checks on deployed web apps using browser automation like Playwright or Puppeteer.
npx claudepluginhub aaione/everything-claude-code-zh --plugin everything-claude-codeHow this skill is triggered — by the user, by Claude, or both
Slash command
/ecc:browser-qaThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- After deploying a feature to staging/preview
Automates QA on staging/preview web apps: smoke tests, interactions, visual regression, accessibility audits via Playwright/Puppeteer/Chrome. Use post-deploy or PR reviews.
Run real browser QA with Playwright on web apps: checks page health, console/network errors, layout/responsiveness, interactions, navigation, data display; generates reports. Use for frontend feature tests, pre-PR UI verification, post-deploy smoke tests, visual bug investigations.
Playwright browser automation: navigates URLs, captures screenshots and accessibility snapshots, interacts with UI elements (click, type, fill form), and reports findings with visual evidence.
Share bugs, ideas, or general feedback.
Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.
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
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
5. Test critical user journeys (checkout, onboarding, search)
1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against baseline screenshots (if stored)
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable
1. Run axe-core or equivalent on each page
2. Flag WCAG AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks
## 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)
Works with any browser MCP:
mChild__claude-in-chrome__* tools (preferred — uses your actual Chrome)mcp__browserbase__*Pair with /canary-watch for post-deploy monitoring.