Playwright Best Practices Skill
57 reference files on Playwright tests in TypeScript: the agent pulls the one that fits the task, from locators to CI sharding
- 417 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill is made of text references, runs nothing and makes no network calls
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/playwright-best-practices-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill is made of text references, runs nothing and makes no network calls
This is third-party code. Review the repository files before installing.
What it does
A skill from the Currents team that collects practices for writing, debugging and maintaining Playwright tests in TypeScript. The main `SKILL.md` maps what you are doing to the matching references, so the agent reads only the relevant section and leaves the rest of the base unopened. The skill holds 57 reference documents in eight folders. The core covers test suite structure, locators, assertions and waiting, fixtures, test data, configuration and project dependencies. Beside it sit sections on debugging and flaky tests, patterns for API, component, visual and accessibility tests, forms, drag and drop, GraphQL, canvas and WebGL, Electron and browser extensions. Separate documents cover security (XSS, CSRF, authorization), performance through Web Vitals and Lighthouse, mobile devices, clocks and time zones, WebSockets, iframes and service workers. The framework folder has React, Angular, Vue and Next.js notes, and the CI/CD section covers GitHub Actions, GitLab, Docker, parallel runs and sharding, reports and coverage.
Who it is for. QA engineers and developers who write end-to-end and component tests in Playwright and want an agent to follow common patterns and not invent a structure on the fly.
Good fit when
- A test fails every other run and the agent works through flaky causes with the flaky-test reference
- Pages get covered with page objects or fixtures and one of the two has to be chosen
- Accessibility tests with axe-core and keyboard navigation checks are added to the suite
- Scenarios with popups, OAuth, file uploads or mocked date and time are under test
- A pipeline in GitHub Actions or GitLab is set up with sharding and reports
Not a fit when
- Tests are written in Python, Java or .NET: the skill's examples are in TypeScript
- The project uses Cypress or Selenium with no move to Playwright planned
- The agent has to open a browser and walk a page itself: the skill holds references and launches no browser
- The project has no tests yet and the tool still has to be chosen: the skill teaches writing Playwright tests and does not compare frameworks
Example request
The login test fails in one of five CI runs: find the cause of the flakiness and rewrite the waits and locators following Playwright best practicesLimitations
The skill is made of text references and runs nothing: no browsers, no tests, no checks. Examples are written for Playwright in TypeScript, so other language bindings need translation. Check API and configuration options against the official docs for your Playwright version. Sections load from the task description, and if the agent picks the wrong one, name the file by hand, for example `core/locators.md`. Not every project needs all 57 documents: a small suite is fine with the core. The repository's latest commit dates from July 2026.
How to disable. Delete the `playwright-best-practices` skill folder from the agent's skills directory, for example `.claude/skills/`. The skill writes nothing to the project and changes no configuration, so there are no other traces.
FAQ
How do I install the Playwright Best Practices Skill in Claude Code?
Run `npx skills add https://github.com/currents-dev/playwright-best-practices-skill`. You do not have to mention the skill in prompts: the agent loads it when it sees a Playwright task.
What is inside the skill?
57 reference documents in eight folders: core, debugging, testing patterns, advanced topics, browser APIs, architecture, frameworks and CI/CD. The `playwright-best-practices` folder holds them all.
How is it different from Playwright MCP?
The Playwright MCP server drives a browser. This skill runs nothing, it teaches an agent to write and fix tests by practice and leaves the choice of pattern, structure and CI to you.
Does it fit component tests and Electron?
Yes. There are separate documents: `component-testing.md`, `electron.md` and `browser-extensions.md` for extensions. They sit in the `testing-patterns` folder.
How do I use it for flaky tests?
Describe the symptom to the agent, for example "the test fails every other run in CI". The skill points it to `flaky-tests.md`, which covers detecting, diagnosing, fixing and quarantining flaky tests, and to the waiting documents.
Discussion
No questions or reviews yet.
Related
SkillsA skill that lets an agent write and run Playwright scripts: page tests, forms, screenshots and link checks
Guides for agents writing and fixing Playwright tests, with advice on locators, waiting and diagnosing CI failures
A Playwright and TypeScript project template with rules and 17 skills so Claude Code, Codex and Cursor write tests to a standard
Seven QA agents and ten skills for test automation: Playwright in TypeScript, Selenium in Java, API, accessibility and ISTQB.
Playwright CLI
playwright-cli
Microsoft's official Playwright CLI with an agent skill: drive a browser through short commands without heavy MCP schemas
A skill that tests your agent's code in a real browser: reads your changes, builds a test plan and runs it through Playwright with your own cookies
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Playwright Best Practices Skill (this card) | no | 417 | |
| TestDino Playwright Skill | no | 412 | guides from TestDino for writing and fixing tests; this one covers more: security, Electron, CI and sharding |
| Playwright Skill | no | 3,266 | a skill that runs Playwright scripts and captures pages; this one only teaches test-writing practices |
README in short
The page opens with a banner and a description, then gives the install command and the list of tasks that trigger the skill. Most of it is per-folder tables with the reference names and hints on what each is for.
README badge
Original 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.2" --- # 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](core/test-suite-structure.md), [locators.md](core/locators.md), [assertions-waiting.md](core/assertions-waiting.md) | | **Writing component tests** | [component-testing.md](testing-patterns/component-testing.md), [test-suite-structure.md](core/test-suite-structure.md) | | **Writing API tests** | [api-testing.md](testing-patterns/api-testing.md), [test-suite-structure.md](core/test-suite-structure.md) | | **Writing GraphQL tests** | [graphql-testing.md](testing-patterns/graphql-testing.md), [api-testing.md](testing-patterns/api-testing.md) | | **Writing visual regression tests** | [visual-regression.md](testing-patterns/visual-regression.md), [canvas-webgl.md](testing-patterns/canvas-webgl.md) | | **Structuring test code with POM** | [page-object-model.md](core/page-object-model.md), [test-suite-structure.md](core/test-suite-structure.md) | | **Setting up test data/fixtures** | [fixtures-hooks.md](core/fixtures-hooks.md), [test-data.md](core/test-data.md) | | **Handling authentication** | [authentication.md](advanced/authentication.md), [authentication-flows.md](advanced/authentication-flows.md) | | **Testing date/time features** | [clock-mocking.md](advanced/clock-mocking.md) | | **Testing file upload/download** | [file-operations.md](testing-patterns/file-operations.md), [file-upload-download.md](testing-patterns/file-upload-download.md) | | **Testing forms/validation** | [forms-validation.md](testing-patterns/forms-validation.md) | | **Testing drag and drop** | [drag-drop.md](testing-patterns/drag-drop.md) | | **Testing accessibility** | [accessibility.md](testing-patterns/accessibility.md) | | **Testing security (XSS, CSRF)** | [security-testing.md](testing-patterns/security-testing.md) | | **Using test annotations** | [annotations.md](core/annotations.md) | | **Using test tags** | [test-tags.md](core/test-tags.md) | | **Testing iframes** | [iframes.md](browser-apis/iframes.md) | | **Testing canvas/WebGL** | [canvas-webgl.md](testing-patterns/canvas-webgl.md) | | **Internationalization (i18n)** | [i18n.md](testing-patterns/i18n.md) | | **Testing Electron apps** | [electron.md](testing-patterns/electron.md) | | **Testing browser extensions** | [browser-extensions.md](testing-patterns/browser-extensions.md) | ### Mobile & Responsive Testing **When to use**: Testing mobile devices, touch interactions, responsive layouts | Activity | Reference Files |