Menu
Use Playwright CLI for interactive browser exploration and snapshot-based interaction. Use when writing or running browser automation tests.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Manage GitHub Projects v2 board: add issues, update field values, and query board state. Use when managing project boards.
Run WCAG 2.2 Level AA accessibility audits against generated UI. Use when a story has ui:true or when asked to audit accessibility.
Generate a complete component file tree wired to design tokens with tests and Gherkin spec. Use when scaffolding a new UI component.
Extract Gherkin scenarios from story markdown files into runnable .feature files and generate step definition stubs. Use when syncing stories to test suites.
Read and write design tokens in W3C DTCG format (tokens.json) and emit CSS, Tailwind, and Mantine outputs. Use when modifying or generating design tokens.
Apply Docker and Docker Compose best practices for containerising services. Use when writing or reviewing Dockerfiles and compose configs.
| name | playwright-cli |
| description | Use Playwright CLI for interactive browser exploration and snapshot-based interaction. Use when writing or running browser automation tests. |
Use Playwright CLI (playwright-cli) for interactive browser exploration and snapshot-based interaction. Use npx playwright test for running actual test suites.
npm install -g @playwright/cli
npx playwright install # installs browsers
# Open browser to URL
playwright-cli open http://localhost:3000
# Take accessibility snapshot (YAML with element references)
playwright-cli snapshot
# Output: saves to disk as snapshot.yml — review before acting
# Interact by element reference (e.g., e21 from snapshot)
playwright-cli click e21
playwright-cli fill e35 "test@example.com"
playwright-cli press e35 Enter
playwright-cli screenshot # saves to disk
# Named sessions for auth state
playwright-cli --session=auth open http://localhost:3000/login
playwright-cli --session=auth fill e10 "admin@example.com"
playwright-cli --session=auth fill e11 "password"
playwright-cli --session=auth click e20 # submit button
playwright-cli session-list
playwright-cli open http://localhost:3000playwright-cli snapshot → review element refs in snapshot.ymlplaywright-cli click e21, playwright-cli fill e35 "value"// tests/e2e/feature.spec.ts
import { test, expect } from '@playwright/test';
test('should {outcome} when {action}', async ({ page }) => {
await page.goto('/');
await page.getByRole('button', { name: 'Sign In' }).click();
await page.getByLabel('Email').fill('test@example.com');
await page.getByLabel('Password').fill('password123');
await page.getByRole('button', { name: 'Login' }).click();
await expect(page).toHaveURL('/dashboard');
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});
# Run all E2E tests
npx playwright test tests/e2e/
# Run specific test file
npx playwright test tests/e2e/auth.spec.ts
# Visual debugger
npx playwright test --ui
# Headed mode (visible browser)
npx playwright test --headed
# Generate tests by recording
npx playwright codegen http://localhost:3000
# View HTML report
npx playwright show-report
test('POST /api/users returns 201', async ({ request }) => {
const response = await request.post('/api/users', {
data: {
email: 'test@example.com',
name: 'Test User'
}
});
expect(response.status()).toBe(201);
const body = await response.json();
expect(body).toHaveProperty('id');
});
Use playwright-cli snapshot (saves to disk) instead of screenshots in context.
The compact YAML element refs (~1,350 tokens) vs accessibility tree injection (~5,700 tokens).