# Playwright UI Testing

> Master index for all UI testing skills. Lists available test suites and their coverage.

- Skill: `az9713/playwright-ui-testing` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add az9713/playwright-ui-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/az9713/playwright-ui-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: az9713 (https://skillmd.com/u/az9713)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/az9713/playwright-ui-testing

---


# UI Testing Suite

Comprehensive UI testing powered by Playwright CLI with parallel subagent execution.

## Available Test Skills

### Category A: UI Functional Testing

| Skill | Command | Test Cases | Description |
|-------|---------|------------|-------------|
| Form Testing | `/test-forms <url>` | 27 | Form validation, input handling, submit states |
| Accessibility | `/test-a11y <url>` | 40 | WCAG 2.1 AA+ compliance testing |
| Responsive | `/test-responsive <url>` | 72 | Multi-viewport responsive design testing |
| User Flows | `/test-flows <url>` | 30 | Authentication, navigation, SPA behavior |
| Cross-Browser | `/test-cross-browser <url>` | 30 | Chromium, Firefox, WebKit consistency |
| Security | `/test-security <url>` | 55 | OWASP+ vulnerability detection |
| Performance | `/test-perf <url>` | 25 | Core Web Vitals, runtime performance |
| SEO | `/test-seo <url>` | 27 | Meta tags, structured data, crawlability |
| UI States | `/test-states <url>` | 35 | Loading, empty, error, overlay states |
| Links | `/test-links <url>` | 23 | Link integrity, broken links, semantics |
| Regression | `/test-regression <url>` | 8 | Baseline comparison, structural diff |
| Test Generate | `/test-generate` | — | Generate project-specific Playwright test files |

### Category B: UX Design Quality

| Skill | Command | Test Cases | Description |
|-------|---------|------------|-------------|
| Heatmap | `/test-heatmap <url>` | 24 | Attention prediction, visual hierarchy |
| UX Writing | `/test-ux-writing <url>` | 26 | Micro-copy quality, CTA effectiveness |
| Consistency | `/test-consistency <url>` | 30 | Design system consistency audit |
| Conversion | `/test-conversion <url>` | 30 | Conversion optimization, cognitive load |

### Orchestrator

| Skill | Command | Description |
|-------|---------|-------------|
| Full Suite | `/test-all <url>` | Runs all 16 skills in phased parallel execution (~482+ test cases) |

## What's New (v1.1)

Inspired by [Claude Code + Playwright: Test Any App in 10 Mins for $0](https://www.youtube.com/watch?v=O4_0IaIZKFI&t=15s) by Scheffel:

- **Fix Loop** — When tests fail, automatically retries up to 3 times, categorizing failures as test bugs vs app bugs. Applied to all 14 individual test skills. See `references/fix-loop.md`.
- **Prerequisites Check** — Auto-installs Playwright, browser binaries, and axe-core if missing. See `references/prerequisites.md`.
- **Headed Mode** — Pass `--headed` to any skill to see browser windows during testing.
- **Test Generation** — `/test-generate` reads your codebase and generates project-specific `.spec.ts` files that run via `npx playwright test` at zero token cost.

### Flags

| Flag | Effect |
|------|--------|
| `--headed` | Show browser windows during testing |
| `--skip-prereqs` | Skip environment prerequisite checks |
| `--baseline` | Capture regression baseline (test-regression only) |

### Future Features

- **`playwright.config.ts` Generation** — Standalone config file generator (currently part of `/test-generate` Phase 4)
- **Test File Persistence (`--persist`)** — Save generated tests into `tests/e2e/` as permanent project regression suite

## Output

All results are saved to `test-results/<skill-name>/<timestamp>/`:
- `report.md` — Test results with pass/fail, severity, fix suggestions
- `screenshots/` — Visual evidence
- `snapshots/` — Accessibility tree captures
- `traces/` — Playwright execution traces
- `videos/` — Recorded flows (when applicable)

## Shared References

- [Common Setup](references/common-setup.md) — URL parsing, session naming, output dirs
- [Evidence Capture](references/evidence-capture.md) — Tracing, screenshots, snapshots
- [Report Format](references/report-format.md) — Standard report template, severity ratings
- [Prerequisites](references/prerequisites.md) — Environment verification, auto-install
- [Fix Loop](references/fix-loop.md) — Automated test repair process