playwright-ui-testing

name	playwright-ui-testing
description	Master index for all UI testing skills. Lists available test suites and their coverage.

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 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 — URL parsing, session naming, output dirs
• Evidence Capture — Tracing, screenshots, snapshots
• Report Format — Standard report template, severity ratings
• Prerequisites — Environment verification, auto-install
• Fix Loop — Automated test repair process