Playwright Testing Skill

Production-tested Playwright guidance for writing, debugging and scaling E2E, API, component, visual and accessibility test suites.

Dev & CodingIntermediate★ 378⑂ 62AI score 9/10Last updated: Sep 6, 2026

What it does

Enforces ten golden rules for reliable Playwright tests: prefer getByRole(), never page.waitForTimeout(), use auto-retrying web-first assertions, isolate every test, configure baseURL, retries 2 in CI, traces on-first-retry, fixtures over globals, mock only third-party services.
Ships an index of 50+ reference guides across locators, assertions, fixtures, page objects, network mocking, auth, visual regression, accessibility, API/GraphQL testing and CI/CD, so the agent jumps to the right doc for your task.
Provides debugging workflows: flaky-test triage, an error-message index, common pitfalls, and agent-native trace.zip analysis via the npx playwright trace CLI.
Includes framework recipes (Next.js, React, Vue/Nuxt, Angular) and migration guides from Cypress and Selenium.
Covers CI infrastructure — GitHub Actions, GitLab CI, Docker, sharding, reporting, coverage — plus a security trust boundary that requires authorization to test targets and pinned external dependencies.
Tracks recent Playwright releases (1.59–1.63) including test lock, locator.visible(), the perfetto reporter and WebAuthn passkeys.

Who it's for

QA engineers and front-end developers building or scaling Playwright suites
Teams migrating away from Cypress or Selenium
Anyone losing hours to intermittently failing CI tests
TypeScript or JavaScript codebases needing consistent test architecture

Example uses

"Write an E2E test for our login flow" → an isolated spec using storageState auth reuse and role-based locators.
"This spec only fails in CI" → follow the flaky-tests and trace-analysis guides to inspect trace.zip from the terminal and replace hard waits with web-first assertions.
"Port 30 Cypress specs to Playwright" → use the from-cypress mapping table to convert commands and assertions, then restructure into page objects.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/testdino-hq/playwright-skill/HEAD/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the SKILL.m folder from the GitHub repo testdino-hq/playwright-skill into my ~/.claude/skills/testdino-hq-playwright-skill/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/testdino-hq/playwright-skill.git ~/.claude/skills/playwright-skill

⚠ This is a third-party skill. Check the source repository before installing.

Open a terminal.
Create the skills directory if needed: mkdir -p ~/.claude/skills
Clone the repo into it: git clone https://github.com/testdino-hq/playwright-skill.git ~/.claude/skills/playwright-skill
Verify the core/, ci/, pom/, migration/ and playwright-cli/ folders came along — the links inside SKILL.md depend on them.
Restart Claude Code and ask something like "help me write a Playwright test" so the skill loads automatically.
To actually run tests, install Playwright in your project with npm init playwright@latest.

View source on GitHub ↗License: MIT