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