playwright-skill

Why use it

Key features

Role-based and accessible locator patterns (avoid CSS/XPath fragility)
Network stubbing and response mocking idioms
Fixtures for auth state reuse across tests
Trace capture + debugging workflow via trace viewer
Parallelism and sharding guidance
Flakiness mitigation: web-first assertions, retry policy

Live Demo

What it looks like in practice

playwright-skill-2.replay ▶ ready

0/0

Install

Author repository · Claude Skills documentation

Use Cases

Real-world ways to use playwright-skill

How to write a maintainable first E2E test

👤 Developers adding Playwright to a project for the first time ⏱ ~30 min beginner

When to use: You have a staging URL and a login flow; you want one solid test before scaling.

Flow

Describe the flow

Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ Copied

→ Test using getByRole, getByLabel; no .class or xpath
Add auth reuse fixture

Convert the login into a reusable auth fixture so other tests skip logging in.✓ Copied

→ storageState-based fixture + globalSetup
Ensure non-flakiness

Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ Copied

→ expect(locator).toBeVisible() rather than waitForSelector

Outcome: A robust first test plus a fixture the whole suite inherits.

Pitfalls

Claude reaches for page.waitForTimeout — Tell skill explicitly: no arbitrary waits, use web-first assertions

Stub a backend API to test frontend edge cases

👤 Frontend engineers testing empty/error/loading states ⏱ ~25 min intermediate

When to use: You can't easily put the real backend into each state.

Flow

Stub the endpoint

Stub GET /api/orders to return empty array, then assert the empty state renders.✓ Copied

→ route.fulfill with JSON body; assertion on empty-state element
Vary responses per test

Parameterize the stub: one test for 500 error, one for timeout, one for partial data.✓ Copied

→ Three tests sharing a helper

Outcome: Edge-state coverage without touching the backend.

Pitfalls

Stub leaks across tests — Set up in beforeEach or fixture scope, not in a module-level hook

Debug a flaky test using trace viewer

👤 Engineers triaging a flaky suite in CI ⏱ ~45 min intermediate

When to use: A test passes locally, fails 5% of the time in CI.

Flow

Capture trace on retry

Configure trace: 'on-first-retry' in playwright.config.ts.✓ Copied

→ Config diff
Analyze the trace

Download the trace.zip from the failed CI run; walk me through what's different from the successful run.✓ Copied

→ Concrete diff in network/DOM timing
Fix

Based on the trace, propose the minimal change to de-flake.✓ Copied

→ Specific locator or assertion change, not a blanket sleep

Outcome: A de-flaked test with a documented root cause.

Pitfalls

Treating flakes by bumping timeouts — Most flakes are hidden race conditions — the trace usually reveals a missing await

Combinations

Pair with other MCPs for X10 leverage

playwright-skill-2 + seo-audit-skill

Playwright captures pages, SEO audit runs against rendered HTML for JS-heavy apps

Use Playwright to authenticate and capture logged-in pages, then run seo-audit against each.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call
Locator patterns	-	Writing new selectors
Network stubbing	-	Testing frontend edge states
Fixtures & auth reuse	-	Scaling a suite past 5 tests
Trace analysis	trace.zip	Debugging flakes
Parallelism & sharding	-	Suites running >5 min in CI

Cost & Limits

What this costs to run

API quota: None
Tokens per call: Test generation: 3-8k tokens
Monetary: Free
Tip: Generate one test manually, save as a template, and have Claude follow the template for others.

Security

Permissions, secrets, blast radius

Credential storage: Test credentials in .env (via dotenv). Never commit storageState.json with production auth.

Data egress: Tests hit your target URL. No third-party calls from the skill.

storageState.json contains session cookies. Gitignore it and don't upload as CI artifact publicly.

Troubleshooting

Common errors and fixes

Test is flaky on CI only

Enable trace: 'on-first-retry' and analyze the trace from the failing attempt.

Verify: npx playwright show-trace trace.zip

getByRole doesn't find an element that's clearly there

Element may lack an accessible name. Use Playwright Inspector to see the computed role/name.

Verify: npx playwright test --ui

Login fixture works locally, fails in CI

CI may need --headed=false and explicit browser install. Run npx playwright install --with-deps in CI.

Alternatives