██████╗ ██╗ █████╗ ██╗ ██╗██╗ ██╗██████╗ ██╗ ██████╗ ██╗ ██╗████████╗
██╔══██╗██║ ██╔══██╗╚██╗ ██╔╝██║ ██║██╔══██╗██║██╔════╝ ██║ ██║╚══██╔══╝
██████╔╝██║ ███████║ ╚████╔╝ ██║ █╗ ██║██████╔╝██║██║ ███╗███████║ ██║
██╔═══╝ ██║ ██╔══██║ ╚██╔╝ ██║███╗██║██╔══██╗██║██║ ██║██╔══██║ ██║
██║ ███████╗██║ ██║ ██║ ╚███╔███╔╝██║ ██║██║╚██████╔╝██║ ██║ ██║
╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚══╝╚══╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝
███████╗██╗ ██╗██╗██╗ ██╗
██╔════╝██║ ██╔╝██║██║ ██║
███████╗█████╔╝ ██║██║ ██║
╚════██║██╔═██╗ ██║██║ ██║
███████║██║ ██╗██║███████╗███████╗
╚══════╝╚═╝ ╚═╝╚═╝╚══════╝╚══════╝
Playwright Skill Guides
Production-tested Playwright guides for E2E, API, component, visual, accessibility, and security testing, plus CI/CD, CLI automation, trace-report debugging, page objects, and migration. 79 guides with TypeScript examples throughout and JavaScript in most core guides.
These are Agent Skills — Markdown guides an AI coding agent loads on demand. Install them with the skills CLI and your agent pulls the right guide when you ask it to write, debug, or scale Playwright tests. SKILL.md is the canonical index the agent reads, including the Golden Rules and architecture-decision guides.
Playwright 1.64 coverage: locator.within() for combining a target and a container locator (with per-parent nth() for column queries), WebMCP testing via page.webmcp.tools() / callTool() in a dedicated webmcp-testing.md guide, --shuffle for exposing order-dependent tests, default: false projects with --project="*" and config.filteredProjects, test.describe.configure({ lock }), 60fps videos with CSS-styled action callouts and VP9 encoding, toHaveScreenshot: { type: 'webp' }, page.getByRef(), APIRequestContext cookie methods, passkey signCount, and page.content({ includeShadow }). Breaking changes flagged where they bite: device screen forwarding, --update-snapshots=missing now passing, elements in hidden iframes counting as hidden, and JSX following tsconfig.json.
From 1.63: test lock for serializing contention on a shared resource, locator.visible() replacing the :visible pseudo-class, aria and screen snapshots in traces (snapshots: { dom, aria, screen }), --add-reporter for appending rather than replacing reporters, the perfetto reporter, typed request.get<User>(), and ariaSnapshotJSON(). From 1.62: reporter.preprocess() for selecting tests before execution, retryStrategy: 'isolated', WebP screenshots with a quality parameter, AbortSignal on actions and assertions, locator.waitForFunction(), apiResponse.timing(), and the stories-and-galleries component testing model that replaces the deprecated experimental CT packages. A dedicated dynamic-test-selection.md guide covers driving quarantine from an external flakiness API.
Install
Add every skill pack to your project:
npx skills add testdino-hq/playwright-skill
Or add individual packs:
npx skills add testdino-hq/playwright-skill/core
npx skills add testdino-hq/playwright-skill/frontend
npx skills add testdino-hq/playwright-skill/qa
npx skills add testdino-hq/playwright-skill/ci
npx skills add testdino-hq/playwright-skill/pom
npx skills add testdino-hq/playwright-skill/migration
npx skills add testdino-hq/playwright-skill/playwright-cli
🎬 Watch the installation guide
Skill Packs
| Pack | Guides | What's covered |
|---|---|---|
| core | 50 | Locators, assertions, fixtures, auth, API testing, network mocking, visual regression, accessibility, debugging, trace-report analysis, framework recipes, architecture decisions |
| qa | 4 | For QA engineers: test case design from requirements, bug reports from failing tests, manual-to-automated conversion, test review |
| frontend | 2 | For frontend engineers: adding valid, unique, stable data-testid attributes (naming, list uniqueness, stability) + React/Vue/Angular/Svelte patterns |
| ci | 9 | GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, sharding, reporting, coverage |
| playwright-cli | 10 | CLI browser automation, screenshots, tracing, session management, device emulation |
| pom | 2 | Page Object Model patterns, POM vs fixtures vs helpers |
| migration | 2 | Migrating from Cypress, migrating from Selenium |
Golden Rules
The patterns every guide assumes (full list with rationale in SKILL.md):
getByRole()over CSS/XPath — resilient to markup changes- Never
page.waitForTimeout()— use web-first assertions orpage.waitForURL() - Isolate every test — no shared state, no order dependencies
baseURLin config — zero hardcoded URLs in tests- Mock external services only — never mock your own app
Core Skills
The foundation: writing, debugging, and maintaining reliable tests. New to Playwright? Start with locators.md, assertions-and-waiting.md, and fixtures-and-hooks.md.
Writing Tests
| Guide | Description |
|---|---|
| locators.md | Selector strategies — getByRole, getByText, getByTestId |
| locator-strategy.md | Choosing a locator strategy and trade-offs |
| assertions-and-waiting.md | Web-first assertions, auto-retry, waiting patterns |
| fixtures-and-hooks.md | test.extend(), setup/teardown, worker-scoped fixtures |
| configuration.md | playwright.config.ts — projects, timeouts, reporters, web server |
| test-organization.md | File structure, tagging, test.describe, test filtering |
| test-data-management.md | Factories, seeding, cleanup strategies |
| authentication.md | Storage state reuse, multi-role auth, session management |
| auth-flows.md | Login, OAuth, and multi-step auth flows |
| api-testing.md | REST and GraphQL testing with request fixture |
| network-mocking.md | Route interception, HAR replay, response modification |
| when-to-mock.md | When to mock vs hit real services |
| forms-and-validation.md | Form fills, validation, error states, multi-step wizards |
| crud-testing.md | Create / read / update / delete flow testing |
| search-and-filter.md | Search and filter UI testing |
| drag-and-drop.md | Drag-and-drop interactions |
| file-operations.md | File handling in tests |
| file-upload-download.md | Upload and download flows |
| error-and-edge-cases.md | Error states and edge-case coverage |
| visual-regression.md | Screenshot comparison, thresholds, masking dynamic content |
| accessibility.md | axe-core integration, ARIA assertions, a11y auditing |
| component-testing.md | Component tests with the stories-and-galleries mount() model (1.62+) |
| mobile-and-responsive.md | Device emulation, viewport testing, touch interactions |
Debugging & Fixing
| Guide | Description |
|---|---|
| debugging.md | Trace viewer, PWDEBUG, UI mode, headed + slow-mo |
| test-agents.md | Playwright Test Agents: plan, generate and heal tests with an AI tool; when to use playwright-cli or MCP instead |
| trace-analysis.md | Debug a trace.zip from the terminal with the npx playwright trace CLI — agent-native, decision trees, failure playbooks |
| error-index.md | Common error messages and how to fix them |
| flaky-tests.md | Root causes, retry strategies, stabilization patterns |
| dynamic-test-selection.md | Select or quarantine tests at runtime with reporter.preprocess() and an external flakiness API |
| common-pitfalls.md | Top beginner mistakes and how to avoid them |
Architecture Decisions
| Question | Guide |
|---|---|
| E2E vs component vs API? | test-architecture.md |
| Which locator strategy? | locator-strategy.md |
| Mock vs real services? | when-to-mock.md |
| POM vs fixtures vs helpers? | pom-vs-fixtures-vs-helpers.md |
Framework Recipes
| Guide | Description |
|---|---|
| nextjs.md | App Router + Pages Router testing |
| react.md | Vite and React app testing |
| vue.md | Vue 3 / Nuxt testing |
| angular.md | Angular testing patterns |
Specialized Topics
| Guide | Description |
|---|---|
| browser-apis.md | Geolocation, clipboard, permissions |
| iframes-and-shadow-dom.md | Cross-frame testing, Shadow DOM piercing |
| multi-context-and-popups.md | Multi-tab, popups, new windows |
| multi-user-and-collaboration.md | Multi-user and real-time collaboration flows |
| websockets-and-realtime.md | WebSocket testing, real-time UI |
| canvas-and-webgl.md | Canvas testing, visual comparison |
| electron-testing.md | Desktop app testing with Electron |
| security-testing.md | XSS, CSRF, header validation |
| performance-testing.md | Core Web Vitals, Lighthouse, benchmarks |
| clock-and-time-mocking.md | Fake timers, date mocking |
| service-workers-and-pwa.md | PWA testing, offline mode |
| browser-extensions.md | Extension testing patterns |
| webmcp-testing.md | Testing agent tools a page exposes via WebMCP (1.64+) |
| third-party-integrations.md | Testing against third-party services |
| i18n-and-localization.md | Multi-language, RTL, locale testing |
QA Skills
For QA engineers: the work around the test code.
| Guide | Description |
|---|---|
| test-design.md | Requirements to test cases: boundaries, partitions, state transitions, risk ranking, generator-ready plans |
| bug-reports.md | Classify a failure, write a reproducible bug report, keep the test with test.fail() |
| manual-to-automated.md | Triage and convert manual cases to Playwright specs with case-ID traceability |
| test-review.md | Review checklist by severity, prove a test can fail, eslint-plugin-playwright |
Frontend Skills
For frontend engineers writing the app — make components reliably locatable by tests and AI agents (the authoring counterpart to the test-author guides above).
| Guide | Description |
|---|---|
| data-testid-conventions.md | When to add data-testid, naming convention, uniqueness in lists, stability rules, testIdAttribute config |
| examples.md | React/JSX, Vue, Angular, Svelte patterns; centralizing IDs; optional production stripping |
CI/CD Skills
| Guide | Description |
|---|---|
| ci-github-actions.md | Workflows, caching, artifact uploads |
| ci-gitlab.md | GitLab CI pipelines |
| ci-other.md | CircleCI, Azure DevOps, Jenkins |
| parallel-and-sharding.md | Sharding across CI runners |
| docker-and-containers.md | Containerized test execution |
| reporting-and-artifacts.md | HTML reports, traces, screenshots |
| test-coverage.md | Code coverage collection |
| global-setup-teardown.md | One-time setup/teardown |
| projects-and-dependencies.md | Multi-project config, dependencies |
Playwright CLI Skills
| Guide | Description |
|---|---|
| core-commands.md | Open, navigate, click, fill, keyboard, mouse |
| request-mocking.md | Route interception, conditional mocks, HAR replay |
| running-custom-code.md | Full Playwright API via run-code |
| session-management.md | Named sessions, isolation, persistent profiles |
| storage-and-auth.md | Cookies, localStorage, auth state save/restore |
| test-generation.md | Auto-generate test code from CLI interactions |
| tracing-and-debugging.md | Traces, console/network monitoring |
| screenshots-and-media.md | Screenshots, video recording, PDF export |
| device-emulation.md | Viewport, geolocation, locale, dark mode |
| advanced-workflows.md | Popups, scraping, accessibility auditing |
Migration Skills
| Guide | Description |
|---|---|
| from-cypress.md | Cypress to Playwright migration |
| from-selenium.md | Selenium/WebDriver to Playwright migration |
Page Object Model Skills
| Guide | Description |
|---|---|
| page-object-model.md | POM patterns for Playwright |
| pom-vs-fixtures-vs-helpers.md | When to use POM vs fixtures vs helpers |