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