# Playwright Skill

Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and...

- Repository: https://github.com/zebbern/claude-code-guide (4691 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add zebbern/claude-code-guide --skill playwright-skill -g -a claude-code -y`
Codex: `npx skills add zebbern/claude-code-guide --skill playwright-skill -g -a codex -y`
Cursor: `npx skills add zebbern/claude-code-guide --skill playwright-skill -g -a cursor -y`
Gemini CLI: `npx skills add zebbern/claude-code-guide --skill playwright-skill -g -a gemini-cli -y`

## Description

Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, fixtures, POM, network mocking, auth flows, debugging, CI/CD (GitHub Actions, GitLab, CircleCI, Azure, Jenkins), framework recipes (React, Next.js, Vue, Angular), and migration guides from Cypress/Selenium. TypeScript and JavaScript.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Playwright Skill

> Opinionated, production-tested Playwright guidance, every pattern includes when (and when _not_) to use it.

**50+ reference guides** covering the full Playwright surface: selectors, assertions, fixtures, page objects, network mocking, auth, visual regression, accessibility, API testing, CI/CD, debugging, and more, with TypeScript and JavaScript examples throughout.

## Golden Rules

1. **`getByRole()` over CSS/XPath**, resilient to markup changes, mirrors how users see the page
2. **Never `page.waitForTimeout()`**, use `expect(locator).toBeVisible()` or `page.waitForURL()`
3. **Web-first assertions**, `expect(locator)` auto-retries; `expect(await locator.textContent())` does not
4. **Isolate every test**, no shared state, no execution-order dependencies
5. **`baseURL` in config**, zero hardcoded URLs in tests
6. **Retries: `2` in CI, `0` locally**, surface flakiness where it matters
7. **Traces: `'on-first-retry'`**, rich debugging artifacts without CI slowdown
8. **Fixtures over globals**, share state via `test.extend()`, not module-level variables
9. **One behavior per test**, multiple related `expect()` calls are fine
10. **Mock external services only**, never mock your own app; mock third-party APIs, payment gateways, email

## Guide Index

### Writing Tests

The rest: https://github.com/zebbern/claude-code-guide/blob/HEAD/skills/playwright/SKILL.md