currents-dev / playwright-best-practices-skill
★ 328A skill package that teaches your agent 1 capability — every one documented and browsable below, no GitHub required · by currents-dev.
Each skill below is one capability this package teaches your agent. Install the whole package, or open a skill to install just that one.
░█▀█░█░░░█▀█░█░█░█░█░█▀▄░▀█▀░█▀▀░█░█░▀█▀░░░█▀▄░█▀▀░█▀▀░▀█▀░░░█▀█░█▀▄░█▀█░█▀▀░▀█▀░▀█▀░█▀▀░█▀▀░█▀▀░
░█▀▀░█░░░█▀█░░█░░█▄█░█▀▄░░█░░█░█░█▀█░░█░░░░█▀▄░█▀▀░▀▀█░░█░░░░█▀▀░█▀▄░█▀█░█░░░░█░░░█░░█░░░█▀▀░▀▀█░
░▀░░░▀▀▀░▀░▀░░▀░░▀░▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░░░▀▀░░▀▀▀░▀▀▀░░▀░░░░▀░░░▀░▀░▀░▀░▀▀▀░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀▀░
by currents.dev - The all-in-one Dashboard for Playwright Testing.
Playwright Best Practices Skill
A 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.
Installation
npx skills add https://github.com/currents-dev/playwright-best-practices-skillThe 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.
When the Skill Is Used
The skill triggers when the AI infers you need help with things like:
- Writing new E2E, component, API, visual regression, or accessibility tests
- Testing mobile/responsive layouts, touch gestures, or device emulation
- Implementing file uploads/downloads, date/time mocking, or WebSocket testing
- Handling OAuth popups, geolocation, permissions, or multi-tab flows
- Testing iframes, canvas/WebGL, service workers, or PWA features
- Testing Electron desktop apps or browser extensions
- Internationalization (i18n), locales, RTL layouts, or date/number formats
- Testing error states, offline mode, or network failure scenarios
- Security testing (XSS, CSRF, authentication, authorization)
- Performance testing with Web Vitals or Lighthouse
- Reviewing or refactoring Playwright test code
- Fixing flaky tests or debugging failures
- Setting up CI/CD, test coverage, or global setup/teardown
- Configuring projects, dependencies, parallel runs, or sharding
You 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.
What's Inside
57 reference documents organized into 8 categories:
Core (core/)
| Topic | Reference | Use for |
|---|---|---|
| Test structure | test-suite-structure.md | Structure, config, E2E/component/API/visual tests |
| Locators | locators.md | Selectors, robustness, avoiding brittle locators |
| Assertions & waiting | assertions-waiting.md | Expect APIs, auto-waiting, polling |
| Page Object Model | page-object-model.md | POM structure and patterns |
| Fixtures & hooks | fixtures-hooks.md | Setup, teardown, auth, custom fixtures |
| Test data | test-data.md | Factories, Faker, data-driven testing |
| Annotations | annotations.md | skip, fixme, slow, test steps |
| Configuration | configuration.md | playwright.config.ts options |
| Global setup | global-setup.md | globalSetup/Teardown, DB migrations |
| Projects | projects-dependencies.md | Project config, dependencies, filtering |
Debugging (debugging/)
| Topic | Reference | Use for |
|---|---|---|
| Debugging | debugging.md | Trace viewer, inspector, common issues |
| Flaky tests | flaky-tests.md | Detection, diagnosis, fixing, quarantine |
| Error testing | error-testing.md | Error boundaries, offline, network failures |
| Console errors | console-errors.md | Capturing and failing on JS errors |
Testing Patterns (testing-patterns/)
| Topic | Reference | Use for |
|---|---|---|
| Accessibility | accessibility.md | Axe-core, keyboard nav, ARIA, focus management |
| API testing | api-testing.md | REST API testing, request context |
| Component testing | component-testing.md | CT setup, mounting, props, mocking |
| Visual regression | visual-regression.md | Screenshot comparison, thresholds |
| File operations | file-operations.md | Upload, download basics |
| File upload/download | file-upload-download.md | Progress, cancellation, retry patterns |
| Forms validation | forms-validation.md | Form testing, validation states |
| Drag and drop | drag-drop.md | Drag-and-drop interactions |
| GraphQL testing | graphql-testing.md | GraphQL queries, mutations, mocking |
| Canvas/WebGL | canvas-webgl.md | Canvas testing, charts, WebGL, games |
| i18n | i18n.md | Locales, RTL, date/number formats |
| Electron | electron.md | Desktop apps, IPC, main/renderer process |
| Browser extensions | browser-extensions.md | Popup, background, content scripts, APIs |
| Security testing | security-testing.md | XSS, CSRF, auth security, authorization |
| Performance testing | performance-testing.md | Web Vitals, budgets, Lighthouse |
Advanced (advanced/)
| Topic | Reference | Use for |
|---|---|---|
| Authentication | authentication.md | Login flows, session storage, cookies |
| Auth flows | authentication-flows.md | MFA, password reset, complex auth |
| Mobile testing | mobile-testing.md | Device emulation, touch gestures, viewports |
| Clock mocking | clock-mocking.md | Date/time mocking, timezones, timers |
| Multi-context | multi-context.md | Popups, new tabs, OAuth flows |
| Multi-user | multi-user.md | Collaboration, RBAC, concurrent actions |
| Network advanced | network-advanced.md | GraphQL, HAR, request modification |
| Third-party | third-party.md | OAuth, payments, email/SMS mocking |
Browser APIs (browser-apis/)
| Topic | Reference | Use for |
|---|---|---|
| Browser APIs | browser-apis.md | Geolocation, permissions, clipboard, camera |
| WebSockets | websockets.md | Real-time testing, SSE, reconnection |
| iFrames | iframes.md | Cross-origin, nested, dynamic iframes |
| Service workers | service-workers.md | PWA, caching, offline, push notifications |
Architecture (architecture/)
| Topic | Reference | Use for |
|---|---|---|
| POM vs fixtures | pom-vs-fixtures.md | Choosing between patterns |
| Test architecture | test-architecture.md | Test type selection, structure |
| When to mock | when-to-mock.md | Mock vs real services decisions |
Frameworks (frameworks/)
| Topic | Reference | Use for |
|---|---|---|
| React | react.md | React-specific testing patterns |
| Angular | angular.md | Angular-specific testing |
| Vue | vue.md | Vue/Nuxt testing patterns |
| Next.js | nextjs.md | Next.js SSR/SSG testing |
Infrastructure & CI/CD (infrastructure-ci-cd/)
| Topic | Reference | Use for |
|---|---|---|
| CI/CD | ci-cd.md | Pipelines, general CI setup |
| GitHub Actions | github-actions.md | GitHub-specific workflows |
| GitLab CI | gitlab.md | GitLab-specific pipelines |
| Other providers | other-providers.md | CircleCI, Azure DevOps, Jenkins |
| Docker | docker.md | Container setup, Playwright images |
| Parallel/sharding | parallel-sharding.md | Sharding, parallel execution |
| Performance | performance.md | Parallel runs, optimization |
| Reporting | reporting.md | Test reporters, artifacts |
| Test coverage | test-coverage.md | V8 coverage, reports, thresholds, CI |
The skill's SKILL.md maps your current activity to these references so the right content is used in context.
License
MIT
Install the whole package (1 skills):
npx skills add https://github.com/currents-dev/playwright-best-practices-skillOr install a single skill:
npx skills add https://github.com/currents-dev/playwright-best-practices-skill --skill <name>Pick the skill name from the Skills tab — each entry there installs independently.