Playwright Best Practices
Install this when you want your coding agent to author, stabilize, and maintain Playwright suites across E2E, component, API, visual, and accessibility flows.
Overview
Playwright Best Practices is an agent skill most often used in Ship (also Ship review and Ship perf) that gives activity-based Playwright guidance for writing, debugging, and maintaining E2E, component, API, visual, acce
Install
npx skills add https://github.com/currents-dev/playwright-best-practices-skill --skill playwright-best-practicesWhat is this skill?
- Activity-based reference map for writing tests, debugging failures, and maintaining suites
- Page Object Model, CI/CD setup, API mocking, auth/OAuth, and global setup/teardown patterns
- Accessibility (axe-core), security (XSS, CSRF), Web Vitals/Lighthouse budgets, and console error monitoring
- Advanced UI flows: multi-tab/popup, iframes, canvas/WebGL, service workers/PWA, Electron, and extension testing
- Annotations (skip, fixme, slow), tags (@smoke, @fast, @critical), and --grep filtering for pipeline tiers
- Activity-based reference guide organized by testing activity (writing, debugging, CI, and specialized flows)
- Covers E2E, component, API, visual, accessibility, security, Electron, and browser extension testing modes
Adoption & trust: 47.7k installs on skills.sh; 292 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need reliable browser and API tests but flakiness, CI misconfiguration, and scattered Playwright docs slow every release.
Who is it for?
Solo builders maintaining Playwright in a real repo who want one skill to cover flaky-test fixes, auth flows, a11y checks, and CI tagging without reading the entire docs site.
Skip if: Teams that only need a one-line smoke test with no CI, mocking, or cross-browser concerns—or projects not using Playwright at all.
When should I use this skill?
Writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, or any specialized flow listed in the skill description (auth, a11y, uploads, WebSockets, PWA, etc.).
What do I get? / Deliverables
After the skill runs, you get structured Playwright patterns—POM, mocks, tags, and CI-ready setup—so tests are easier to write, filter, and keep green in pipeline.
- Playwright test files and fixtures
- CI configuration snippets for tagged runs
- POM and mock patterns aligned to the activity guide
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Playwright work is canonically a Ship concern because it validates behavior before and after releases; the skill is shelved under testing as the primary journey hub for QA. The activity-based guide centers on writing tests, fixing flakiness, CI configuration, and coverage—core testing subphase work rather than one-off deploy scripts.
Where it fits
Scaffold a tagged @smoke suite with global setup before the first production deploy.
Trace a failing multi-tab OAuth flow using the skill’s auth and popup guidance.
Attach Lighthouse/Web Vitals budget checks to critical user journeys.
Add Playwright component tests for isolated UI widgets.
How it compares
Use this procedural skill for end-to-end test craft; pair with a dedicated MCP browser server when you need live page automation outside test files.
Common Questions / FAQ
Who is playwright-best-practices for?
Indie and solo developers shipping web apps, APIs, PWAs, or Electron clients who rely on agents to implement and fix Playwright coverage.
When should I use playwright-best-practices?
In Ship testing when adding or refactoring suites; in Ship review when debugging failures; in Ship perf when enforcing Web Vitals or Lighthouse budgets; and in Build frontend when adding component tests.
Is playwright-best-practices safe to install?
Review the Security Audits panel on this Prism page and inspect the skill package in your repo before granting browser, shell, or network access in CI.
SKILL.md
READMESKILL.md - 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-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)