playwright-e2elisted
Install: claude install-skill 5dive-ai/skills
# Playwright E2E & Click-Verification Guide
Drive a real browser to **prove a web change works** — not just that it compiles. Use this to
verify flows end-to-end, reproduce UI bugs, and screenshot pages. Pairs with `nextjs-app`.
> Core principle: a green build is not a working feature. Before calling an interactive change
> done, click through the actual rendered page in a browser. Especially for authed routes,
> modals, and forms — those are exactly where "looks fine in code" silently breaks.
## Install
```bash
npm install -D @playwright/test
npx playwright install chromium # or: --with-deps on CI / fresh boxes
```
## Minimal config
```ts
// playwright.config.ts
import { defineConfig } from '@playwright/test'
export default defineConfig({
testDir: './e2e',
use: { baseURL: 'http://localhost:3000', trace: 'on-first-retry' },
webServer: { command: 'npm run dev', url: 'http://localhost:3000', reuseExistingServer: true },
})
```
## A first spec
```ts
// e2e/home.spec.ts
import { test, expect } from '@playwright/test'
test('home renders and CTA navigates', async ({ page }) => {
await page.goto('/')
await expect(page.getByRole('heading', { name: /welcome/i })).toBeVisible()
await page.getByRole('link', { name: 'Get started' }).click()
await expect(page).toHaveURL(/.*dashboard/)
})
```
Run:
```bash
npx playwright test # headless, all specs
npx playwright test --headed # watch it
npx playwright test home.spec.ts -g CTA # f