Generated note: shared plugin assets for this package live at the plugin root. Common local references were rewritten when they appeared in backticks or markdown links.
Playwright Pro
Production-grade Playwright testing toolkit for AI coding agents.
Available Commands
When installed as a Claude Code plugin, these are available as /pw: commands:
| Command |
What it does |
/pw:init |
Set up Playwright — detects framework, generates config, CI, first test |
/pw:generate <spec> |
Generate tests from user story, URL, or component |
/pw:review |
Review tests for anti-patterns and coverage gaps |
/pw:fix <test> |
Diagnose and fix failing or flaky tests |
/pw:migrate |
Migrate from Cypress or Selenium to Playwright |
/pw:coverage |
Analyze what's tested vs. what's missing |
/pw:testrail |
Sync with TestRail — read cases, push results |
/pw:browserstack |
Run on BrowserStack, pull cross-browser reports |
/pw:report |
Generate test report in your preferred format |
Quick Start Workflow
The recommended sequence for most projects:
1. /pw:init → scaffolds config, CI pipeline, and a first smoke test
2. /pw:generate → generates tests from your spec or URL
3. /pw:review → validates quality and flags anti-patterns ← always run after generate
4. /pw:fix <test> → diagnoses and repairs any failing/flaky tests ← run when CI turns red
Validation checkpoints:
- After
/pw:generate — always run /pw:review before committing; it catches locator anti-patterns and missing assertions automatically.
- After
/pw:fix — re-run the full suite locally (npx playwright test) to confirm the fix doesn't introduce regressions.
- After
/pw:migrate — run /pw:coverage to confirm parity with the old suite before decommissioning Cypress/Selenium tests.
Example: Generate → Review → Fix
# 1. Generate tests from a user story
/pw:generate "As a user I can log in with email and password"
# Generated: tests/auth/login.spec.ts
# → Playwright Pro creates the file using the auth template.
# 2. Review the generated tests
/pw:review tests/auth/login.spec.ts
# → Flags: one test used page.locator('input[type=password]') — suggests getByLabel('Password')
# → Fix applied automatically.
# 3. Run locally to confirm
npx playwright test tests/auth/login.spec.ts --headed
# 4. If a test is flaky in CI, diagnose it
/pw:fix tests/auth/login.spec.ts
# → Identifies missing web-first assertion; replaces waitForTimeout(2000) with expect(locator).toBeVisible()
Golden Rules
getByRole() over CSS/XPath — resilient to markup changes- Never
page.waitForTimeout() — use web-first assertions
expect(locator) auto-retries; expect(await locator.textContent()) does not- Isolate every test — no shared state between tests
baseURL in config — zero hardcoded URLs- Retries:
2 in CI, 0 locally
- Traces:
'on-first-retry' — rich debugging without slowdown
- Fixtures over globals —
test.extend() for shared state
- One behavior per test — multiple related assertions are fine
- Mock external services only — never mock your own app
Locator Priority
1. getByRole() — buttons, links, headings, form elements
2. getByLabel() — form fields with labels
3. getByText() — non-interactive text
4. getByPlaceholder() — inputs with placeholder
5. getByTestId() — when no semantic option exists
6. page.locator() — CSS/XPath as last resort
What's Included
- 9 skills with detailed step-by-step instructions
- 3 specialized agents: test-architect, test-debugger, migration-planner
- 55 test templates: auth, CRUD, checkout, search, forms, dashboard, settings, onboarding, notifications, API, accessibility
- 2 MCP servers (TypeScript): TestRail and BrowserStack integrations
- Smart hooks: auto-validate test quality, auto-detect Playwright projects
- 6 reference docs: golden rules, locators, assertions, fixtures, pitfalls, flaky tests
- Migration guides: Cypress and Selenium mapping tables
Integration Setup
TestRail (Optional)
export TESTRAIL_URL="https://your-instance.testrail.io"
export TESTRAIL_USER="your@email.com"
export TESTRAIL_API_KEY="your-api-key"
BrowserStack (Optional)
export BROWSERSTACK_USERNAME="your-username"
export BROWSERSTACK_ACCESS_KEY="your-access-key"
Quick Reference
See reference/ directory for:
golden-rules.md — The 10 non-negotiable ruleslocators.md — Complete locator priority with cheat sheetassertions.md — Web-first assertions referencefixtures.md — Custom fixtures and storageState patternscommon-pitfalls.md — Top 10 mistakes and fixesflaky-tests.md — Diagnosis commands and quick fixes
See ../../templates/README.md for the full template index.
1---2name: playwright-pro-23description: Production-grade Playwright testing toolkit. Use when the user mentions Playwright tests, end-to-end testing, browser automation, fixing flaky tests, test migration, CI/CD testing, or test suites. Generate tests, fix flaky failures, migrate from Cypress/Selenium, sync with TestRail, run on BrowserStack. 55 templates, 3 agents, smart reporting.4---56> Generated note: shared plugin assets for this package live at the plugin root. Common local references were rewritten when they appeared in backticks or markdown links.78# Playwright Pro910Production-grade Playwright testing toolkit for AI coding agents.1112## Available Commands1314When installed as a Claude Code plugin, these are available as `/pw:` commands:1516| Command | What it does |17|---|---|18| `/pw:init` | Set up Playwright — detects framework, generates config, CI, first test |19| `/pw:generate <spec>` | Generate tests from user story, URL, or component |20| `/pw:review` | Review tests for anti-patterns and coverage gaps |21| `/pw:fix <test>` | Diagnose and fix failing or flaky tests |22| `/pw:migrate` | Migrate from Cypress or Selenium to Playwright |23| `/pw:coverage` | Analyze what's tested vs. what's missing |24| `/pw:testrail` | Sync with TestRail — read cases, push results |25| `/pw:browserstack` | Run on BrowserStack, pull cross-browser reports |26| `/pw:report` | Generate test report in your preferred format |2728## Quick Start Workflow2930The recommended sequence for most projects:3132```331. /pw:init → scaffolds config, CI pipeline, and a first smoke test342. /pw:generate → generates tests from your spec or URL353. /pw:review → validates quality and flags anti-patterns ← always run after generate364. /pw:fix <test> → diagnoses and repairs any failing/flaky tests ← run when CI turns red37```3839**Validation checkpoints:**40- After `/pw:generate` — always run `/pw:review` before committing; it catches locator anti-patterns and missing assertions automatically.41- After `/pw:fix` — re-run the full suite locally (`npx playwright test`) to confirm the fix doesn't introduce regressions.42- After `/pw:migrate` — run `/pw:coverage` to confirm parity with the old suite before decommissioning Cypress/Selenium tests.4344### Example: Generate → Review → Fix4546```bash47# 1. Generate tests from a user story48/pw:generate "As a user I can log in with email and password"4950# Generated: tests/auth/login.spec.ts51# → Playwright Pro creates the file using the auth template.5253# 2. Review the generated tests54/pw:review tests/auth/login.spec.ts5556# → Flags: one test used page.locator('input[type=password]') — suggests getByLabel('Password')57# → Fix applied automatically.5859# 3. Run locally to confirm60npx playwright test tests/auth/login.spec.ts --headed6162# 4. If a test is flaky in CI, diagnose it63/pw:fix tests/auth/login.spec.ts64# → Identifies missing web-first assertion; replaces waitForTimeout(2000) with expect(locator).toBeVisible()65```6667## Golden Rules68691. `getByRole()` over CSS/XPath — resilient to markup changes702. Never `page.waitForTimeout()` — use web-first assertions713. `expect(locator)` auto-retries; `expect(await locator.textContent())` does not724. Isolate every test — no shared state between tests735. `baseURL` in config — zero hardcoded URLs746. Retries: `2` in CI, `0` locally757. Traces: `'on-first-retry'` — rich debugging without slowdown768. Fixtures over globals — `test.extend()` for shared state779. One behavior per test — multiple related assertions are fine7810. Mock external services only — never mock your own app7980## Locator Priority8182```831. getByRole() — buttons, links, headings, form elements842. getByLabel() — form fields with labels853. getByText() — non-interactive text864. getByPlaceholder() — inputs with placeholder875. getByTestId() — when no semantic option exists886. page.locator() — CSS/XPath as last resort89```9091## What's Included9293- **9 skills** with detailed step-by-step instructions94- **3 specialized agents**: test-architect, test-debugger, migration-planner95- **55 test templates**: auth, CRUD, checkout, search, forms, dashboard, settings, onboarding, notifications, API, accessibility96- **2 MCP servers** (TypeScript): TestRail and BrowserStack integrations97- **Smart hooks**: auto-validate test quality, auto-detect Playwright projects98- **6 reference docs**: golden rules, locators, assertions, fixtures, pitfalls, flaky tests99- **Migration guides**: Cypress and Selenium mapping tables100101## Integration Setup102103### TestRail (Optional)104```bash105export TESTRAIL_URL="https://your-instance.testrail.io"106export TESTRAIL_USER="your@email.com"107export TESTRAIL_API_KEY="your-api-key"108```109110### BrowserStack (Optional)111```bash112export BROWSERSTACK_USERNAME="your-username"113export BROWSERSTACK_ACCESS_KEY="your-access-key"114```115116## Quick Reference117118See `reference/` directory for:119- `golden-rules.md` — The 10 non-negotiable rules120- `locators.md` — Complete locator priority with cheat sheet121- `assertions.md` — Web-first assertions reference122- `fixtures.md` — Custom fixtures and storageState patterns123- `common-pitfalls.md` — Top 10 mistakes and fixes124- `flaky-tests.md` — Diagnosis commands and quick fixes125126See `../../templates/README.md` for the full template index.
dvcrn