qa

name	qa
description	Browser QA — automation, accessibility audit, user flow verification

Run QA testing on the target application with browser automation, accessibility audit, and user flow verification.

Target: the task/scope the user described when invoking this skill (if none given, ask or infer from context)

Phase 1: Environment Setup

1. Check Playwright: npx playwright --version.
2. If not installed:
   • If the target is already a Node project with playwright in devDependencies: install in place (npm install && npx playwright install chromium).
   • Otherwise (non-Node repo, or Playwright absent): install into a scratch directory to avoid polluting the target — never run npm init inside it:

     mkdir -p ~/.cache/claude-qa-playwright
     ( cd ~/.cache/claude-qa-playwright && npm install playwright && npx playwright install chromium )
     

     Then invoke Playwright via that path (e.g. NODE_PATH=~/.cache/claude-qa-playwright/node_modules node script.js, or run the script from within that directory).
3. Identify the test target:
   • URL in the task/scope the user described when invoking this skill (if none given, ask or infer from context) → use directly.
   • No URL → check dev server config (package.json scripts, .env) and start it (npm run dev, npm start, bun dev). Wait until ready.

Phase 2: Smoke Test

Navigate to the URL. Take full-page screenshots at 3 viewports (375px, 768px, 1280px). Report console errors, broken images, layout issues. Register console/pageerror listeners before navigation.

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  const errors = [];
  page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
  page.on('pageerror', e => errors.push(e.message));
  for (const w of [375, 768, 1280]) {
    await page.setViewportSize({ width: w, height: 900 });
    await page.goto('URL_HERE', { waitUntil: 'networkidle' });
    await page.screenshot({ path: `/tmp/qa-${w}.png`, fullPage: true });
  }
  // Accessibility audit (axe-core)
  await page.addScriptTag({ :  });
   a11y =  page.( () =>  axe.());
  .(.({ errors, : a11y. }, , ));
   browser.();
})();

Phase 3: User Flow Testing

Based on app type, test critical flows sequentially:

• Auth: signup → login → logout → password reset
• Dashboard: navigation → data loading → filters → export
• E-commerce: browse → add to cart → checkout
• Form: fill → validate → submit → success/error states
• API: endpoint responses → error handling → loading states

Phase 4: Accessibility Audit

Run WCAG AA checks (axe-core as above): contrast ratios, form labels, alt text, keyboard navigation, focus indicators, semantic HTML.

Phase 5: Report & Fix

## QA Report: [target]
### Summary
- Pages tested: N · Viewports: 375/768/1280 · Findings: N (Blocker/Major/Minor)
- Accessibility violations: N
### Blocker (must fix before ship)   [findings + screenshot paths]
### Major (should fix)               [findings + screenshots]
### Minor (nice to have)             [findings]
### Accessibility                    [WCAG violations + remediation]
### Verdict: PASS / FAIL

If BLOCKER or MAJOR issues found: present findings with screenshots, ask "Fix these automatically?", and if yes → fix code → re-run affected tests → verify.

Rules

• Always test at minimum 3 viewports. Screenshot every finding as evidence. Never skip the accessibility audit.
• If you started the dev server, kill its process after testing.
• Don't modify test config files unless asked.