UX testing: Playwright E2E, axe-core a11y, visual regression. Use when setting up E2E testing, screenshot assertions, browser automation, or a11y CI workflows.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
UX testing: Playwright E2E, axe-core a11y, visual regression. Use when setting up E2E testing, screenshot assertions, browser automation, or a11y CI workflows.
Use WebSearch or WebFetch to verify current versions.
Step 2: Detect existing UX testing infrastructure
Run the detection script to scan the project for Playwright / axe-core signals
(package.json deps + config globs), the e2e dir / __snapshots__ / e2e workflow,
and the playwright MCP-server entry:
Parse STATUS= and the ISSUES: block from the output. The KEY=VALUE lines
report PLAYWRIGHT_CONFIG, PLAYWRIGHT_DEP, AXE_CORE_DEP, E2E_DIR,
VISUAL_SNAPSHOTS, E2E_WORKFLOW, PLAYWRIGHT_MCP, and the rollup
PLAYWRIGHT_DETECTED / UX_SIGNALS_PRESENT.
Step 3: Generate compliance report
Print a formatted compliance report showing status for Playwright core, accessibility testing, visual regression, and MCP integration.
If --check-only is set, stop here.
For the compliance report format, see REFERENCE.md.
Step 4: Install dependencies (if --fix or user confirms)
# Core Playwright
bun add --dev @playwright/test
# Accessibility testing
bun add --dev @axe-core/playwright
# Install browsers
bunx playwright install
For complete example test files, see REFERENCE.md.
Step 8: Add npm scripts
Update package.json with test scripts:
{"scripts":{"test:e2e":"playwright test","test:e2e:headed":"playwright test --headed","test:e2e:debug":"playwright test --debug","test:e2e:ui":"playwright test --ui","test:a11y":"playwright test --project=a11y","test:visual":"playwright test visual.spec.ts","test:visual:update":"playwright test visual.spec.ts --update-snapshots","playwright:codegen":"playwright codegen http://localhost:3000","playwright:report":"playwright show-report"}}
Step 9: Configure browser automation (optional)
Choose the appropriate browser automation approach based on the agent's environment:
Option A: Playwright CLI (preferred when shell access is available)
Playwright CLI (@playwright/cli) is 4-10x more token-efficient than MCP for AI agent browser automation (~27K vs ~114K tokens per task). Snapshots and screenshots are saved to disk instead of injected into context.
# Global install
npm install -g @playwright/cli@latest
# Or project-local
bun add --dev @playwright/cli
This enables Claude to navigate pages, take screenshots, fill forms, click elements, and capture page snapshots via CLI commands. See the playwright-cli skill for command reference.
Option B: Playwright MCP (for sandboxed environments without shell access)
Use MCP when running in environments without shell access (Claude Desktop, browser-based agents):
Print a summary of configuration applied, scripts added, and CI/CD setup. Include next steps for starting the dev server, running tests, updating snapshots, and opening the interactive UI.
