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-organization.md](references/test-organization.md), [locators.md](references/locators.md), [assertions-waiting.md](references/assertions-waiting.md) | | **Writing component tests** | [component-testing.md](references/component-testing.md), [test-organization.md](references/test-organization.md) | | **Writing API tests** | [test-organization.md](references/test-organization.md), [assertions-waiting.md](references/assertions-waiting.md) | | **Writing visual regression tests** | [test-organization.md](references/test-organization.md), [canvas-webgl.md](references/canvas-webgl.md) | | **Structuring test code with POM** | [page-object-model.md](references/page-object-model.md), [test-organization.md](references/test-organization.md) | | **Setting up test data/fixtures** | [fixtures-hooks.md](references/fixtures-hooks.md), [test-data.md](references/test-data.md) | | **Handling authentication** | [fixtures-hooks.md](references/fixtures-hooks.md), [third-party.md](references/third-party.md) | | **Testing date/time features** | [clock-mocking.md](references/clock-mocking.md) | | **Testing file upload/download** | [file-operations.md](references/file-operations.md) | | **Testing accessibility** | [accessibility.md](references/accessibility.md) | | **Testing security (XSS, CSRF)** | [security-testing.md](references/security-testing.md) | | **Using test annotations** | [annotations.md](references/annotations.md) | | **Testing iframes** | [iframes.md](references/iframes.md) | | **Testing canvas/WebGL** | [canvas-webgl.md](references/canvas-webgl.md) | | **Internationalization (i18n)** | [i18n.md](references/i18n.md) | | **Testing Electron apps** | [electron.md](references/electron.md) | | **Testing browser extensions** | [browser-extensions.md](references/browser-extensions.md) | ### Mobile & Responsive Testing **When to use**: Testing mobile devices, touch interactions, responsive layouts | Activity | Reference Files | | ------------------------------- | ---------------------------------------------------------------------------------------- | | **Device emulation** | [mobile-testing.md](references/mobile-testing.md) | | **Touch gestures (swipe, tap)** | [mobile-testing.md](references/mobile-testing.md) | | **Viewport/breakpoint testing** | [mobile-testing.md](references/mobile-testing.md) | | **Mobile-specific UI** | [mobile-testing.md](references/mobile-testing.md), [locators.md](references/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](references/websockets.md) | | **Geolocation mocking** | [browser-apis.md](references/browser-apis.md) | | **Permission handling** | [browser-apis.md](references/browser-apis.md) | | **Clipboard testing** | [browser-apis.md](references/browser-apis.md) | | **Camera/microphone mocking** | [browser-apis.md](references/browser-apis.md) | | **Multi-tab/popup flows** | [multi-context.md](references/multi-context.md) | | **OAuth popup handling** | [third-party.md](references/third-party.md), [multi-context.md](references/multi-context.md) | ### Debugging & Troubleshooting **When to use**: Test failures, element not found, timeouts, unexpected behavior | Activity | Reference Files | | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | **Debugging test failures** | [debugging.md](references/debugging.md), [assertions-waiting.md](references/assertions-waiting.md) | | **Fixing flaky tests** | [flaky-tests.md](references/flaky-tests.md), [debugging.md](references/debugging.md), [assertions-waiting.md](references/assertions-waiting.md) | | **Debugging flaky parallel runs** | [flaky-tests.md](references/flaky-tests.md), [performance.md](references/performance.md), [fixtures-hooks.md](references/fixtures-hooks.md) | | **Ensuring test isolation / avoiding state leak** | [flaky-tests.md](references/flaky-tests.md), [fixtures-hooks.md](references/fixtures-hooks.md), [performance.md](references/performance.md) | | **Fixing selector issues** | [locators.md](references/locators.md), [debugging.md](references/debugging.md) | | **Investigating timeout issues** | [assertions-waiting.md](references/assertions-waiting.md), [debugging.md](references/debugging.md) | | **Using trace viewer** | [debugging.md](references/debugging.md) | | **Debugging race conditions** | [flaky-tests.md](references/flaky-tests.md), [debugging.md](references/debugging.md), [assertions-waiting.md](references/assertions-waiting.md) | | **Debugging console/JS errors** | [console-errors.md](references/console-errors.md), [debugging.md](references/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](references/error-testing.md) | | **Network failure simulation** | [error-testing.md](references/error-testing.md), [network-advanced.md](references/network-advanced.md) | | **Offline mode testing** | [error-testing.md](references/error-testing.md), [service-workers.md](references/service-workers.md) | | **Service worker testing** | [service-workers.md](references/service-workers.md) | | **Loading state testing** | [error-testing.md](references/error-testing.md) | | **Form validation testing** | [error-testing.md](references/error-testing.md) | ### Multi-User & Collaboration Testing **When to use**: Testing features involving multiple users, roles, or real-time collaboration | Activity | Reference Files | | ------------------------------ | ------------------------------------------------------------------------------------ |