1```
2 
3░█▀█░█░░░█▀█░█░█░█░█░█▀▄░▀█▀░█▀▀░█░█░▀█▀░░░█▀▄░█▀▀░█▀▀░▀█▀░░░█▀█░█▀▄░█▀█░█▀▀░▀█▀░▀█▀░█▀▀░█▀▀░█▀▀░
4░█▀▀░█░░░█▀█░░█░░█▄█░█▀▄░░█░░█░█░█▀█░░█░░░░█▀▄░█▀▀░▀▀█░░█░░░░█▀▀░█▀▄░█▀█░█░░░░█░░░█░░█░░░█▀▀░▀▀█░
5░▀░░░▀▀▀░▀░▀░░▀░░▀░▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░░░▀▀░░▀▀▀░▀▀▀░░▀░░░░▀░░░▀░▀░▀░▀░▀▀▀░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀▀░
6```
7<img src="https://currents.dev/favicon-96x96.png" width="24" height="24" align="left" />by [currents.dev](https://currents.dev?utm_source=ai-skill) - The all-in-one Dashboard for Playwright Testing.
8 
9# Playwright Best Practices Skill
10 
11A skill that gives the AI specialized guidance for writing, debugging, and maintaining **Playwright** tests in **TypeScript**. Use it in any repo where you work with Playwright so the assistant follows best practices for E2E, component, API, visual regression, accessibility, security, i18n, Electron, and browser extension testing.
12 
13## Installation
14 
15```bash
16npx skills add https://github.com/currents-dev/playwright-best-practices-skill
17```
18 
19The skill is activity-based: the AI is directed to the right reference depending on what you're doing, so you get focused advice without loading everything at once.
20 
21## When the Skill Is Used
22 
23The skill triggers when the AI infers you need help with things like:
24 
25- Writing new E2E, component, API, visual regression, or accessibility tests
26- Testing mobile/responsive layouts, touch gestures, or device emulation
27- Implementing file uploads/downloads, date/time mocking, or WebSocket testing
28- Handling OAuth popups, geolocation, permissions, or multi-tab flows
29- Testing iframes, canvas/WebGL, service workers, or PWA features
30- Testing Electron desktop apps or browser extensions
31- Internationalization (i18n), locales, RTL layouts, or date/number formats
32- Testing error states, offline mode, or network failure scenarios
33- Security testing (XSS, CSRF, authentication, authorization)
34- Performance testing with Web Vitals or Lighthouse
35- Reviewing or refactoring Playwright test code
36- Fixing flaky tests or debugging failures
37- Setting up CI/CD, test coverage, or global setup/teardown
38- Configuring projects, dependencies, parallel runs, or sharding
39 
40You don't have to mention "skill" or "Playwright best practices"; describe your task (e.g. "fix this flaky login test" or "add accessibility tests") and the AI will use the skill when it's relevant.
41 
42## What's Inside
43 
44**57 reference documents** organized into 8 categories:
45 
46### Core (`core/`)
47 
48| Topic                | Reference                   | Use for                                          |
49| -------------------- | --------------------------- | ------------------------------------------------ |
50| Test structure       | `test-suite-structure.md`   | Structure, config, E2E/component/API/visual tests |
51| Locators             | `locators.md`               | Selectors, robustness, avoiding brittle locators |
52| Assertions & waiting | `assertions-waiting.md`     | Expect APIs, auto-waiting, polling               |
53| Page Object Model    | `page-object-model.md`      | POM structure and patterns                       |
54| Fixtures & hooks     | `fixtures-hooks.md`         | Setup, teardown, auth, custom fixtures           |
55| Test data            | `test-data.md`              | Factories, Faker, data-driven testing            |
56| Annotations          | `annotations.md`            | skip, fixme, slow, test steps                    |
57| Configuration        | `configuration.md`          | playwright.config.ts options                     |
58| Global setup         | `global-setup.md`           | globalSetup/Teardown, DB migrations              |
59| Projects             | `projects-dependencies.md`  | Project config, dependencies, filtering          |
60 
61### Debugging (`debugging/`)
62 
63| Topic          | Reference            | Use for                                    |
64| -------------- | -------------------- | ------------------------------------------ |
65| Debugging      | `debugging.md`       | Trace viewer, inspector, common issues     |
66| Flaky tests    | `flaky-tests.md`     | Detection, diagnosis, fixing, quarantine   |
67| Error testing  | `error-testing.md`   | Error boundaries, offline, network failures |
68| Console errors | `console-errors.md`  | Capturing and failing on JS errors         |
69 
70### Testing Patterns (`testing-patterns/`)
71 
72| Topic               | Reference                 | Use for                                        |
73| ------------------- | ------------------------- | ---------------------------------------------- |
74| Accessibility       | `accessibility.md`        | Axe-core, keyboard nav, ARIA, focus management |
75| API testing         | `api-testing.md`          | REST API testing, request context              |
76| Component testing   | `component-testing.md`    | CT setup, mounting, props, mocking             |
77| Visual regression   | `visual-regression.md`    | Screenshot comparison, thresholds              |
78| File operations     | `file-operations.md`      | Upload, download basics                        |
79| File upload/download| `file-upload-download.md` | Progress, cancellation, retry patterns         |
80| Forms validation    | `forms-validation.md`     | Form testing, validation states                |
81| Drag and drop       | `drag-drop.md`            | Drag-and-drop interactions                     |
82| GraphQL testing     | `graphql-testing.md`      | GraphQL queries, mutations, mocking            |
83| Canvas/WebGL        | `canvas-webgl.md`         | Canvas testing, charts, WebGL, games           |
84| i18n                | `i18n.md`                 | Locales, RTL, date/number formats              |
85| Electron            | `electron.md`             | Desktop apps, IPC, main/renderer process       |
86| Browser extensions  | `browser-extensions.md`   | Popup, background, content scripts, APIs       |
87| Security testing    | `security-testing.md`     | XSS, CSRF, auth security, authorization        |
88| Performance testing | `performance-testing.md`  | Web Vitals, budgets, Lighthouse                |
89 
90### Advanced (`advanced/`)
91 
92| Topic            | Reference               | Use for                                     |
93| ---------------- | ----------------------- | ------------------------------------------- |
94| Authentication   | `authentication.md`     | Login flows, session storage, cookies       |
95| Auth flows       | `authentication-flows.md` | MFA, password reset, complex auth         |
96| Mobile testing   | `mobile-testing.md`     | Device emulation, touch gestures, viewports |
97| Clock mocking    | `clock-mocking.md`      | Date/time mocking, timezones, timers        |
98| Multi-context    | `multi-context.md`      | Popups, new tabs, OAuth flows               |
99| Multi-user       | `multi-user.md`         | Collaboration, RBAC, concurrent actions     |
100| Network advanced | `network-advanced.md`   | GraphQL, HAR, request modification          |
101| Third-party      | `third-party.md`        | OAuth, payments, email/SMS mocking          |
102 
103### Browser APIs (`browser-apis/`)
104 
105| Topic           | Reference            | Use for                                     |
106| --------------- | -------------------- | ------------------------------------------- |
107| Browser APIs    | `browser-apis.md`    | Geolocation, permissions, clipboard, camera |
108| WebSockets      | `websockets.md`      | Real-time testing, SSE, reconnection        |
109| iFrames         | `iframes.md`         | Cross-origin, nested, dynamic iframes       |
110| Service workers | `service-workers.md` | PWA, caching, offline, push notifications   |
111 
112### Architecture (`architecture/`)
113 
114| Topic             | Reference              | Use for                              |
115| ----------------- | ---------------------- | ------------------------------------ |
116| POM vs fixtures   | `pom-vs-fixtures.md`   | Choosing between patterns            |
117| Test architecture | `test-architecture.md` | Test type selection, structure       |
118| When to mock      | `when-to-mock.md`      | Mock vs real services decisions      |
119 
120### Frameworks (`frameworks/`)
121 
122| Topic   | Reference     | Use for                        |
123| ------- | ------------- | ------------------------------ |
124| React   | `react.md`    | React-specific testing patterns |
125| Angular | `angular.md`  | Angular-specific testing        |
126| Vue     | `vue.md`      | Vue/Nuxt testing patterns       |
127| Next.js | `nextjs.md`   | Next.js SSR/SSG testing         |
128 
129### Infrastructure & CI/CD (`infrastructure-ci-cd/`)
130 
131| Topic            | Reference              | Use for                              |
132| ---------------- | ---------------------- | ------------------------------------ |
133| CI/CD            | `ci-cd.md`             | Pipelines, general CI setup          |
134| GitHub Actions   | `github-actions.md`    | GitHub-specific workflows            |
135| GitLab CI        | `gitlab.md`            | GitLab-specific pipelines            |
136| Other providers  | `other-providers.md`   | CircleCI, Azure DevOps, Jenkins      |
137| Docker           | `docker.md`            | Container setup, Playwright images   |
138| Parallel/sharding| `parallel-sharding.md` | Sharding, parallel execution         |
139| Performance      | `performance.md`       | Parallel runs, optimization          |
140| Reporting        | `reporting.md`         | Test reporters, artifacts            |
141| Test coverage    | `test-coverage.md`     | V8 coverage, reports, thresholds, CI |
142 
143The skill's `SKILL.md` maps your current activity to these references so the right content is used in context.
144 
145## License
146 
147MIT
148