qa

Files (1)

• SKILL.md

SKILL.md (first lines)

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:
     ```bash
     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.

```javascript
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({ url: 'https://cdn.jsdelivr.net/npm/axe-core@latest/axe.min.js' });
  const a11y = await page.evaluate(async () => await axe.run());
  console.log(JSON.stringify({ errors, violations: a11y.violations }, null, 2));
  await browser.close();
})();
```

## 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.

From Hbin77/codex-kit, MIT.

More from Hbin77/codex-kit