Playwright Skill by testdino-hq

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

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

<p align="left"> <picture> <source srcset="https://testdino.com/images/logo-icon-white.svg" media="(prefers-color-scheme: dark)" /> <source srcset="https://testdino.com/images/logo-icon-black.svg" media="(prefers-color-scheme: light)" /> <img src="https://testdino.com/images/logo-icon-black.svg" width="24" height="24" alt="TestDino Logo" align="center" /> </picture> by <a href="https://testdino.com">testdino.com</a> — Purpose built for debugging, managing, and improving Playwright tests with AI </p>

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. 87 guides with TypeScript examples throughout and JavaScript in most core guides. 8 of them are for teams that also run e2e, the agentic test runner: they cover what happens to its results after the run.

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
npx skills add testdino-hq/playwright-skill/e2e-testdino

The pack is named e2e-testdino (folder and skill), not e2e, so it does not collide with the e2e skill that e2e installs itself.

🎬 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
e2e-testdino	8	For suites on e2e, the agentic runner: results and artifacts from CI, debugging a CI failure from its trace page, merged shards, flake verdicts and quarantine, agent cost and replay cache health, device recordings, explore findings, test case links

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	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

e2e With TestDino Skills

For teams running e2e, the agentic test runner, beside or instead of Playwright. e2e ships its own skill for writing, running and fixing tests on one machine, and these guides never repeat it. They cover what a test runner on one machine cannot know: results from CI, history across runs, and evidence an agent can fetch from somewhere else. Results reach TestDino through the @testdino/e2e reporter.

Guide	Description
results-and-artifacts.md	Add the reporter, what uploads and when, the 50 MB and 40-second limits, tags, keeping media local
debugging-a-ci-failure.md	Fetch the trace page and screen at failure of a CI run, find what changed, fix locally, verify the fix
sharding.md	--shard across CI jobs as one run, split mode, what each shard still does alone
flaky-or-broken.md	Flake verdict before paying for reruns, quarantine through testdino-e2e run, re-run only failures
agent-cost-and-cache-health.md	Cost per test and stale recordings from report.json, a pull request against main, when to turn on --strict-cache
mobile-results.md	Device recordings under the upload limits, hosted device links, one device's failures
explore-findings.md	Turn verified explore and bug bash findings into uploaded repro runs, tickets and sessions
feature-map-to-test-cases.md	Link e2e tests to test cases so the feature map's coverage is shared

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