playwright-best-practices

Name: playwright-best-practices
Author: currents-dev

bycurrents-dev· 1 skill

Installs

66k

Stars

340

Forks

How to install playwright-best-practices?

currents-dev/playwright-best-practices-skill/playwright-best-practices

$npx -y skills add currents-dev/playwright-best-practices-skill --skill playwright-best-practices

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/currents-dev/playwright-best-practices-skill" --skill "currents-dev/playwright-best-practices-skill/playwright-best-practices"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/currents-dev/playwright-best-practices-skill" that are relevant to the current task. Run `npx skills add "https://github.com/currents-dev/playwright-best-practices-skill"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Playwright Best Practices
2
3	This skill provides comprehensive guidance for all aspects of Playwright test development, from writing new tests to debugging and maintaining existing test suites.
4
5	## Activity-Based Reference Guide
6
7	Consult these references based on what you're doing:
8
9	### Writing New Tests
10
11	When to use: Creating new test files, writing test cases, implementing test scenarios
12
13	\| Activity \| Reference Files \|
14	\| ----------------------------------- \| --------------------------------------------------------------------------------------------------------------------------------------------- \|
15	\| Writing E2E tests \| [test-suite-structure.md](core/test-suite-structure.md), [locators.md](core/locators.md), [assertions-waiting.md](core/assertions-waiting.md) \|
16	\| Writing component tests \| [component-testing.md](testing-patterns/component-testing.md), [test-suite-structure.md](core/test-suite-structure.md) \|
17	\| Writing API tests \| [api-testing.md](testing-patterns/api-testing.md), [test-suite-structure.md](core/test-suite-structure.md) \|
18	\| Writing GraphQL tests \| [graphql-testing.md](testing-patterns/graphql-testing.md), [api-testing.md](testing-patterns/api-testing.md) \|
19	\| Writing visual regression tests \| [visual-regression.md](testing-patterns/visual-regression.md), [canvas-webgl.md](testing-patterns/canvas-webgl.md) \|
20	\| Structuring test code with POM \| [page-object-model.md](core/page-object-model.md), [test-suite-structure.md](core/test-suite-structure.md) \|
21	\| Setting up test data/fixtures \| [fixtures-hooks.md](core/fixtures-hooks.md), [test-data.md](core/test-data.md) \|
22	\| Handling authentication \| [authentication.md](advanced/authentication.md), [authentication-flows.md](advanced/authentication-flows.md) \|
23	\| Testing date/time features \| [clock-mocking.md](advanced/clock-mocking.md) \|
24	\| Testing file upload/download \| [file-operations.md](testing-patterns/file-operations.md), [file-upload-download.md](testing-patterns/file-upload-download.md) \|
25	\| Testing forms/validation \| [forms-validation.md](testing-patterns/forms-validation.md) \|
26	\| Testing drag and drop \| [drag-drop.md](testing-patterns/drag-drop.md) \|
27	\| Testing accessibility \| [accessibility.md](testing-patterns/accessibility.md) \|
28	\| Testing security (XSS, CSRF) \| [security-testing.md](testing-patterns/security-testing.md) \|
29	\| Using test annotations \| [annotations.md](core/annotations.md) \|
30	\| Using test tags \| [test-tags.md](core/test-tags.md) \|
31	\| Testing iframes \| [iframes.md](browser-apis/iframes.md) \|
32	\| Testing canvas/WebGL \| [canvas-webgl.md](testing-patterns/canvas-webgl.md) \|
33	\| Internationalization (i18n) \| [i18n.md](testing-patterns/i18n.md) \|
34	\| Testing Electron apps \| [electron.md](testing-patterns/electron.md) \|
35	\| Testing browser extensions \| [browser-extensions.md](testing-patterns/browser-extensions.md) \|
36
37	### Mobile & Responsive Testing
38
39	When to use: Testing mobile devices, touch interactions, responsive layouts
40
41	\| Activity \| Reference Files \|
42	\| ------------------------------- \| -------------------------------------------------------------------------------- \|
43	\| Device emulation \| [mobile-testing.md](advanced/mobile-testing.md) \|
44	\| Touch gestures (swipe, tap) \| [mobile-testing.md](advanced/mobile-testing.md) \|
45	\| Viewport/breakpoint testing \| [mobile-testing.md](advanced/mobile-testing.md) \|
46	\| Mobile-specific UI \| [mobile-testing.md](advanced/mobile-testing.md), [locators.md](core/locators.md) \|
47
48	### Real-Time & Browser APIs
49
50	When to use: Testing WebSockets, geolocation, permissions, multi-tab flows
51
52	\| Activity \| Reference Files \|
53	\| ------------------------------- \| ---------------------------------------------------------------------------------------- \|
54	\| WebSocket/real-time testing \| [websockets.md](browser-apis/websockets.md) \|
55	\| Geolocation mocking \| [browser-apis.md](browser-apis/browser-apis.md) \|
56	\| Permission handling \| [browser-apis.md](browser-apis/browser-apis.md) \|
57	\| Clipboard testing \| [browser-apis.md](browser-apis/browser-apis.md) \|
58	\| Camera/microphone mocking \| [browser-apis.md](browser-apis/browser-apis.md) \|
59	\| Multi-tab/popup flows \| [multi-context.md](advanced/multi-context.md) \|
60	\| OAuth popup handling \| [third-party.md](advanced/third-party.md), [multi-context.md](advanced/multi-context.md) \|
61
62	### Debugging & Troubleshooting
63
64	When to use: Test failures, element not found, timeouts, unexpected behavior
65
66	\| Activity \| Reference Files \|
67	\| ------------------------------------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------- \|
68	\| Debugging test failures \| [debugging.md](debugging/debugging.md), [assertions-waiting.md](core/assertions-waiting.md) \|
69	\| Fixing flaky tests \| [flaky-tests.md](debugging/flaky-tests.md), [debugging.md](debugging/debugging.md), [assertions-waiting.md](core/assertions-waiting.md) \|
70	\| 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) \|
71	\| 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) \|
72	\| Fixing selector issues \| [locators.md](core/locators.md), [debugging.md](debugging/debugging.md) \|
73	\| Investigating timeout issues \| [assertions-waiting.md](core/assertions-waiting.md), [debugging.md](debugging/debugging.md) \|
74	\| Using trace viewer \| [debugging.md](debugging/debugging.md) \|
75	\| Debugging race conditions \| [flaky-tests.md](debugging/flaky-tests.md), [debugging.md](debugging/debugging.md), [assertions-waiting.md](core/assertions-waiting.md) \|
76	\| Debugging console/JS errors \| [console-errors.md](debugging/console-errors.md), [debugging.md](debugging/debugging.md) \|
77
78	### Error & Edge Case Testing
79
80	When to use: Testing error states, offline mode, network failures, validation
81
82	\| Activity \| Reference Files \|
83	\| ------------------------------ \| ----------------------------------------------------------------------------------------------------- \|
84	\| Error boundary testing \| [error-testing.md](debugging/error-testing.md) \|
85	\| Network failure simulation \| [error-testing.md](debugging/error-testing.md), [network-advanced.md](advanced/network-advanced.md) \|
86	\| Offline mode testing \| [error-testing.md](debugging/error-testing.md), [service-workers.md](browser-apis/service-workers.md) \|
87	\| Service worker testing \| [service-workers.md](browser-apis/service-workers.md) \|
88	\| Loading state testing \| [error-testing.md](debugging/error-testing.md) \|
89	\| Form validation testing \| [error-testing.md](debugging/error-testing.md) \|
90
91	### Multi-User & Collaboration Testing
92
93	When to use: Testing features involving multiple users, roles, or real-time collaboration
94
95	\| Activity \| Reference Files \|
96	\| ------------------------------ \| ------------------------------------------------------------------------------------ \|
97	\| Multiple users in one test \| [multi-user.md](advanced/multi-user.md) \|
98	\| Real-time collaboration \| [multi-user.md](advanced/multi-user.md), [websockets.md](browser-apis/websockets.md) \|
99	\| Role-based access testing \| [multi-user.md](advanced/multi-user.md) \|
100	\| Concurrent action testing \| [multi-user.md](advanced/multi-user.md) \|
101
102	### Architecture Decisions
103
104	When to use: Choosing test patterns, deciding between approaches, planning test architecture
105
106	\| Activity \| Reference Files \|
107	\| ---------------------------- \| --------------------------------------------------------- \|
108	\| POM vs fixtures decision \| [pom-vs-fixtures.md](architecture/pom-vs-fixtures.md) \|
109	\| Test type selection \| [test-architecture.md](architecture/test-architecture.md) \|
110	\| Mock vs real services \| [when-to-mock.md](architecture/when-to-mock.md) \|
111	\| Test suite structure \| [test-suite-structure.md](core/test-suite-structure.md) \|
112
113	### Framework-Specific Testing
114
115	When to use: Testing React, Angular, Vue, or Next.js applications
116
117	\| Activity \| Reference Files \|
118	\| ------------------------- \| ----------------------------------- \|
119	\| Testing React apps \| [react.md](frameworks/react.md) \|
120	\| Testing Angular apps \| [angular.md](frameworks/angular.md) \|
121	\| Testing Vue/Nuxt apps \| [vue.md](frameworks/vue.md) \|
122	\| Testing Next.js apps \| [nextjs.md](frameworks/nextjs.md) \|
123
124	### Refactoring & Maintenance
125
126	When to use: Improving existing tests, code review, reducing duplication
127
128	\| Activity \| Reference Files \|
129	\| ------------------------------------ \| ---------------------------------------------------------------------------------------------------------- \|
130	\| Refactoring to Page Object Model \| [page-object-model.md](core/page-object-model.md), [test-suite-structure.md](core/test-suite-structure.md) \|
131	\| Improving test organization \| [test-suite-structure.md](core/test-suite-structure.md), [page-object-model.md](core/page-object-model.md) \|
132	\| Extracting common setup/teardown \| [fixtures-hooks.md](core/fixtures-hooks.md) \|
133	\| Replacing brittle selectors \| [locators.md](core/locators.md) \|
134	\| Removing explicit waits \| [assertions-waiting.md](core/assertions-waiting.md) \|
135	\| Creating test data factories \| [test-data.md](core/test-data.md) \|
136	\| Configuration setup \| [configuration.md](core/configuration.md) \|
137
138	### Infrastructure & Configuration
139
140	When to use: Setting up projects, configuring CI/CD, optimizing performance
141
142	\| Activity \| Reference Files \|
143	\| --------------------------------------- \| ------------------------------------------------------------------------------------------------------------------------ \|
144	\| Configuring Playwright project \| [configuration.md](core/configuration.md), [projects-dependencies.md](core/projects-dependencies.md) \|
145	\| Setting up CI/CD pipelines \| [ci-cd.md](infrastructure-ci-cd/ci-cd.md), [github-actions.md](infrastructure-ci-cd/github-actions.md) \|
146	\| GitHub Actions setup \| [github-actions.md](infrastructure-ci-cd/github-actions.md) \|
147	\| GitLab CI setup \| [gitlab.md](infrastructure-ci-cd/gitlab.md) \|
148	\| Other CI providers \| [other-providers.md](infrastructure-ci-cd/other-providers.md) \|
149	\| Docker/container setup \| [docker.md](infrastructure-ci-cd/docker.md) \|
150	\| Global setup & teardown \| [global-setup.md](core/global-setup.md) \|
151	\| Project dependencies \| [projects-dependencies.md](core/projects-dependencies.md) \|
152	\| Optimizing test performance \| [performance.md](infrastructure-ci-cd/performance.md), [test-suite-structure.md](core/test-suite-structure.md) \|
153	\| Configuring parallel execution \| [parallel-sharding.md](infrastructure-ci-cd/parallel-sharding.md), [performance.md](infrastructure-ci-cd/performance.md) \|
154	\| Isolating test data between workers \| [fixtures-hooks.md](core/fixtures-hooks.md), [performance.md](infrastructure-ci-cd/performance.md) \|
155	\| Test coverage \| [test-coverage.md](infrastructure-ci-cd/test-coverage.md) \|
156	\| Test reporting/artifacts \| [reporting.md](infrastructure-ci-cd/reporting.md) \|
157
158	### Advanced Patterns
159
160	When to use: Complex scenarios, API mocking, network interception
161
162	\| Activity \| Reference Files \|
163	\| ------------------------------------ \| ------------------------------------------------------------------------------------------------------------ \|
164	\| Mocking API responses \| [test-suite-structure.md](core/test-suite-structure.md), [network-advanced.md](advanced/network-advanced.md) \|
165	\| Network interception \| [network-advanced.md](advanced/network-advanced.md), [assertions-waiting.md](core/assertions-waiting.md) \|
166	\| GraphQL mocking \| [network-advanced.md](advanced/network-advanced.md) \|
167	\| HAR recording/playback \| [network-advanced.md](advanced/network-advanced.md) \|
168	\| Custom fixtures \| [fixtures-hooks.md](core/fixtures-hooks.md) \|
169	\| Advanced waiting strategies \| [assertions-waiting.md](core/assertions-waiting.md) \|
170	\| OAuth/SSO mocking \| [third-party.md](advanced/third-party.md), [multi-context.md](advanced/multi-context.md) \|
171	\| Payment gateway mocking \| [third-party.md](advanced/third-party.md) \|
172	\| Email/SMS verification mocking \| [third-party.md](advanced/third-party.md) \|
173	\| Failing on console errors \| [console-errors.md](debugging/console-errors.md) \|
174	\| Security testing (XSS, CSRF) \| [security-testing.md](testing-patterns/security-testing.md) \|
175	\| Performance budgets & Web Vitals \| [performance-testing.md](testing-patterns/performance-testing.md) \|
176	\| Lighthouse integration \| [performance-testing.md](testing-patterns/performance-testing.md) \|
177	\| Test annotations (skip, fixme) \| [annotations.md](core/annotations.md)

6 picks

Type

Run `npx skills use "https://github.com/currents-dev/playwright-best-practices-skill" --skill "currents-dev/playwright-best-practices-skill/playwright-best-practices"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/currents-dev/playwright-best-practices-skill" that are relevant to the current task. Run `npx skills add "https://github.com/currents-dev/playwright-best-practices-skill"` and select the relevant skills, then follow their instructions.

playwright-best-practices

How to install playwright-best-practices?

Related

playwright-best-practices

How to install playwright-best-practices?

Related