# playwright-e2e-builder

A skill that plans and builds Playwright E2E suites. It interviews you about flows and auth first, then writes the tests.

- skill · `type=skill` · Claude Code · 271 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/playwright-e2e-builder
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/playwright-e2e-builder

## What it does

The skill runs in four phases. It starts by exploring the repo: which framework you use, whether `@playwright/test` is already there, where test folders live, what routes exist, how login works, and what CI config is present. Then it asks questions through AskUserQuestion about the flows worth covering, the auth setup, where test data comes from, and where tests should run. A written plan comes next, and implementation only starts once you approve it.

What you get out of it: a `playwright.config.ts` with browser projects, a separate `setup` project that stores the login state in `e2e/.auth/user.json`, page objects, custom fixtures for seeding and API calls, screenshot comparison, and a CI workflow with sharding and retries.

The config assumes a dev server on `http://localhost:3000` and reads `BASE_URL` if you set it. Point that at the right port before the first run, or every test will hit nothing.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/playwright-e2e-builder
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill playwright-e2e-builder -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/playwright-e2e-builder/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/playwright-e2e-builder/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/playwright-e2e-builder/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/playwright-e2e-builder/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates playwright-e2e-builder
```

2. **Manually: put the files in place**
- File: `.github/skills/playwright-e2e-builder/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/playwright-e2e-builder
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/playwright-e2e-builder/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/playwright-e2e-builder

## When to use it
- Add Playwright to an existing project without guessing at folder layout
- Pin down critical user flows before any test is written
- Move locators and actions into page objects
- Persist login state and reuse it across test files
- Wire the suite into CI with sharding and retries

## Example prompts
- Look at the stack in this repo and draft a Playwright E2E plan
- Ask me about the flows and auth first, then write `playwright.config.ts`
- Set up login state in `e2e/.auth/user.json` and fixtures for test data

## Similar
- [playwright-e2e-testing](https://affpapa.org/en/nevibecode/skills/playwright-e2e-testing.md) — skill · 615 installs
- [playwright-e2e-testing-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/playwright-e2e-testing-cursorrules-prompt-file.md) — rule · ★ 41024
- [playwright-automation](https://affpapa.org/en/nevibecode/skills/playwright-automation.md) — skill · 1900 installs
- [e2e-playwright-testing](https://affpapa.org/en/nevibecode/skills/e2e-playwright-testing.md) — skill · 803 installs
- [adding-e2e-tests](https://affpapa.org/en/nevibecode/skills/adding-e2e-tests.md) — skill · 445 installs
- [playwright-testing](https://affpapa.org/en/nevibecode/skills/playwright-testing.md) — skill · 3300 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 361 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md