QA Testing (Playwright)
High-signal, cost-aware E2E testing for web applications.
Core docs:
Defaults (2026)
- Keep E2E thin: protect critical user journeys only; push coverage down (unit/integration/contract).
- Locator priority:
getByRole → getByLabel/getByText → getByTestId (fallback).
- Waiting: rely on Playwright auto-wait + web-first assertions; no sleeps/time-based waits.
- Isolation: tests must run alone, in parallel, and in any order; eliminate shared mutable state.
- Flake posture: retries are a debugging tool; treat rerun-pass as a failure signal and fix root cause.
- CI posture: smoke gate on PRs; shard/parallelize regression on schedule; always keep artifacts (trace/video/screenshot).
Quick Start
| Command |
Purpose |
npm init playwright@latest |
Initialize Playwright |
npx playwright test |
Run all tests |
npx playwright test --grep @smoke |
Run smoke tests |
npx playwright test --project=chromium |
Run a single project |
npx playwright test --ui |
Debug with UI mode |
npx playwright test --debug |
Step through a test |
npx playwright show-trace trace.zip |
Inspect trace artifacts |
npx playwright show-report |
Inspect HTML report |
When to Use
- E2E tests for web applications
- Test user authentication flows
- Verify form submissions
- Test responsive designs
- Automate browser interactions
- Set up Playwright in CI/CD
When NOT to Use
| Scenario |
Use Instead |
| Unit testing |
Jest, Vitest, pytest |
| API contracts |
qa-api-testing-contracts |
| Load testing |
k6, Locust, Artillery |
| Mobile native |
Appium |
Authoring Rules
Locator Strategy
// 1. Role locators (preferred)
await page.getByRole('button', { name: 'Sign in' }).click();
// 2. Label/text locators
await page.getByLabel('Email').fill('user@example.com');
// 3. Test IDs (fallback)
await page.getByTestId('user-avatar').click();
Flake Control
- Avoid sleeps; use Playwright auto-wait
- Use retries as signal, not a crutch
- Capture trace/screenshot/video on failure
- Prefer user-like interactions; avoid
force: true
Workflow
- Write the smallest test that proves the user outcome (intent + oracle).
- Stabilize locators and assertions before adding more steps.
- Make state explicit: seed per test/worker, clean up deterministically, mock third-party boundaries.
- In CI: shard/parallelize, capture artifacts, and fail fast on rerun-pass flakes.
Debugging Checklist
If something is flaky:
- Open trace first; identify whether it is selector ambiguity, missing wait, or state leakage.
- Replace brittle selectors with semantic locators; replace sleeps with
expect(...) or a targeted wait.
- Reduce global timeouts; add scoped timeouts only when the product truly needs it.
- If it only fails in CI, look for concurrency, cold-start, CPU starvation, and environment differences.
Do / Avoid
Make tests independent and deterministic
Use network mocking for third-party deps
Run smoke E2E on PRs; full regression on schedule
"Test everything E2E" as default
Weakening assertions to "fix" flakes
Auto-healing that weakens assertions
Execution Preflight (High ROI)
Run this preflight before expensive E2E runs to prevent avoidable failures.
Preflight Checklist
- Repository shape:
- Confirm working directory and expected app root exist.
- Verify spec paths before execution (
rg --files tests/e2e | rg <target>).
- Port/process hygiene:
- Check and clear stale dev server port before run (example:
lsof -i :3001).
- Avoid parallel local servers colliding with Playwright
webServer.
- Command validity:
- Validate CLI flags for current tool versions before batch runs.
- Prefer exact spec paths or
--grep over broad globs during triage.
- Artifact expectations:
- Confirm result artifact paths exist before reading (
test -f <error-context.md>).
- If artifact path missing, inspect latest
test-results index first.
Mandatory Sandbox/Port Decisions
Before running Playwright in constrained environments (sandboxed terminals, CI containers, shared dev hosts), decide and document:
- Bind host/port: confirm whether app server must use
127.0.0.1 or 0.0.0.0, and verify selected port is free.
- Escalation path: if bind attempts fail with
EPERM/EACCES, escalate immediately instead of retry loops.
- Long-flow timeout budget: set explicit per-test timeout for API-heavy flows (generation/checkout/report) instead of inflating global timeout.
- Build lock hygiene: clear stale
.next/lock and terminate stale build/dev PIDs before rerun.
Triage Sequence (Fastest Signal)
- Reproduce one failing test with
--workers=1.
- Capture trace/video/screenshot for that single failure.
- Fix determinism root cause.
- Re-run targeted suite.
- Only then run broad regression.
Failure Patterns to Treat as Environment, Not Product Bugs
EADDRINUSE on Playwright web server port
- Missing spec/result paths from stale assumptions
- Shell glob expansion failures for bracketed route segments
Resources
| Resource |
Purpose |
| references/playwright-mcp.md |
MCP & AI testing |
| references/playwright-patterns.md |
Advanced patterns |
| references/playwright-ci.md |
CI configurations |
| references/playwright-authentication.md |
Auth patterns and session management |
| references/visual-regression-testing.md |
Visual regression strategies |
| references/api-testing-playwright.md |
API testing with APIRequestContext |
| references/playwright-preflight-sandbox.md |
Sandbox/port preflight and escalation decisions |
| data/sources.json |
Documentation links |
Templates
| Template |
Purpose |
| assets/template-playwright-e2e-review-checklist.md |
E2E review checklist |
| assets/template-playwright-fail-on-flaky-reporter.js |
Fail CI on rerun-pass flakes |
| assets/template-playwright-preflight-checklist.md |
Preflight checklist for port/sandbox/timeouts |
Related Skills
Fact-Checking
- Use web search/web fetch to verify current external facts, versions, pricing, deadlines, regulations, or platform behavior before final answers.
- Prefer primary sources; report source links and dates for volatile information.
- If web access is unavailable, state the limitation and mark guidance as unverified.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: qa-testing-playwright3description: E2E web testing with Playwright. Use when writing tests, debugging flakes, or setting up CI with selectors, sharding, and network mocking. Use when this capability is needed.4---56# QA Testing (Playwright)78High-signal, cost-aware E2E testing for web applications.910Core docs:11- https://playwright.dev/docs/best-practices12- https://playwright.dev/docs/locators13- https://playwright.dev/docs/test-retries14- https://playwright.dev/docs/trace-viewer15- https://playwright.dev/docs/test-sharding16- https://playwright.dev/docs/ci1718## Defaults (2026)1920- Keep E2E thin: protect critical user journeys only; push coverage down (unit/integration/contract).21- Locator priority: `getByRole` → `getByLabel`/`getByText` → `getByTestId` (fallback).22- Waiting: rely on Playwright auto-wait + web-first assertions; no sleeps/time-based waits.23- Isolation: tests must run alone, in parallel, and in any order; eliminate shared mutable state.24- Flake posture: retries are a debugging tool; treat rerun-pass as a failure signal and fix root cause.25- CI posture: smoke gate on PRs; shard/parallelize regression on schedule; always keep artifacts (trace/video/screenshot).2627## Quick Start2829| Command | Purpose |30|---------|---------|31| `npm init playwright@latest` | Initialize Playwright |32| `npx playwright test` | Run all tests |33| `npx playwright test --grep @smoke` | Run smoke tests |34| `npx playwright test --project=chromium` | Run a single project |35| `npx playwright test --ui` | Debug with UI mode |36| `npx playwright test --debug` | Step through a test |37| `npx playwright show-trace trace.zip` | Inspect trace artifacts |38| `npx playwright show-report` | Inspect HTML report |3940## When to Use4142- E2E tests for web applications43- Test user authentication flows44- Verify form submissions45- Test responsive designs46- Automate browser interactions47- Set up Playwright in CI/CD4849## When NOT to Use5051| Scenario | Use Instead |52|----------|-------------|53| Unit testing | Jest, Vitest, pytest |54| API contracts | [qa-api-testing-contracts](../qa-api-testing-contracts/SKILL.md) |55| Load testing | k6, Locust, Artillery |56| Mobile native | Appium |5758## Authoring Rules5960### Locator Strategy6162```typescript63// 1. Role locators (preferred)64await page.getByRole('button', { name: 'Sign in' }).click();6566// 2. Label/text locators67await page.getByLabel('Email').fill('user@example.com');6869// 3. Test IDs (fallback)70await page.getByTestId('user-avatar').click();71```7273### Flake Control7475- Avoid sleeps; use Playwright auto-wait76- Use retries as signal, not a crutch77- Capture trace/screenshot/video on failure78- Prefer user-like interactions; avoid `force: true`7980## Workflow8182- Write the smallest test that proves the user outcome (intent + oracle).83- Stabilize locators and assertions before adding more steps.84- Make state explicit: seed per test/worker, clean up deterministically, mock third-party boundaries.85- In CI: shard/parallelize, capture artifacts, and fail fast on rerun-pass flakes.8687## Debugging Checklist8889If something is flaky:90- Open trace first; identify whether it is selector ambiguity, missing wait, or state leakage.91- Replace brittle selectors with semantic locators; replace sleeps with `expect(...)` or a targeted wait.92- Reduce global timeouts; add scoped timeouts only when the product truly needs it.93- If it only fails in CI, look for concurrency, cold-start, CPU starvation, and environment differences.9495## Do / Avoid9697- Make tests independent and deterministic98- Use network mocking for third-party deps99- Run smoke E2E on PRs; full regression on schedule100101- "Test everything E2E" as default102- Weakening assertions to "fix" flakes103- Auto-healing that weakens assertions104105## Execution Preflight (High ROI)106107Run this preflight before expensive E2E runs to prevent avoidable failures.108109### Preflight Checklist1101111. Repository shape:112- Confirm working directory and expected app root exist.113- Verify spec paths before execution (`rg --files tests/e2e | rg <target>`).1141152. Port/process hygiene:116- Check and clear stale dev server port before run (example: `lsof -i :3001`).117- Avoid parallel local servers colliding with Playwright `webServer`.1181193. Command validity:120- Validate CLI flags for current tool versions before batch runs.121- Prefer exact spec paths or `--grep` over broad globs during triage.1221234. Artifact expectations:124- Confirm result artifact paths exist before reading (`test -f <error-context.md>`).125- If artifact path missing, inspect latest `test-results` index first.126127### Mandatory Sandbox/Port Decisions128129Before running Playwright in constrained environments (sandboxed terminals, CI containers, shared dev hosts), decide and document:130131- Bind host/port: confirm whether app server must use `127.0.0.1` or `0.0.0.0`, and verify selected port is free.132- Escalation path: if bind attempts fail with `EPERM`/`EACCES`, escalate immediately instead of retry loops.133- Long-flow timeout budget: set explicit per-test timeout for API-heavy flows (generation/checkout/report) instead of inflating global timeout.134- Build lock hygiene: clear stale `.next/lock` and terminate stale build/dev PIDs before rerun.135136### Triage Sequence (Fastest Signal)1371381. Reproduce one failing test with `--workers=1`.1392. Capture trace/video/screenshot for that single failure.1403. Fix determinism root cause.1414. Re-run targeted suite.1425. Only then run broad regression.143144### Failure Patterns to Treat as Environment, Not Product Bugs145146- `EADDRINUSE` on Playwright web server port147- Missing spec/result paths from stale assumptions148- Shell glob expansion failures for bracketed route segments149150151## Resources152153| Resource | Purpose |154|----------|---------|155| [references/playwright-mcp.md](references/playwright-mcp.md) | MCP & AI testing |156| [references/playwright-patterns.md](references/playwright-patterns.md) | Advanced patterns |157| [references/playwright-ci.md](references/playwright-ci.md) | CI configurations |158| [references/playwright-authentication.md](references/playwright-authentication.md) | Auth patterns and session management |159| [references/visual-regression-testing.md](references/visual-regression-testing.md) | Visual regression strategies |160| [references/api-testing-playwright.md](references/api-testing-playwright.md) | API testing with APIRequestContext |161| [references/playwright-preflight-sandbox.md](references/playwright-preflight-sandbox.md) | Sandbox/port preflight and escalation decisions |162| [data/sources.json](data/sources.json) | Documentation links |163164## Templates165166| Template | Purpose |167|----------|---------|168| [assets/template-playwright-e2e-review-checklist.md](assets/template-playwright-e2e-review-checklist.md) | E2E review checklist |169| [assets/template-playwright-fail-on-flaky-reporter.js](assets/template-playwright-fail-on-flaky-reporter.js) | Fail CI on rerun-pass flakes |170| [assets/template-playwright-preflight-checklist.md](assets/template-playwright-preflight-checklist.md) | Preflight checklist for port/sandbox/timeouts |171172## Related Skills173174| Skill | Purpose |175|-------|---------|176| [qa-testing-strategy](../qa-testing-strategy/SKILL.md) | Overall test strategy |177| [software-frontend](../software-frontend/SKILL.md) | Frontend development |178| [ops-devops-platform](../ops-devops-platform/SKILL.md) | CI/CD integration |179180## Fact-Checking181182- Use web search/web fetch to verify current external facts, versions, pricing, deadlines, regulations, or platform behavior before final answers.183- Prefer primary sources; report source links and dates for volatile information.184- If web access is unavailable, state the limitation and mark guidance as unverified.185186---187> Converted and distributed by [TomeVault](https://tomevault.io/claim/vasilyu1983) — claim your Tome and manage your conversions.188<!-- tomevault:4.0:skill_md:2026-04-11 -->