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: Playwright best practices for E2E, component, API, visual, and accessibility testing: flaky-test fixes, Page Object Model, CI/CD, mocking, auth/OAuth, axe-core, uploads, WebSockets, mobile, GraphQL, PWA, Electron, and extensions. Use when writing or debugging Playwright tests. NOT for: non-Playwright frameworks (Cypress/Selenium-only) or general CI without Playwright.4---56# Playwright Best Practices78This skill provides comprehensive guidance for all aspects of Playwright test development, from writing new tests to debugging and maintaining existing test suites.910## Activity-Based Reference Guide1112Consult these references based on what you're doing:1314### Writing New Tests1516**When to use**: Creating new test files, writing test cases, implementing test scenarios1718| 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) |4142### Mobile & Responsive Testing4344**When to use**: Testing mobile devices, touch interactions, responsive layouts4546| 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) |5253### Real-Time & Browser APIs5455**When to use**: Testing WebSockets, geolocation, permissions, multi-tab flows5657| 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) |6667### Debugging & Troubleshooting6869**When to use**: Test failures, element not found, timeouts, unexpected behavior7071| 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) |8283### Error & Edge Case Testing8485**When to use**: Testing error states, offline mode, network failures, validation8687| 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) |9596### Multi-User & Collaboration Testing9798**When to use**: Testing features involving multiple users, roles, or real-time collaboration99100| 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) |106107### Architecture Decisions108109**When to use**: Choosing test patterns, deciding between approaches, planning test architecture110111| 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) |117118### Framework-Specific Testing119120**When to use**: Testing React, Angular, Vue, or Next.js applications121122| Activity | Reference Files |123| ------------------------- | ----------------------------------- |124| **Testing React apps** | [react.md](frameworks/react.md) |125| **Testing Angular apps** | [angular.md](frameworks/angular.md) |126| **Testing Vue/Nuxt apps** | [vue.md](frameworks/vue.md) |127| **Testing Next.js apps** | [nextjs.md](frameworks/nextjs.md) |128129### Refactoring & Maintenance130131**When to use**: Improving existing tests, code review, reducing duplication132133| Activity | Reference Files |134| ------------------------------------ | ---------------------------------------------------------------------------------------------------------- |135| **Refactoring to Page Object Model** | [page-object-model.md](core/page-object-model.md), [test-suite-structure.md](core/test-suite-structure.md) |136| **Improving test organization** | [test-suite-structure.md](core/test-suite-structure.md), [page-object-model.md](core/page-object-model.md) |137| **Extracting common setup/teardown** | [fixtures-hooks.md](core/fixtures-hooks.md) |138| **Replacing brittle selectors** | [locators.md](core/locators.md) |139| **Removing explicit waits** | [assertions-waiting.md](core/assertions-waiting.md) |140| **Creating test data factories** | [test-data.md](core/test-data.md) |141| **Configuration setup** | [configuration.md](core/configuration.md) |142143### Infrastructure & Configuration144145**When to use**: Setting up projects, configuring CI/CD, optimizing performance146147| Activity | Reference Files |148| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |149| **Configuring Playwright project** | [configuration.md](core/configuration.md), [projects-dependencies.md](core/projects-dependencies.md) |150| **Setting up CI/CD pipelines** | [ci-cd.md](infrastructure-ci-cd/ci-cd.md), [github-actions.md](infrastructure-ci-cd/github-actions.md) |151| **GitHub Actions setup** | [github-actions.md](infrastructure-ci-cd/github-actions.md) |152| **GitLab CI setup** | [gitlab.md](infrastructure-ci-cd/gitlab.md) |153| **Other CI providers** | [other-providers.md](infrastructure-ci-cd/other-providers.md) |154| **Docker/container setup** | [docker.md](infrastructure-ci-cd/docker.md) |155| **Global setup & teardown** | [global-setup.md](core/global-setup.md) |156| **Project dependencies** | [projects-dependencies.md](core/projects-dependencies.md) |157| **Optimizing test performance** | [performance.md](infrastructure-ci-cd/performance.md), [test-suite-structure.md](core/test-suite-structure.md) |158| **Configuring parallel execution** | [parallel-sharding.md](infrastructure-ci-cd/parallel-sharding.md), [performance.md](infrastructure-ci-cd/performance.md) |159| **Isolating test data between workers** | [fixtures-hooks.md](core/fixtures-hooks.md), [performance.md](infrastructure-ci-cd/performance.md) |160| **Test coverage** | [test-coverage.md](infrastructure-ci-cd/test-coverage.md) |161| **Test reporting/artifacts** | [reporting.md](infrastructure-ci-cd/reporting.md) |162163### Advanced Patterns164165**When to use**: Complex scenarios, API mocking, network interception166167| Activity | Reference Files |168| ------------------------------------ | ------------------------------------------------------------------------------------------------------------ |169| **Mocking API responses** | [test-suite-structure.md](core/test-suite-structure.md), [network-advanced.md](advanced/network-advanced.md) |170| **Network interception** | [network-advanced.md](advanced/network-advanced.md), [assertions-waiting.md](core/assertions-waiting.md) |171| **GraphQL mocking** | [network-advanced.md](advanced/network-advanced.md) |172| **HAR recording/playback** | [network-advanced.md](advanced/network-advanced.md) |173| **Custom fixtures** | [fixtures-hooks.md](core/fixtures-hooks.md) |174| **Advanced waiting strategies** | [assertions-waiting.md](core/assertions-waiting.md) |175| **OAuth/SSO mocking** | [third-party.md](advanced/third-party.md), [multi-context.md](advanced/multi-context.md) |176| **Payment gateway mocking** | [third-party.md](advanced/third-party.md) |177| **Email/SMS verification mocking** | [third-party.md](advanced/third-party.md) |178| **Failing on console errors** | [console-errors.md](debugging/console-errors.md) |179| **Security testing (XSS, CSRF)** | [security-testing.md](testing-patterns/security-testing.md) |180| **Performance budgets & Web Vitals** | [performance-testing.md](testing-patterns/performance-testing.md) |181| **Lighthouse integration** | [performance-testing.md](testing-patterns/performance-testing.md) |182| **Test annotations (skip, fixme)** | [annotations.md](core/annotations.md) |183| **Test tags (@smoke, @fast)** | [test-tags.md](core/test-tags.md) |184| **Test steps for reporting** | [annotations.md](core/annotations.md) |185186## Quick Decision Tree187188```189What are you doing?190│191├─ Writing a new test?192│ ├─ E2E test → core/test-suite-structure.md, core/locators.md, core/assertions-waiting.md193│ ├─ Component test → testing-patterns/component-testing.md194│ ├─ API test → testing-patterns/api-testing.md, core/test-suite-structure.md195│ ├─ GraphQL test → testing-patterns/graphql-testing.md196│ ├─ Visual regression → testing-patterns/visual-regression.md197│ ├─ Visual/canvas test → testing-patterns/canvas-webgl.md, core/test-suite-structure.md198│ ├─ Accessibility test → testing-patterns/accessibility.md199│ ├─ Mobile/responsive test → advanced/mobile-testing.md200│ ├─ i18n/locale test → testing-patterns/i18n.md201│ ├─ Electron app test → testing-patterns/electron.md202│ ├─ Browser extension test → testing-patterns/browser-extensions.md203│ ├─ Multi-user test → advanced/multi-user.md204│ ├─ Form validation test → testing-patterns/forms-validation.md205│ └─ Drag and drop test → testing-patterns/drag-drop.md206│207├─ Testing specific features?208│ ├─ File upload/download → testing-patterns/file-operations.md, testing-patterns/file-upload-download.md209│ ├─ Date/time dependent → advanced/clock-mocking.md210│ ├─ WebSocket/real-time → browser-apis/websockets.md211│ ├─ Geolocation/permissions → browser-apis/browser-apis.md212│ ├─ OAuth/SSO mocking → advanced/third-party.md, advanced/multi-context.md213│ ├─ Payments/email/SMS → advanced/third-party.md214│ ├─ iFrames → browser-apis/iframes.md215│ ├─ Canvas/WebGL/charts → testing-patterns/canvas-webgl.md216│ ├─ Service workers/PWA → browser-apis/service-workers.md217│ ├─ i18n/localization → testing-patterns/i18n.md218│ ├─ Security (XSS, CSRF) → testing-patterns/security-testing.md219│ └─ Performance/Web Vitals → testing-patterns/performance-testing.md220│221├─ Architecture decisions?222│ ├─ POM vs fixtures → architecture/pom-vs-fixtures.md223│ ├─ Test type selection → architecture/test-architecture.md224│ ├─ Mock vs real services → architecture/when-to-mock.md225│ └─ Test suite structure → core/test-suite-structure.md226│227├─ Framework-specific testing?228│ ├─ React app → frameworks/react.md229│ ├─ Angular app → frameworks/angular.md230│ ├─ Vue/Nuxt app → frameworks/vue.md231│ └─ Next.js app → frameworks/nextjs.md232│233├─ Authentication testing?234│ ├─ Basic auth patterns → advanced/authentication.md235│ └─ Complex flows (MFA, reset) → advanced/authentication-flows.md236│237├─ Test is failing/flaky?238│ ├─ Flaky test investigation → debugging/flaky-tests.md239│ ├─ Element not found → core/locators.md, debugging/debugging.md240│ ├─ Timeout issues → core/assertions-waiting.md, debugging/debugging.md241│ ├─ Race conditions → debugging/flaky-tests.md, debugging/debugging.md242│ ├─ Flaky only with multiple workers → debugging/flaky-tests.md, infrastructure-ci-cd/performance.md243│ ├─ State leak / isolation → debugging/flaky-tests.md, core/fixtures-hooks.md244│ ├─ Console/JS errors → debugging/console-errors.md, debugging/debugging.md245│ └─ General debugging → debugging/debugging.md246│247├─ Testing error scenarios?248│ ├─ Network failures → debugging/error-testing.md, advanced/network-advanced.md249│ ├─ Offline (unexpected) → debugging/error-testing.md250│ ├─ Offline-first/PWA → browser-apis/service-workers.md251│ ├─ Error boundaries → debugging/error-testing.md252│ └─ Form validation → testing-patterns/forms-validation.md, debugging/error-testing.md253│254├─ Refactoring existing code?255│ ├─ Implementing POM → core/page-object-model.md256│ ├─ Improving selectors → core/locators.md257│ ├─ Extracting fixtures → core/fixtures-hooks.md258│ ├─ Creating data factories → core/test-data.md259│ └─ Configuration setup → core/configuration.md260│261├─ Setting up infrastructure?262│ ├─ CI/CD → infrastructure-ci-cd/ci-cd.md263│ ├─ GitHub Actions → infrastructure-ci-cd/github-actions.md264│ ├─ GitLab CI → infrastructure-ci-cd/gitlab.md265│ ├─ Other CI providers → infrastructure-ci-cd/other-providers.md266│ ├─ Docker/containers → infrastructure-ci-cd/docker.md267│ ├─ Sharding/parallel → infrastructure-ci-cd/parallel-sharding.md268│ ├─ Reporting/artifacts → infrastructure-ci-cd/reporting.md269│ ├─ Global setup/teardown → core/global-setup.md270│ ├─ Project dependencies → core/projects-dependencies.md271│ ├─ Test performance → infrastructure-ci-cd/performance.md272│ ├─ Test coverage → infrastructure-ci-cd/test-coverage.md273│ └─ Project config → core/configuration.md, core/projects-dependencies.md274│275├─ Organizing tests?276│ ├─ Skip/fixme/slow tests → core/annotations.md277│ ├─ Test tags (@smoke, @fast) → core/test-tags.md278│ ├─ Filtering tests (--grep) → core/test-tags.md279│ ├─ Test steps → core/annotations.md280│ └─ Conditional execution → core/annotations.md281│282└─ Running subset of tests?283 ├─ By tag (@smoke, @critical) → core/test-tags.md284 ├─ Exclude slow/flaky tests → core/test-tags.md285 ├─ PR vs nightly tests → core/test-tags.md, infrastructure-ci-cd/ci-cd.md286 └─ Project-specific filtering → core/test-tags.md, core/configuration.md287```288289## Test Validation Loop290291After writing or modifying tests:2922931. **Run tests**: `npx playwright test --reporter=list`2942. **If tests fail**:295 - Review error output and trace (`npx playwright show-trace`)296 - Fix locators, waits, or assertions297 - Re-run tests2983. **Only proceed when all tests pass**2994. **Run multiple times** for critical tests: `npx playwright test --repeat-each=5`
NinjaSln-labs