Playwright Testing
This skill provides comprehensive guidance for all aspects of Playwright test development, from writing new tests to debugging and maintaining existing test suites.
Activity-Based Reference Guide
Consult these references based on what you're doing:
Writing New Tests
When to use: Creating new test files, writing test cases, implementing test scenarios
| Activity |
Reference Files |
| Writing E2E tests |
test-suite-structure.md, locators.md, assertions-waiting.md |
| Writing component tests |
component-testing.md, test-suite-structure.md |
| Writing API tests |
api-testing.md, test-suite-structure.md |
| Writing GraphQL tests |
graphql-testing.md, api-testing.md |
| Writing visual regression tests |
visual-regression.md, canvas-webgl.md |
| Structuring test code with POM |
page-object-model.md, test-suite-structure.md |
| Setting up test data/fixtures |
fixtures-hooks.md, test-data.md |
| Handling authentication |
authentication.md, authentication-flows.md |
| Testing date/time features |
clock-mocking.md |
| Testing file upload/download |
file-operations.md, file-upload-download.md |
| Testing forms/validation |
forms-validation.md |
| Testing drag and drop |
drag-drop.md |
| Testing accessibility |
accessibility.md |
| Testing security (XSS, CSRF) |
security-testing.md |
| Using test annotations |
annotations.md |
| Using test tags |
test-tags.md |
| Testing iframes |
iframes.md |
| Testing canvas/WebGL |
canvas-webgl.md |
| Internationalization (i18n) |
i18n.md |
| Testing Electron apps |
electron.md |
| Testing browser extensions |
browser-extensions.md |
Mobile & Responsive Testing
When to use: Testing mobile devices, touch interactions, responsive layouts
| Activity |
Reference Files |
| Device emulation |
mobile-testing.md |
| Touch gestures (swipe, tap) |
mobile-testing.md |
| Viewport/breakpoint testing |
mobile-testing.md |
| Mobile-specific UI |
mobile-testing.md, locators.md |
Real-Time & Browser APIs
When to use: Testing WebSockets, geolocation, permissions, multi-tab flows
| Activity |
Reference Files |
| WebSocket/real-time testing |
websockets.md |
| Geolocation mocking |
browser-apis.md |
| Permission handling |
browser-apis.md |
| Clipboard testing |
browser-apis.md |
| Camera/microphone mocking |
browser-apis.md |
| Multi-tab/popup flows |
multi-context.md |
| OAuth popup handling |
third-party.md, multi-context.md |
Debugging & Troubleshooting
When to use: Test failures, element not found, timeouts, unexpected behavior
| Activity |
Reference Files |
| Debugging test failures |
debugging.md, assertions-waiting.md |
| Fixing flaky tests |
flaky-tests.md, debugging.md, assertions-waiting.md |
| Debugging flaky parallel runs |
flaky-tests.md, performance.md, fixtures-hooks.md |
| Ensuring test isolation / avoiding state leak |
flaky-tests.md, fixtures-hooks.md, performance.md |
| Fixing selector issues |
locators.md, debugging.md |
| Investigating timeout issues |
assertions-waiting.md, debugging.md |
| Using trace viewer |
debugging.md |
| Debugging race conditions |
flaky-tests.md, debugging.md, assertions-waiting.md |
| Debugging console/JS errors |
console-errors.md, debugging.md |
Error & Edge Case Testing
When to use: Testing error states, offline mode, network failures, validation
| Activity |
Reference Files |
| Error boundary testing |
error-testing.md |
| Network failure simulation |
error-testing.md, network-advanced.md |
| Offline mode testing |
error-testing.md, service-workers.md |
| Service worker testing |
service-workers.md |
| Loading state testing |
error-testing.md |
| Form validation testing |
error-testing.md |
Multi-User & Collaboration Testing
When to use: Testing features involving multiple users, roles, or real-time collaboration
| Activity |
Reference Files |
| Multiple users in one test |
multi-user.md |
| Real-time collaboration |
multi-user.md, websockets.md |
| Role-based access testing |
multi-user.md |
| Concurrent action testing |
multi-user.md |
Architecture Decisions
When to use: Choosing test patterns, deciding between approaches, planning test architecture
| Activity |
Reference Files |
| POM vs fixtures decision |
pom-vs-fixtures.md |
| Test type selection |
test-architecture.md |
| Mock vs real services |
when-to-mock.md |
| Test suite structure |
test-suite-structure.md |
Framework-Specific Testing
When to use: Testing React or Next.js applications
| Activity |
Reference Files |
| Testing React apps |
react.md |
| Testing Next.js apps |
nextjs.md |
Refactoring & Maintenance
When to use: Improving existing tests, code review, reducing duplication
| Activity |
Reference Files |
| Refactoring to Page Object Model |
page-object-model.md, test-suite-structure.md |
| Improving test organization |
test-suite-structure.md, page-object-model.md |
| Extracting common setup/teardown |
fixtures-hooks.md |
| Replacing brittle selectors |
locators.md |
| Removing explicit waits |
assertions-waiting.md |
| Creating test data factories |
test-data.md |
| Configuration setup |
configuration.md |
Infrastructure & Configuration
When to use: Setting up projects, configuring CI/CD, optimizing performance
| Activity |
Reference Files |
| Configuring Playwright project |
configuration.md, projects-dependencies.md |
| Setting up CI/CD pipelines |
ci-cd.md, github-actions.md |
| GitHub Actions setup |
github-actions.md |
| GitLab CI setup |
gitlab.md |
| Other CI providers |
other-providers.md |
| Docker/container setup |
docker.md |
| Global setup & teardown |
global-setup.md |
| Project dependencies |
projects-dependencies.md |
| Optimizing test performance |
performance.md, test-suite-structure.md |
| Configuring parallel execution |
parallel-sharding.md, performance.md |
| Isolating test data between workers |
fixtures-hooks.md, performance.md |
| Test coverage |
test-coverage.md |
| Test reporting/artifacts |
reporting.md |
Advanced Patterns
When to use: Complex scenarios, API mocking, network interception
| Activity |
Reference Files |
| Mocking API responses |
test-suite-structure.md, network-advanced.md |
| Network interception |
network-advanced.md, assertions-waiting.md |
| GraphQL mocking |
network-advanced.md |
| HAR recording/playback |
network-advanced.md |
| Custom fixtures |
fixtures-hooks.md |
| Advanced waiting strategies |
assertions-waiting.md |
| OAuth/SSO mocking |
third-party.md, multi-context.md |
| Payment gateway mocking |
third-party.md |
| Email/SMS verification mocking |
third-party.md |
| Failing on console errors |
console-errors.md |
| Security testing (XSS, CSRF) |
security-testing.md |
| Performance budgets & Web Vitals |
performance-testing.md |
| Lighthouse integration |
performance-testing.md |
| Test annotations (skip, fixme) |
annotations.md |
| Test tags (@smoke, @fast) |
test-tags.md |
| Test steps for reporting |
annotations.md |
Quick Decision Tree
What are you doing?
│
├─ Writing a new test?
│ ├─ E2E test → core/test-suite-structure.md, core/locators.md, core/assertions-waiting.md
│ ├─ Component test → testing-patterns/component-testing.md
│ ├─ API test → testing-patterns/api-testing.md, core/test-suite-structure.md
│ ├─ GraphQL test → testing-patterns/graphql-testing.md
│ ├─ Visual regression → testing-patterns/visual-regression.md
│ ├─ Visual/canvas test → testing-patterns/canvas-webgl.md, core/test-suite-structure.md
│ ├─ Accessibility test → testing-patterns/accessibility.md
│ ├─ Mobile/responsive test → advanced/mobile-testing.md
│ ├─ i18n/locale test → testing-patterns/i18n.md
│ ├─ Electron app test → testing-patterns/electron.md
│ ├─ Browser extension test → testing-patterns/browser-extensions.md
│ ├─ Multi-user test → advanced/multi-user.md
│ ├─ Form validation test → testing-patterns/forms-validation.md
│ └─ Drag and drop test → testing-patterns/drag-drop.md
│
├─ Testing specific features?
│ ├─ File upload/download → testing-patterns/file-operations.md, testing-patterns/file-upload-download.md
│ ├─ Date/time dependent → advanced/clock-mocking.md
│ ├─ WebSocket/real-time → browser-apis/websockets.md
│ ├─ Geolocation/permissions → browser-apis/browser-apis.md
│ ├─ OAuth/SSO mocking → advanced/third-party.md, advanced/multi-context.md
│ ├─ Payments/email/SMS → advanced/third-party.md
│ ├─ iFrames → browser-apis/iframes.md
│ ├─ Canvas/WebGL/charts → testing-patterns/canvas-webgl.md
│ ├─ Service workers/PWA → browser-apis/service-workers.md
│ ├─ i18n/localization → testing-patterns/i18n.md
│ ├─ Security (XSS, CSRF) → testing-patterns/security-testing.md
│ └─ Performance/Web Vitals → testing-patterns/performance-testing.md
│
├─ Architecture decisions?
│ ├─ POM vs fixtures → architecture/pom-vs-fixtures.md
│ ├─ Test type selection → architecture/test-architecture.md
│ ├─ Mock vs real services → architecture/when-to-mock.md
│ └─ Test suite structure → core/test-suite-structure.md
│
├─ Framework-specific testing?
│ ├─ React app → frameworks/react.md
│ └─ Next.js app → frameworks/nextjs.md
│
├─ Authentication testing?
│ ├─ Basic auth patterns → advanced/authentication.md
│ └─ Complex flows (MFA, reset) → advanced/authentication-flows.md
│
├─ Test is failing/flaky?
│ ├─ Flaky test investigation → debugging/flaky-tests.md
│ ├─ Element not found → core/locators.md, debugging/debugging.md
│ ├─ Timeout issues → core/assertions-waiting.md, debugging/debugging.md
│ ├─ Race conditions → debugging/flaky-tests.md, debugging/debugging.md
│ ├─ Flaky only with multiple workers → debugging/flaky-tests.md, infrastructure-ci-cd/performance.md
│ ├─ State leak / isolation → debugging/flaky-tests.md, core/fixtures-hooks.md
│ ├─ Console/JS errors → debugging/console-errors.md, debugging/debugging.md
│ └─ General debugging → debugging/debugging.md
│
├─ Testing error scenarios?
│ ├─ Network failures → debugging/error-testing.md, advanced/network-advanced.md
│ ├─ Offline (unexpected) → debugging/error-testing.md
│ ├─ Offline-first/PWA → browser-apis/service-workers.md
│ ├─ Error boundaries → debugging/error-testing.md
│ └─ Form validation → testing-patterns/forms-validation.md, debugging/error-testing.md
│
├─ Refactoring existing code?
│ ├─ Implementing POM → core/page-object-model.md
│ ├─ Improving selectors → core/locators.md
│ ├─ Extracting fixtures → core/fixtures-hooks.md
│ ├─ Creating data factories → core/test-data.md
│ └─ Configuration setup → core/configuration.md
│
├─ Setting up infrastructure?
│ ├─ CI/CD → infrastructure-ci-cd/ci-cd.md
│ ├─ GitHub Actions → infrastructure-ci-cd/github-actions.md
│ ├─ GitLab CI → infrastructure-ci-cd/gitlab.md
│ ├─ Other CI providers → infrastructure-ci-cd/other-providers.md
│ ├─ Docker/containers → infrastructure-ci-cd/docker.md
│ ├─ Sharding/parallel → infrastructure-ci-cd/parallel-sharding.md
│ ├─ Reporting/artifacts → infrastructure-ci-cd/reporting.md
│ ├─ Global setup/teardown → core/global-setup.md
│ ├─ Project dependencies → core/projects-dependencies.md
│ ├─ Test performance → infrastructure-ci-cd/performance.md
│ ├─ Test coverage → infrastructure-ci-cd/test-coverage.md
│ └─ Project config → core/configuration.md, core/projects-dependencies.md
│
├─ Organizing tests?
│ ├─ Skip/fixme/slow tests → core/annotations.md
│ ├─ Test tags (@smoke, @fast) → core/test-tags.md
│ ├─ Filtering tests (--grep) → core/test-tags.md
│ ├─ Test steps → core/annotations.md
│ └─ Conditional execution → core/annotations.md
│
└─ Running subset of tests?
├─ By tag (@smoke, @critical) → core/test-tags.md
├─ Exclude slow/flaky tests → core/test-tags.md
├─ PR vs nightly tests → core/test-tags.md, infrastructure-ci-cd/ci-cd.md
└─ Project-specific filtering → core/test-tags.md, core/configuration.md
Test Validation Loop
After writing or modifying tests:
- Run tests:
npx playwright test --reporter=list
- If tests fail:
- Review error output and trace (
npx playwright show-trace)
- Fix locators, waits, or assertions
- Re-run tests
- Only proceed when all tests pass
- Run multiple times for critical tests:
npx playwright test --repeat-each=5
1---2name: playwright-testing3description: Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.4---5
6# Playwright Testing
7
8This skill provides comprehensive guidance for all aspects of Playwright test development, from writing new tests to debugging and maintaining existing test suites.
9
10## Activity-Based Reference Guide
11
12Consult these references based on what you're doing:
13
14### Writing New Tests
15
16**When to use**: Creating new test files, writing test cases, implementing test scenarios
17
18| Activity | Reference Files |
19| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
20| **Writing E2E tests** | [test-suite-structure.md](core/test-suite-structure.md), [locators.md](core/locators.md), [assertions-waiting.md](core/assertions-waiting.md) |
21| **Writing component tests** | [component-testing.md](testing-patterns/component-testing.md), [test-suite-structure.md](core/test-suite-structure.md) |
22| **Writing API tests** | [api-testing.md](testing-patterns/api-testing.md), [test-suite-structure.md](core/test-suite-structure.md) |
23| **Writing GraphQL tests** | [graphql-testing.md](testing-patterns/graphql-testing.md), [api-testing.md](testing-patterns/api-testing.md) |
24| **Writing visual regression tests** | [visual-regression.md](testing-patterns/visual-regression.md), [canvas-webgl.md](testing-patterns/canvas-webgl.md) |
25| **Structuring test code with POM** | [page-object-model.md](core/page-object-model.md), [test-suite-structure.md](core/test-suite-structure.md) |
26| **Setting up test data/fixtures** | [fixtures-hooks.md](core/fixtures-hooks.md), [test-data.md](core/test-data.md) |
27| **Handling authentication** | [authentication.md](advanced/authentication.md), [authentication-flows.md](advanced/authentication-flows.md) |
28| **Testing date/time features** | [clock-mocking.md](advanced/clock-mocking.md) |
29| **Testing file upload/download** | [file-operations.md](testing-patterns/file-operations.md), [file-upload-download.md](testing-patterns/file-upload-download.md) |
30| **Testing forms/validation** | [forms-validation.md](testing-patterns/forms-validation.md) |
31| **Testing drag and drop** | [drag-drop.md](testing-patterns/drag-drop.md) |
32| **Testing accessibility** | [accessibility.md](testing-patterns/accessibility.md) |
33| **Testing security (XSS, CSRF)** | [security-testing.md](testing-patterns/security-testing.md) |
34| **Using test annotations** | [annotations.md](core/annotations.md) |
35| **Using test tags** | [test-tags.md](core/test-tags.md) |
36| **Testing iframes** | [iframes.md](browser-apis/iframes.md) |
37| **Testing canvas/WebGL** | [canvas-webgl.md](testing-patterns/canvas-webgl.md) |
38| **Internationalization (i18n)** | [i18n.md](testing-patterns/i18n.md) |
39| **Testing Electron apps** | [electron.md](testing-patterns/electron.md) |
40| **Testing browser extensions** | [browser-extensions.md](testing-patterns/browser-extensions.md) |
41
42### Mobile & Responsive Testing
43
44**When to use**: Testing mobile devices, touch interactions, responsive layouts
45
46| Activity | Reference Files |
47| ------------------------------- | -------------------------------------------------------------------------------- |
48| **Device emulation** | [mobile-testing.md](advanced/mobile-testing.md) |
49| **Touch gestures (swipe, tap)** | [mobile-testing.md](advanced/mobile-testing.md) |
50| **Viewport/breakpoint testing** | [mobile-testing.md](advanced/mobile-testing.md) |
51| **Mobile-specific UI** | [mobile-testing.md](advanced/mobile-testing.md), [locators.md](core/locators.md) |
52
53### Real-Time & Browser APIs
54
55**When to use**: Testing WebSockets, geolocation, permissions, multi-tab flows
56
57| Activity | Reference Files |
58| ------------------------------- | ---------------------------------------------------------------------------------------- |
59| **WebSocket/real-time testing** | [websockets.md](browser-apis/websockets.md) |
60| **Geolocation mocking** | [browser-apis.md](browser-apis/browser-apis.md) |
61| **Permission handling** | [browser-apis.md](browser-apis/browser-apis.md) |
62| **Clipboard testing** | [browser-apis.md](browser-apis/browser-apis.md) |
63| **Camera/microphone mocking** | [browser-apis.md](browser-apis/browser-apis.md) |
64| **Multi-tab/popup flows** | [multi-context.md](advanced/multi-context.md) |
65| **OAuth popup handling** | [third-party.md](advanced/third-party.md), [multi-context.md](advanced/multi-context.md) |
66
67### Debugging & Troubleshooting
68
69**When to use**: Test failures, element not found, timeouts, unexpected behavior
70
71| Activity | Reference Files |
72| ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
73| **Debugging test failures** | [debugging.md](debugging/debugging.md), [assertions-waiting.md](core/assertions-waiting.md) |
74| **Fixing flaky tests** | [flaky-tests.md](debugging/flaky-tests.md), [debugging.md](debugging/debugging.md), [assertions-waiting.md](core/assertions-waiting.md) |
75| **Debugging flaky parallel runs** | [flaky-tests.md](debugging/flaky-tests.md), [performance.md](infrastructure-ci-cd/performance.md), [fixtures-hooks.md](core/fixtures-hooks.md) |
76| **Ensuring test isolation / avoiding state leak** | [flaky-tests.md](debugging/flaky-tests.md), [fixtures-hooks.md](core/fixtures-hooks.md), [performance.md](infrastructure-ci-cd/performance.md) |
77| **Fixing selector issues** | [locators.md](core/locators.md), [debugging.md](debugging/debugging.md) |
78| **Investigating timeout issues** | [assertions-waiting.md](core/assertions-waiting.md), [debugging.md](debugging/debugging.md) |
79| **Using trace viewer** | [debugging.md](debugging/debugging.md) |
80| **Debugging race conditions** | [flaky-tests.md](debugging/flaky-tests.md), [debugging.md](debugging/debugging.md), [assertions-waiting.md](core/assertions-waiting.md) |
81| **Debugging console/JS errors** | [console-errors.md](debugging/console-errors.md), [debugging.md](debugging/debugging.md) |
82
83### Error & Edge Case Testing
84
85**When to use**: Testing error states, offline mode, network failures, validation
86
87| Activity | Reference Files |
88| ------------------------------ | ----------------------------------------------------------------------------------------------------- |
89| **Error boundary testing** | [error-testing.md](debugging/error-testing.md) |
90| **Network failure simulation** | [error-testing.md](debugging/error-testing.md), [network-advanced.md](advanced/network-advanced.md) |
91| **Offline mode testing** | [error-testing.md](debugging/error-testing.md), [service-workers.md](browser-apis/service-workers.md) |
92| **Service worker testing** | [service-workers.md](browser-apis/service-workers.md) |
93| **Loading state testing** | [error-testing.md](debugging/error-testing.md) |
94| **Form validation testing** | [error-testing.md](debugging/error-testing.md) |
95
96### Multi-User & Collaboration Testing
97
98**When to use**: Testing features involving multiple users, roles, or real-time collaboration
99
100| Activity | Reference Files |
101| ------------------------------ | ------------------------------------------------------------------------------------ |
102| **Multiple users in one test** | [multi-user.md](advanced/multi-user.md) |
103| **Real-time collaboration** | [multi-user.md](advanced/multi-user.md), [websockets.md](browser-apis/websockets.md) |
104| **Role-based access testing** | [multi-user.md](advanced/multi-user.md) |
105| **Concurrent action testing** | [multi-user.md](advanced/multi-user.md) |
106
107### Architecture Decisions
108
109**When to use**: Choosing test patterns, deciding between approaches, planning test architecture
110
111| Activity | Reference Files |
112| ---------------------------- | --------------------------------------------------------- |
113| **POM vs fixtures decision** | [pom-vs-fixtures.md](architecture/pom-vs-fixtures.md) |
114| **Test type selection** | [test-architecture.md](architecture/test-architecture.md) |
115| **Mock vs real services** | [when-to-mock.md](architecture/when-to-mock.md) |
116| **Test suite structure** | [test-suite-structure.md](core/test-suite-structure.md) |
117
118### Framework-Specific Testing
119
120**When to use**: Testing React or Next.js applications
121
122| Activity | Reference Files |
123| ------------------------- | ----------------------------------- |
124| **Testing React apps** | [react.md](frameworks/react.md) |
125| **Testing Next.js apps** | [nextjs.md](frameworks/nextjs.md) |
126
127### Refactoring & Maintenance
128
129**When to use**: Improving existing tests, code review, reducing duplication
130
131| Activity | Reference Files |
132| ------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
133| **Refactoring to Page Object Model** | [page-object-model.md](core/page-object-model.md), [test-suite-structure.md](core/test-suite-structure.md) |
134| **Improving test organization** | [test-suite-structure.md](core/test-suite-structure.md), [page-object-model.md](core/page-object-model.md) |
135| **Extracting common setup/teardown** | [fixtures-hooks.md](core/fixtures-hooks.md) |
136| **Replacing brittle selectors** | [locators.md](core/locators.md) |
137| **Removing explicit waits** | [assertions-waiting.md](core/assertions-waiting.md) |
138| **Creating test data factories** | [test-data.md](core/test-data.md) |
139| **Configuration setup** | [configuration.md](core/configuration.md) |
140
141### Infrastructure & Configuration
142
143**When to use**: Setting up projects, configuring CI/CD, optimizing performance
144
145| Activity | Reference Files |
146| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
147| **Configuring Playwright project** | [configuration.md](core/configuration.md), [projects-dependencies.md](core/projects-dependencies.md) |
148| **Setting up CI/CD pipelines** | [ci-cd.md](infrastructure-ci-cd/ci-cd.md), [github-actions.md](infrastructure-ci-cd/github-actions.md) |
149| **GitHub Actions setup** | [github-actions.md](infrastructure-ci-cd/github-actions.md) |
150| **GitLab CI setup** | [gitlab.md](infrastructure-ci-cd/gitlab.md) |
151| **Other CI providers** | [other-providers.md](infrastructure-ci-cd/other-providers.md) |
152| **Docker/container setup** | [docker.md](infrastructure-ci-cd/docker.md) |
153| **Global setup & teardown** | [global-setup.md](core/global-setup.md) |
154| **Project dependencies** | [projects-dependencies.md](core/projects-dependencies.md) |
155| **Optimizing test performance** | [performance.md](infrastructure-ci-cd/performance.md), [test-suite-structure.md](core/test-suite-structure.md) |
156| **Configuring parallel execution** | [parallel-sharding.md](infrastructure-ci-cd/parallel-sharding.md), [performance.md](infrastructure-ci-cd/performance.md) |
157| **Isolating test data between workers** | [fixtures-hooks.md](core/fixtures-hooks.md), [performance.md](infrastructure-ci-cd/performance.md) |
158| **Test coverage** | [test-coverage.md](infrastructure-ci-cd/test-coverage.md) |
159| **Test reporting/artifacts** | [reporting.md](infrastructure-ci-cd/reporting.md) |
160
161### Advanced Patterns
162
163**When to use**: Complex scenarios, API mocking, network interception
164
165| Activity | Reference Files |
166| ------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
167| **Mocking API responses** | [test-suite-structure.md](core/test-suite-structure.md), [network-advanced.md](advanced/network-advanced.md) |
168| **Network interception** | [network-advanced.md](advanced/network-advanced.md), [assertions-waiting.md](core/assertions-waiting.md) |
169| **GraphQL mocking** | [network-advanced.md](advanced/network-advanced.md) |
170| **HAR recording/playback** | [network-advanced.md](advanced/network-advanced.md) |
171| **Custom fixtures** | [fixtures-hooks.md](core/fixtures-hooks.md) |
172| **Advanced waiting strategies** | [assertions-waiting.md](core/assertions-waiting.md) |
173| **OAuth/SSO mocking** | [third-party.md](advanced/third-party.md), [multi-context.md](advanced/multi-context.md) |
174| **Payment gateway mocking** | [third-party.md](advanced/third-party.md) |
175| **Email/SMS verification mocking** | [third-party.md](advanced/third-party.md) |
176| **Failing on console errors** | [console-errors.md](debugging/console-errors.md) |
177| **Security testing (XSS, CSRF)** | [security-testing.md](testing-patterns/security-testing.md) |
178| **Performance budgets & Web Vitals** | [performance-testing.md](testing-patterns/performance-testing.md) |
179| **Lighthouse integration** | [performance-testing.md](testing-patterns/performance-testing.md) |
180| **Test annotations (skip, fixme)** | [annotations.md](core/annotations.md) |
181| **Test tags (@smoke, @fast)** | [test-tags.md](core/test-tags.md) |
182| **Test steps for reporting** | [annotations.md](core/annotations.md) |
183
184## Quick Decision Tree
185
186```
187What are you doing?
188│
189├─ Writing a new test?
190│ ├─ E2E test → core/test-suite-structure.md, core/locators.md, core/assertions-waiting.md
191│ ├─ Component test → testing-patterns/component-testing.md
192│ ├─ API test → testing-patterns/api-testing.md, core/test-suite-structure.md
193│ ├─ GraphQL test → testing-patterns/graphql-testing.md
194│ ├─ Visual regression → testing-patterns/visual-regression.md
195│ ├─ Visual/canvas test → testing-patterns/canvas-webgl.md, core/test-suite-structure.md
196│ ├─ Accessibility test → testing-patterns/accessibility.md
197│ ├─ Mobile/responsive test → advanced/mobile-testing.md
198│ ├─ i18n/locale test → testing-patterns/i18n.md
199│ ├─ Electron app test → testing-patterns/electron.md
200│ ├─ Browser extension test → testing-patterns/browser-extensions.md
201│ ├─ Multi-user test → advanced/multi-user.md
202│ ├─ Form validation test → testing-patterns/forms-validation.md
203│ └─ Drag and drop test → testing-patterns/drag-drop.md
204│
205├─ Testing specific features?
206│ ├─ File upload/download → testing-patterns/file-operations.md, testing-patterns/file-upload-download.md
207│ ├─ Date/time dependent → advanced/clock-mocking.md
208│ ├─ WebSocket/real-time → browser-apis/websockets.md
209│ ├─ Geolocation/permissions → browser-apis/browser-apis.md
210│ ├─ OAuth/SSO mocking → advanced/third-party.md, advanced/multi-context.md
211│ ├─ Payments/email/SMS → advanced/third-party.md
212│ ├─ iFrames → browser-apis/iframes.md
213│ ├─ Canvas/WebGL/charts → testing-patterns/canvas-webgl.md
214│ ├─ Service workers/PWA → browser-apis/service-workers.md
215│ ├─ i18n/localization → testing-patterns/i18n.md
216│ ├─ Security (XSS, CSRF) → testing-patterns/security-testing.md
217│ └─ Performance/Web Vitals → testing-patterns/performance-testing.md
218│
219├─ Architecture decisions?
220│ ├─ POM vs fixtures → architecture/pom-vs-fixtures.md
221│ ├─ Test type selection → architecture/test-architecture.md
222│ ├─ Mock vs real services → architecture/when-to-mock.md
223│ └─ Test suite structure → core/test-suite-structure.md
224│
225├─ Framework-specific testing?
226│ ├─ React app → frameworks/react.md
227│ └─ Next.js app → frameworks/nextjs.md
228│
229├─ Authentication testing?
230│ ├─ Basic auth patterns → advanced/authentication.md
231│ └─ Complex flows (MFA, reset) → advanced/authentication-flows.md
232│
233├─ Test is failing/flaky?
234│ ├─ Flaky test investigation → debugging/flaky-tests.md
235│ ├─ Element not found → core/locators.md, debugging/debugging.md
236│ ├─ Timeout issues → core/assertions-waiting.md, debugging/debugging.md
237│ ├─ Race conditions → debugging/flaky-tests.md, debugging/debugging.md
238│ ├─ Flaky only with multiple workers → debugging/flaky-tests.md, infrastructure-ci-cd/performance.md
239│ ├─ State leak / isolation → debugging/flaky-tests.md, core/fixtures-hooks.md
240│ ├─ Console/JS errors → debugging/console-errors.md, debugging/debugging.md
241│ └─ General debugging → debugging/debugging.md
242│
243├─ Testing error scenarios?
244│ ├─ Network failures → debugging/error-testing.md, advanced/network-advanced.md
245│ ├─ Offline (unexpected) → debugging/error-testing.md
246│ ├─ Offline-first/PWA → browser-apis/service-workers.md
247│ ├─ Error boundaries → debugging/error-testing.md
248│ └─ Form validation → testing-patterns/forms-validation.md, debugging/error-testing.md
249│
250├─ Refactoring existing code?
251│ ├─ Implementing POM → core/page-object-model.md
252│ ├─ Improving selectors → core/locators.md
253│ ├─ Extracting fixtures → core/fixtures-hooks.md
254│ ├─ Creating data factories → core/test-data.md
255│ └─ Configuration setup → core/configuration.md
256│
257├─ Setting up infrastructure?
258│ ├─ CI/CD → infrastructure-ci-cd/ci-cd.md
259│ ├─ GitHub Actions → infrastructure-ci-cd/github-actions.md
260│ ├─ GitLab CI → infrastructure-ci-cd/gitlab.md
261│ ├─ Other CI providers → infrastructure-ci-cd/other-providers.md
262│ ├─ Docker/containers → infrastructure-ci-cd/docker.md
263│ ├─ Sharding/parallel → infrastructure-ci-cd/parallel-sharding.md
264│ ├─ Reporting/artifacts → infrastructure-ci-cd/reporting.md
265│ ├─ Global setup/teardown → core/global-setup.md
266│ ├─ Project dependencies → core/projects-dependencies.md
267│ ├─ Test performance → infrastructure-ci-cd/performance.md
268│ ├─ Test coverage → infrastructure-ci-cd/test-coverage.md
269│ └─ Project config → core/configuration.md, core/projects-dependencies.md
270│
271├─ Organizing tests?
272│ ├─ Skip/fixme/slow tests → core/annotations.md
273│ ├─ Test tags (@smoke, @fast) → core/test-tags.md
274│ ├─ Filtering tests (--grep) → core/test-tags.md
275│ ├─ Test steps → core/annotations.md
276│ └─ Conditional execution → core/annotations.md
277│
278└─ Running subset of tests?
279 ├─ By tag (@smoke, @critical) → core/test-tags.md
280 ├─ Exclude slow/flaky tests → core/test-tags.md
281 ├─ PR vs nightly tests → core/test-tags.md, infrastructure-ci-cd/ci-cd.md
282 └─ Project-specific filtering → core/test-tags.md, core/configuration.md
283```
284
285## Test Validation Loop
286
287After writing or modifying tests:
288
2891. **Run tests**: `npx playwright test --reporter=list`
2902. **If tests fail**:
291 - Review error output and trace (`npx playwright show-trace`)
292 - Fix locators, waits, or assertions
293 - Re-run tests
2943. **Only proceed when all tests pass**
2954. **Run multiple times** for critical tests: `npx playwright test --repeat-each=5`
MODSetter