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.4license: MIT5---67# Playwright Best Practices89This skill provides comprehensive guidance for all aspects of Playwright test development, from writing new tests to debugging and maintaining existing test suites.1011## Activity-Based Reference Guide1213Consult these references based on what you're doing:1415### Writing New Tests1617**When to use**: Creating new test files, writing test cases, implementing test scenarios1819| 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) |4243### Mobile & Responsive Testing4445**When to use**: Testing mobile devices, touch interactions, responsive layouts4647| 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) |5354### Real-Time & Browser APIs5556**When to use**: Testing WebSockets, geolocation, permissions, multi-tab flows5758| 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) |6768### Debugging & Troubleshooting6970**When to use**: Test failures, element not found, timeouts, unexpected behavior7172| 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) |8384### Error & Edge Case Testing8586**When to use**: Testing error states, offline mode, network failures, validation8788| 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) |9697### Multi-User & Collaboration Testing9899**When to use**: Testing features involving multiple users, roles, or real-time collaboration100101| 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) |107108### Architecture Decisions109110**When to use**: Choosing test patterns, deciding between approaches, planning test architecture111112| 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) |118119### Framework-Specific Testing120121**When to use**: Testing React, Angular, Vue, or Next.js applications122123| 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) |129130### Refactoring & Maintenance131132**When to use**: Improving existing tests, code review, reducing duplication133134| 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) |143144### Infrastructure & Configuration145146**When to use**: Setting up projects, configuring CI/CD, optimizing performance147148| 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) |163164### Advanced Patterns165166**When to use**: Complex scenarios, API mocking, network interception167168| 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) |186187## Quick Decision Tree188189```190What are you doing?191│192├─ Writing a new test?193│ ├─ E2E test → core/test-suite-structure.md, core/locators.md, core/assertions-waiting.md194│ ├─ Component test → testing-patterns/component-testing.md195│ ├─ API test → testing-patterns/api-testing.md, core/test-suite-structure.md196│ ├─ GraphQL test → testing-patterns/graphql-testing.md197│ ├─ Visual regression → testing-patterns/visual-regression.md198│ ├─ Visual/canvas test → testing-patterns/canvas-webgl.md, core/test-suite-structure.md199│ ├─ Accessibility test → testing-patterns/accessibility.md200│ ├─ Mobile/responsive test → advanced/mobile-testing.md201│ ├─ i18n/locale test → testing-patterns/i18n.md202│ ├─ Electron app test → testing-patterns/electron.md203│ ├─ Browser extension test → testing-patterns/browser-extensions.md204│ ├─ Multi-user test → advanced/multi-user.md205│ ├─ Form validation test → testing-patterns/forms-validation.md206│ └─ Drag and drop test → testing-patterns/drag-drop.md207│208├─ Testing specific features?209│ ├─ File upload/download → testing-patterns/file-operations.md, testing-patterns/file-upload-download.md210│ ├─ Date/time dependent → advanced/clock-mocking.md211│ ├─ WebSocket/real-time → browser-apis/websockets.md212│ ├─ Geolocation/permissions → browser-apis/browser-apis.md213│ ├─ OAuth/SSO mocking → advanced/third-party.md, advanced/multi-context.md214│ ├─ Payments/email/SMS → advanced/third-party.md215│ ├─ iFrames → browser-apis/iframes.md216│ ├─ Canvas/WebGL/charts → testing-patterns/canvas-webgl.md217│ ├─ Service workers/PWA → browser-apis/service-workers.md218│ ├─ i18n/localization → testing-patterns/i18n.md219│ ├─ Security (XSS, CSRF) → testing-patterns/security-testing.md220│ └─ Performance/Web Vitals → testing-patterns/performance-testing.md221│222├─ Architecture decisions?223│ ├─ POM vs fixtures → architecture/pom-vs-fixtures.md224│ ├─ Test type selection → architecture/test-architecture.md225│ ├─ Mock vs real services → architecture/when-to-mock.md226│ └─ Test suite structure → core/test-suite-structure.md227│228├─ Framework-specific testing?229│ ├─ React app → frameworks/react.md230│ ├─ Angular app → frameworks/angular.md231│ ├─ Vue/Nuxt app → frameworks/vue.md232│ └─ Next.js app → frameworks/nextjs.md233│234├─ Authentication testing?235│ ├─ Basic auth patterns → advanced/authentication.md236│ └─ Complex flows (MFA, reset) → advanced/authentication-flows.md237│238├─ Test is failing/flaky?239│ ├─ Flaky test investigation → debugging/flaky-tests.md240│ ├─ Element not found → core/locators.md, debugging/debugging.md241│ ├─ Timeout issues → core/assertions-waiting.md, debugging/debugging.md242│ ├─ Race conditions → debugging/flaky-tests.md, debugging/debugging.md243│ ├─ Flaky only with multiple workers → debugging/flaky-tests.md, infrastructure-ci-cd/performance.md244│ ├─ State leak / isolation → debugging/flaky-tests.md, core/fixtures-hooks.md245│ ├─ Console/JS errors → debugging/console-errors.md, debugging/debugging.md246│ └─ General debugging → debugging/debugging.md247│248├─ Testing error scenarios?249│ ├─ Network failures → debugging/error-testing.md, advanced/network-advanced.md250│ ├─ Offline (unexpected) → debugging/error-testing.md251│ ├─ Offline-first/PWA → browser-apis/service-workers.md252│ ├─ Error boundaries → debugging/error-testing.md253│ └─ Form validation → testing-patterns/forms-validation.md, debugging/error-testing.md254│255├─ Refactoring existing code?256│ ├─ Implementing POM → core/page-object-model.md257│ ├─ Improving selectors → core/locators.md258│ ├─ Extracting fixtures → core/fixtures-hooks.md259│ ├─ Creating data factories → core/test-data.md260│ └─ Configuration setup → core/configuration.md261│262├─ Setting up infrastructure?263│ ├─ CI/CD → infrastructure-ci-cd/ci-cd.md264│ ├─ GitHub Actions → infrastructure-ci-cd/github-actions.md265│ ├─ GitLab CI → infrastructure-ci-cd/gitlab.md266│ ├─ Other CI providers → infrastructure-ci-cd/other-providers.md267│ ├─ Docker/containers → infrastructure-ci-cd/docker.md268│ ├─ Sharding/parallel → infrastructure-ci-cd/parallel-sharding.md269│ ├─ Reporting/artifacts → infrastructure-ci-cd/reporting.md270│ ├─ Global setup/teardown → core/global-setup.md271│ ├─ Project dependencies → core/projects-dependencies.md272│ ├─ Test performance → infrastructure-ci-cd/performance.md273│ ├─ Test coverage → infrastructure-ci-cd/test-coverage.md274│ └─ Project config → core/configuration.md, core/projects-dependencies.md275│276├─ Organizing tests?277│ ├─ Skip/fixme/slow tests → core/annotations.md278│ ├─ Test tags (@smoke, @fast) → core/test-tags.md279│ ├─ Filtering tests (--grep) → core/test-tags.md280│ ├─ Test steps → core/annotations.md281│ └─ Conditional execution → core/annotations.md282│283└─ Running subset of tests?284 ├─ By tag (@smoke, @critical) → core/test-tags.md285 ├─ Exclude slow/flaky tests → core/test-tags.md286 ├─ PR vs nightly tests → core/test-tags.md, infrastructure-ci-cd/ci-cd.md287 └─ Project-specific filtering → core/test-tags.md, core/configuration.md288```289290## Test Validation Loop291292After writing or modifying tests:2932941. **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 assertions298 - Re-run tests2993. **Only proceed when all tests pass**3004. **Run multiple times** for critical tests: `npx playwright test --repeat-each=5`
yigityildiz0