This skill offers best practices and comprehensive guidance for developing, debugging, and maintaining Playwright test suites across various testing scenarios, including end-to-end, component, API, and visual regression tests. It covers key capabilities such as structuring tests with the Page Object Model, handling authentication, testing mobile responsiveness, real-time APIs, and troubleshooting flaky tests. It is ideal for testers, developers, and QA professionals looking to optimize their Playwright testing workflows.

npx skills add https://github.com/currents-dev/playwright-best-practices-skill --skill playwright-best-practices

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:

  1. Run tests: npx playwright test --reporter=list
  2. If tests fail:
    • Review error output and trace (npx playwright show-trace)
    • Fix locators, waits, or assertions
    • Re-run tests
  3. Only proceed when all tests pass
  4. Run multiple times for critical tests: npx playwright test --repeat-each=5

GitHub Owner

Owner: currents-dev

Files

test-suite-structure.md

locators.md

assertions-waiting.md

component-testing.md

test-suite-structure.md

api-testing.md

test-suite-structure.md

graphql-testing.md

api-testing.md

visual-regression.md

canvas-webgl.md

page-object-model.md

test-suite-structure.md

fixtures-hooks.md

test-data.md

authentication.md

authentication-flows.md

clock-mocking.md

file-operations.md

file-upload-download.md

forms-validation.md

drag-drop.md

accessibility.md

security-testing.md

annotations.md

test-tags.md

iframes.md

canvas-webgl.md

i18n.md

electron.md

browser-extensions.md

mobile-testing.md

mobile-testing.md

mobile-testing.md

mobile-testing.md

locators.md

websockets.md

browser-apis.md

browser-apis.md

browser-apis.md

browser-apis.md

multi-context.md

third-party.md

multi-context.md

debugging.md

assertions-waiting.md

flaky-tests.md

debugging.md

assertions-waiting.md

flaky-tests.md

performance.md

fixtures-hooks.md

flaky-tests.md

fixtures-hooks.md

performance.md

locators.md

debugging.md

assertions-waiting.md

debugging.md

debugging.md

flaky-tests.md

debugging.md

assertions-waiting.md

console-errors.md

debugging.md

error-testing.md

error-testing.md

network-advanced.md

error-testing.md

service-workers.md

service-workers.md

error-testing.md

error-testing.md

multi-user.md

multi-user.md

websockets.md

multi-user.md

multi-user.md

pom-vs-fixtures.md

test-architecture.md

when-to-mock.md

test-suite-structure.md

react.md

angular.md

vue.md

nextjs.md

page-object-model.md

test-suite-structure.md

test-suite-structure.md

page-object-model.md

fixtures-hooks.md

locators.md

assertions-waiting.md

test-data.md

configuration.md

configuration.md

projects-dependencies.md

ci-cd.md

github-actions.md

github-actions.md

gitlab.md

other-providers.md

docker.md

global-setup.md

projects-dependencies.md

performance.md

test-suite-structure.md

parallel-sharding.md

performance.md

fixtures-hooks.md

performance.md

test-coverage.md

reporting.md

test-suite-structure.md

network-advanced.md

network-advanced.md

assertions-waiting.md

network-advanced.md

network-advanced.md

fixtures-hooks.md

assertions-waiting.md

third-party.md

multi-context.md

third-party.md

third-party.md

console-errors.md

security-testing.md

performance-testing.md

performance-testing.md

annotations.md

test-tags.md

annotations.md

SKILL.md


name: playwright-best-practices description: 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. license: MIT metadata: author: currents.dev version: "1.1"

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

ActivityReference Files
Writing E2E teststest-suite-structure.md, locators.md, assertions-waiting.md
Writing component testscomponent-testing.md, test-suite-structure.md
Writing API testsapi-testing.md, test-suite-structure.md
Writing GraphQL testsgraphql-testing.md, api-testing.md
Writing visual regression testsvisual-regression.md, canvas-webgl.md
Structuring test code with POMpage-object-model.md, test-suite-structure.md
Setting up test data/fixturesfixtures-hooks.md, test-data.md
Handling authenticationauthentication.md, authentication-flows.md
Testing date/time featuresclock-mocking.md
Testing file upload/downloadfile-operations.md, file-upload-download.md
Testing forms/validationforms-validation.md
Testing drag and dropdrag-drop.md
Testing accessibilityaccessibility.md
Testing security (XSS, CSRF)security-testing.md
Using test annotationsannotations.md
Using test tagstest-tags.md
Testing iframesiframes.md
Testing canvas/WebGLcanvas-webgl.md
Internationalization (i18n)i18n.md
Testing Electron appselectron.md
Testing browser extensionsbrowser-extensions.md

Mobile & Responsive Testing

When to use: Testing mobile devices, touch interactions, responsive layouts

ActivityReference Files
Device emulationmobile-testing.md
Touch gestures (swipe, tap)mobile-testing.md
Viewport/breakpoint testingmobile-testing.md
Mobile-specific UImobile-testing.md, locators.md

Real-Time & Browser APIs

When to use: Testing WebSockets, geolocation, permissions, multi-tab flows

ActivityReference Files
WebSocket/real-time testingwebsockets.md
Geolocation mockingbrowser-apis.md
Permission handlingbrowser-apis.md
Clipboard testingbrowser-apis.md
Camera/microphone mockingbrowser-apis.md
Multi-tab/popup flowsmulti-context.md
OAuth popup handlingthird-party.md, multi-context.md

Debugging & Troubleshooting

When to use: Test failures, element not found, timeouts, unexpected behavior

ActivityReference Files
Debugging test failuresdebugging.md, assertions-waiting.md
Fixing flaky testsflaky-tests.md, debugging.md, assertions-waiting.md
Debugging flaky parallel runsflaky-tests.md, performance.md, fixtures-hooks.md
Ensuring test isolation / avoiding state leakflaky-tests.md, fixtures-hooks.md, performance.md
Fixing selector issueslocators.md, debugging.md
Investigating timeout issuesassertions-waiting.md, debugging.md
Using trace viewerdebugging.md
Debugging race conditionsflaky-tests.md, debugging.md, assertions-waiting.md
Debugging console/JS errorsconsole-errors.md, debugging.md

Error & Edge Case Testing

When to use: Testing error states, offline mode, network failures, validation

ActivityReference Files
Error boundary testingerror-testing.md
Network failure simulationerror-testing.md, network-advanced.md
Offline mode testingerror-testing.md, service-workers.md
Service worker testingservice-workers.md
Loading state testingerror-testing.md
Form validation testingerror-testing.md

Multi-User & Collaboration Testing

When to use: Testing features involving multiple users, roles, or real-time collaboration

ActivityReference Files
Multiple users in one testmulti-user.md
Real-time collaborationmulti-user.md, websockets.md
Role-based access testingmulti-user.md
Concurrent action testingmulti-user.md

Architecture Decisions

When to use: Choosing test patterns, deciding between approaches, planning test architecture

ActivityReference Files
POM vs fixtures decisionpom-vs-fixtures.md
Test type selectiontest-architecture.md
Mock vs real serviceswhen-to-mock.md
Test suite structuretest-suite-structure.md

Framework-Specific Testing

When to use: Testing React, Angular, Vue, or Next.js applications

ActivityReference Files
Testing React appsreact.md
Testing Angular appsangular.md
Testing Vue/Nuxt appsvue.md
Testing Next.js appsnextjs.md

Refactoring & Maintenance

When to use: Improving existing tests, code review, reducing duplication

ActivityReference Files
Refactoring to Page Object Modelpage-object-model.md, test-suite-structure.md
Improving test organizationtest-suite-structure.md, page-object-model.md
Extracting common setup/teardownfixtures-hooks.md
Replacing brittle selectorslocators.md
Removing explicit waitsassertions-waiting.md
Creating test data factoriestest-data.md
Configuration setupconfiguration.md

Infrastructure & Configuration

When to use: Setting up projects, configuring CI/CD, optimizing performance

ActivityReference Files
Configuring Playwright projectconfiguration.md, projects-dependencies.md
Setting up CI/CD pipelinesci-cd.md, github-actions.md
GitHub Actions setupgithub-actions.md
GitLab CI setupgitlab.md
Other CI providersother-providers.md
Docker/container setupdocker.md
Global setup & teardownglobal-setup.md
Project dependenciesprojects-dependencies.md
Optimizing test performanceperformance.md, test-suite-structure.md
Configuring parallel executionparallel-sharding.md, performance.md
Isolating test data between workersfixtures-hooks.md, performance.md
Test coveragetest-coverage.md
Test reporting/artifactsreporting.md

Advanced Patterns

When to use: Complex scenarios, API mocking, network interception

ActivityReference Files
Mocking API responsestest-suite-structure.md, network-advanced.md
Network interceptionnetwork-advanced.md, assertions-waiting.md
GraphQL mockingnetwork-advanced.md
HAR recording/playbacknetwork-advanced.md
Custom fixturesfixtures-hooks.md
Advanced waiting strategiesassertions-waiting.md
OAuth/SSO mockingthird-party.md, multi-context.md
Payment gateway mockingthird-party.md
Email/SMS verification mockingthird-party.md
Failing on console errorsconsole-errors.md
Security testing (XSS, CSRF)security-testing.md
Performance budgets & Web Vitalsperformance-testing.md
Lighthouse integrationperformance-testing.md
Test annotations (skip, fixme)annotations.md
Test tags (@smoke, @fast)test-tags.md
Test steps for reportingannotations.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:

  1. Run tests: npx playwright test --reporter=list
  2. If tests fail:
    • Review error output and trace (npx playwright show-trace)
    • Fix locators, waits, or assertions
    • Re-run tests
  3. Only proceed when all tests pass
  4. Run multiple times for critical tests: npx playwright test --repeat-each=5

More skills