Playwright Skill for Test Generation

The TestDino Playwright skill is a knowledge pack that coding agents (Claude Code, Cursor, VS Code Copilot, Gemini CLI) load on demand to generate Playwright tests that follow best practices. The same guides cover debugging and maintaining the tests the agent writes. Install it with the command below, then ask your agent to write a test. The source is public at github.com/testdino-hq/playwright-skill, MIT licensed. The current release is v2.5.0, covering Playwright 1.63.

testdino-hq/playwright-skill on GitHub

71 guides across 5 packs. Browse the source, open an issue, or star the repository.

The skill follows the open Agent Skills specification.

Installation

npx skills add testdino-hq/playwright-skill

Install individual packs when you need specific coverage:

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

No additional configuration is required. Your agent picks it up on its own as soon as it sees Playwright in the repo.

Supported Tools

Tool	Link
Claude Code	code.claude.com/docs/en/skills
Cursor	cursor.com/docs/context/skills
VS Code Copilot	code.visualstudio.com/docs/copilot/customization/agent-skills
Gemini CLI	geminicli.com/docs/cli/skills

Skill Packs

Pack	Guides	What it covers
`core`	48	Locators, assertions, fixtures, auth, API testing, network mocking, visual regression, accessibility, component testing, debugging, trace analysis, dynamic test selection, framework recipes, architecture decisions
`ci`	9	GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, sharding, reporting, coverage, global setup
`playwright-cli`	10	CLI browser automation, request mocking, sessions, storage and auth state, test generation, tracing, screenshots, device emulation
`pom`	2	Page Object Model patterns; POM versus fixtures versus helpers
`migration`	2	Cypress to Playwright; Selenium/WebDriver to Playwright

How It Works

The TestDino skill ships as a folder your agent loads. SKILL.md tells it when to reach for TestDino. The manifest declares metadata, core instructions, and an index of guides. Reference documents contain topic-specific guidance the agent reads on demand.

testdino-hq/playwright-skill/
├── SKILL.md                  # index across every pack: golden rules, guide tables
├── core/
│   ├── SKILL.md
│   ├── locators.md
│   ├── assertions-and-waiting.md
│   ├── flaky-tests.md
│   ├── dynamic-test-selection.md
│   ├── trace-analysis.md
│   └── ...
├── ci/
│   ├── SKILL.md
│   └── ...
├── pom/
│   ├── SKILL.md
│   └── ...
├── migration/
│   ├── SKILL.md
│   └── ...
└── playwright-cli/
    ├── SKILL.md
    └── ...

Progressive Disclosure

Skills load in 3 stages, so most of the pack stays out of the context window until a task needs it. Sizes below come from the files in the repository; token counts assume roughly 4 characters per token.

Stage	What loads	Size
Idle	Pack name and one-line description from the `SKILL.md` frontmatter	Under 100 tokens
Activated	The pack’s `SKILL.md` index: golden rules and guide tables	0.6 KB (`pom`) to 10.5 KB (root index), roughly 150 to 2,600 tokens
Reference pull	One guide at a time	10 KB to 60 KB per guide, roughly 2,500 to 15,000 tokens

The agent decides which stage to enter from the task. “Fix this flaky Playwright test” loads the core index, then flaky-tests.md and dynamic-test-selection.md, and leaves the other 46 core guides untouched. Loading the full guide set into a system prompt would cost several hundred thousand tokens per session. RAG retrieval avoids that cost but returns fragments without the opinionated guidance the indexes carry.

Golden Rules

The root SKILL.md defines 10 rules that every guide assumes:

getByRole() over CSS and XPath
Never page.waitForTimeout(). Use web-first assertions or page.waitForURL()
Web-first assertions: expect(locator) auto-retries, expect(await locator.textContent()) does not
Isolate every test. No shared state, no execution-order dependencies
baseURL in config, zero hardcoded URLs in tests
Retries: 2 in CI, 0 locally
Traces: 'on-first-retry'
Fixtures over globals: share state via test.extend()
One behavior per test
Mock external services only. Never mock your own app

Security Trust Boundary

The skill is written for testing applications you own or are authorized to test. Its guides treat page content, API payloads, and screenshots returned from staging or production as untrusted input, and tell the agent not to feed raw page text back into instructions or dynamic code execution. CI guides pin GitHub Actions and Docker images to commit SHAs and image digests rather than mutable tags.

Coverage

Core

Locators and locator strategy, assertions and waiting, fixtures and hooks, configuration, test organization and architecture, test data management, authentication and auth flows, API testing (REST and GraphQL), network mocking and when to mock, forms and validation, CRUD flows, search and filter UIs, drag and drop, file operations, uploads and downloads, error and edge cases, component testing, mobile and responsive.

Debugging

Trace viewer and UI mode, error index, flaky test diagnosis, common pitfalls, and trace-analysis.md: debugging a trace.zip from the terminal with npx playwright trace, written for agents.

Dynamic Test Selection

Added in v2.5.0 for Playwright 1.62. reporter.preprocess() selects tests before execution, with skip, exclude, fixed, and failing marks. The guide covers driving quarantine from an external flakiness API, matching on full title paths, and retryStrategy: 'isolated'. It recommends failing over skip for quarantine, so a recovered test removes itself from the list.

Framework Recipes

React (CRA, Vite), Next.js (App Router and Pages Router), Vue 3 and Nuxt, Angular.

Visual and Accessibility

Visual regression with toHaveScreenshot(), WebP snapshots with a quality parameter, axe-core integration, ARIA assertions, keyboard navigation.

Specialized Topics

Multi-user and real-time collaboration, WebSockets, browser APIs (geolocation, clipboard, permissions), iframes and Shadow DOM, multi-tab and popups, canvas and WebGL, service workers and PWAs, Electron, browser extensions, security testing, performance and Core Web Vitals, clock and time mocking, third-party integrations, i18n and localization.

CI/CD

Provider	Coverage
GitHub Actions	Workflow configuration, caching, artifact upload, sharding with matrix strategy
GitLab CI	Pipeline stages, browser caching, parallel jobs
CircleCI, Azure DevOps, Jenkins	Orbs and test splitting, YAML pipelines, declarative pipelines in Docker
Docker	Official Playwright image, dependency caching, multi-stage builds
Cross-cutting	Sharding (`--shard=N/M`), test `lock` for shared resources, reporting and `mergeFiles`, `--add-reporter`, code coverage, global setup and teardown, multi-project config

Page Object Model

POM implementation patterns with a decision guide for choosing between page objects, fixtures, and helper functions.

Migration

API mapping tables and incremental migration strategies:

Cypress to Playwright: cy.get() to page.locator(), cy.intercept() to page.route()
Selenium/WebDriver to Playwright: driver setup, element interaction, and wait strategy translation

Playwright CLI

Core commands, request mocking, running custom code through run-code, session management, storage and auth state, test generation, tracing and debugging, screenshots and media, device emulation, advanced workflows.

Playwright Version Coverage

The guides track Playwright releases. v2.5.0 covers 1.63 and earlier.

Release	Covered in the guides
1.63	Test `lock`, `locator.visible()`, trace `snapshots: { dom, aria, screen }`, `--add-reporter`, `perfetto` reporter, `omitTags`, typed `request.get<User>()`, `ariaSnapshotJSON()`
1.62	`reporter.preprocess()`, `retryStrategy: 'isolated'`, WebP screenshots, `AbortSignal` on actions and assertions, `locator.waitForFunction()`, `apiResponse.timing()`
1.61	WebAuthn passkeys via `context.credentials`, `page.localStorage` and `page.sessionStorage`, video retention modes, `expect.soft.poll()`, WebSockets in HAR and traces
1.60	On-demand HAR in tracing, `locator.drop()`, page-level aria snapshots, `test.abort()`
1.59	Screencast recording, CLI debugging and trace analysis

Playwright 1.62 deprecated the experimental component testing packages (@playwright/experimental-ct-react, -ct-react17, -ct-vue) in favour of the stories and galleries model. core/component-testing.md carries a banner noting its mount() patterns predate that change. The testing concepts hold; check the current Playwright docs before copying a mounting snippet.

Example Prompts

Each prompt below loads a different slice of the skill. The right column is what the agent reads before it answers:

Prompt	Guides Loaded
”Generate Playwright tests for a multi-step form wizard with validation”	Locator strategy, form validation, test organization
”Optimize our CI pipeline time with test sharding”	CI/CD, sharding, matrix-based parallel execution
”This checkout test passes locally but times out in CI”	Debugging, flaky test diagnosis, CI environment differences
”Find every test that touches the payments API”	Test discovery, tagging, suite filtering
”Quarantine our flaky tests without deleting them”	Dynamic test selection, flaky tests, `failing` marks
”Migrate our Cypress login tests to Playwright”	Migration mapping tables, authentication patterns
”Add visual regression tests for dashboard components”	Visual testing, `toHaveScreenshot()`, CI artifact handling

GitHub Repository

Full source and all guides. MIT licensed.

Agent Skills Specification

The open standard defining how skills, manifests, and progressive disclosure work.

TestDino MCP

Connect AI assistants to your test data.

Test Generation

Record or describe a flow and compile it to a Playwright spec.

Getting Started

AI-Native Testing

Test Generation

Test Intelligence

Test Management

Guides

Connect Your Pipeline

Organization & Access

Integrations

Data Privacy & Security

Resources

testdino-hq/playwright-skill on GitHub

Installation

Supported Tools

Skill Packs

How It Works

Progressive Disclosure

Golden Rules

Security Trust Boundary

Coverage

Core

Debugging

Dynamic Test Selection

Framework Recipes

Visual and Accessibility

Specialized Topics

CI/CD

Page Object Model

Migration

Playwright CLI

Playwright Version Coverage

Example Prompts

GitHub Repository

Agent Skills Specification

TestDino MCP

Test Generation

testdino-hq/playwright-skill on GitHub

​Installation

​Supported Tools

​Skill Packs

​How It Works

​Progressive Disclosure

​Golden Rules

​Security Trust Boundary

​Coverage

​Core

​Debugging

​Dynamic Test Selection

​Framework Recipes

​Visual and Accessibility

​Specialized Topics

​CI/CD

​Page Object Model

​Migration

​Playwright CLI

​Playwright Version Coverage

​Example Prompts

​Related

GitHub Repository

Agent Skills Specification

TestDino MCP

Test Generation

Installation

Supported Tools

Skill Packs

How It Works

Progressive Disclosure

Golden Rules

Security Trust Boundary

Coverage

Core

Debugging

Dynamic Test Selection

Framework Recipes

Visual and Accessibility

Specialized Topics

CI/CD

Page Object Model

Migration

Playwright CLI

Playwright Version Coverage

Example Prompts

Related