██████╗ ██╗      █████╗ ██╗   ██╗██╗    ██╗██████╗ ██╗ ██████╗ ██╗  ██╗████████╗
██╔══██╗██║     ██╔══██╗╚██╗ ██╔╝██║    ██║██╔══██╗██║██╔════╝ ██║  ██║╚══██╔══╝
██████╔╝██║     ███████║ ╚████╔╝ ██║ █╗ ██║██████╔╝██║██║  ███╗███████║   ██║
██╔═══╝ ██║     ██╔══██║  ╚██╔╝  ██║███╗██║██╔══██╗██║██║   ██║██╔══██║   ██║
██║     ███████╗██║  ██║   ██║   ╚███╔███╔╝██║  ██║██║╚██████╔╝██║  ██║   ██║
╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚══╝╚══╝ ╚═╝  ╚═╝╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝

███████╗██╗  ██╗██╗██╗     ██╗
██╔════╝██║ ██╔╝██║██║     ██║
███████╗█████╔╝ ██║██║     ██║
╚════██║██╔═██╗ ██║██║     ██║
███████║██║  ██╗██║███████╗███████╗
╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝

by testdino.com — Purpose built for debugging, managing, and improving Playwright tests with AI

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. 70 guides with TypeScript and JavaScript examples throughout.

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.61 coverage: WebAuthn passkey testing (context.credentials), the page.localStorage / page.sessionStorage Web Storage API, new video retention modes, expect.soft.poll(), WebSockets in HAR and traces, and apiResponse.securityDetails() / serverAddr() — plus all 1.60 features (on-demand HAR in tracing, locator.drop(), page-level aria snapshots, test.abort(), getByRole({ description }), toHaveCSS({ pseudo })) and 1.59 features.

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/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	47	Locators, assertions, fixtures, auth, API testing, network mocking, visual regression, accessibility, debugging, trace-report analysis, framework recipes, architecture decisions
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):

1. getByRole() over CSS/XPath — resilient to markup changes
2. Never page.waitForTimeout() — use web-first assertions or page.waitForURL()
3. Isolate every test — no shared state, no order dependencies
4. baseURL in config — zero hardcoded URLs in tests
5. 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	Mount React/Vue/Svelte components in isolation
mobile-and-responsive.md	Device emulation, viewport testing, touch interactions

Debugging & Fixing

Guide	Description
debugging.md	Trace viewer, PWDEBUG, UI mode, headed + slow-mo
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
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	CRA, Vite, component 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
third-party-integrations.md	Testing against third-party services
i18n-and-localization.md	Multi-language, RTL, locale testing

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

License

MIT