UX testing: Playwright E2E, axe-core a11y, visual regression. Use when setting up E2E testing, screenshot assertions, browser automation, or a11y CI workflows.
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.
