
playwright-testing
Playwright E2E testing — cross-browser, visual regression, API testing, mobile emulation. Use when writing E2E tests or setting up automated UI testing for web apps.
- Installs
- 99
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/laurigates/claude-plugins --skill playwright-testing- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads playwright-testing automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Playwright Testing
Playwright is a modern end-to-end testing framework for web applications. It provides reliable, fast, and cross-browser testing with excellent developer experience.
When to Use This Skill
| Use this skill when... | Use another skill instead when... |
|---|---|
| Writing E2E browser tests | Writing unit tests (use vitest-testing) |
| Testing across Chromium, Firefox, WebKit | Testing Python code (use python-testing) |
| Setting up visual regression testing | Analyzing test quality (use test-quality-analysis) |
| Mocking network requests in E2E tests | Generating property-based tests (use property-based-testing) |
| Testing mobile viewports | Testing API contracts only (use api-testing) |
Core Expertise
- Cross-browser: Test on Chromium, Firefox, WebKit (Safari)
- Reliable: Auto-wait, auto-retry, no flaky tests
- Fast: Parallel execution, browser context isolation
- Modern: TypeScript-first, async/await, auto-complete
- Multi-platform: Windows, macOS, Linux
Installation
bun create playwright # Initialize (recommended)
bun add --dev @playwright/test # Or install manually
bunx playwright install # Install browsers
bunx playwright install --with-deps # With system deps (Linux)
bunx playwright --version # Verify
Configuration (playwright.config.ts)
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
timeout: 30000,
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
});
Essential Commands
bunx playwright test # Run all tests
bunx playwright test tests/login.spec.ts # Specific file
bunx playwright test --headed # See browser
bunx playwright test --debug # Debug mode
bunx playwright test --project=chromium # Specific browser
bunx playwright test --ui # UI mode
bunx playwright codegen http://localhost:3000 # Record tests
bunx playwright show-report # Last report
bunx playwright show-trace trace.zip # Trace viewer
bunx playwright test --update-snapshots # Update snapshots
Writing Tests
Basic Test Structure
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveTitle(/Example/);
});
test.describe('login flow', () => {
test('should login successfully', async ({ page }) => {
await page.goto('/login');
await page.fill('input[name="email"]', 'user@example.com');
await page.fill('input[name="password"]', 'password123');
await page.click('button[type="submit"]');
await expect(page).toHaveURL('/dashboard');
});
});
Selectors and Locators
// Text/Role selectors (recommended)
await page.getByText('Sign in').click();
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Email').fill('user@example.com');
await page.getByPlaceholder('Enter your name').fill('John');
await page.getByTestId('login-button').click();
// CSS/XPath selectors
await page.locator('.button-primary').click();
await page.locator('xpath=//button[text()="Submit"]').click();
// Chaining
await page.locator('.card').filter({ hasText: 'Product' }).getByRole('button').click();
Key Assertions
| Assertion | Description |
|---|---|
toHaveTitle(title) | Page title |
toHaveURL(url) | Page URL |
toBeVisible() | Element visible |
toBeEnabled() | Element enabled |
toHaveText(text) | Element text |
toContainText(text) | Partial text |
toHaveAttribute(name, value) | Attribute value |
toHaveClass(class) | CSS class |
toHaveValue(value) | Input value |
toBeEmpty() | Empty input |
toHaveCount(n) | Element count |
not.toBeDisabled() | Negation |
Agentic Optimizations
| Context | Command |
|---|---|
| Quick test | bunx playwright test --reporter=line --bail |
| CI test | bunx playwright test --reporter=github |
| Single browser | bunx playwright test --project=chromium --reporter=line |
| Debug failing | bunx playwright test --trace on --reporter=line |
| Headed debug | bunx playwright test --headed --debug |
For detailed examples, advanced patterns, and best practices, see REFERENCE.md.
Testing a WebGL app (CesiumJS, three.js, MapLibre) on a GPU-less CI runner: see WebGL Apps in GPU-less CI for the SwiftShader flags, the lhci chromeFlags string trap, and frame-rate capping.
References
- Official docs: https://playwright.dev
- Configuration: https://playwright.dev/docs/test-configuration
- API reference: https://playwright.dev/docs/api/class-test
- Best practices: https://playwright.dev/docs/best-practices
- CI/CD: https://playwright.dev/docs/ci
- Trace viewer: https://playwright.dev/docs/trace-viewer
FAQ
What does the playwright-testing skill do?
Playwright E2E testing — cross-browser, visual regression, API testing, mobile emulation. Use when writing E2E tests or setting up automated UI testing for web apps.
How do I install playwright-testing?
Run npx skills add https://github.com/laurigates/claude-plugins --skill playwright-testing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/playwright-testing/ (personal) or .claude/skills/playwright-testing/ (project).
Which AI agents can use playwright-testing?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is playwright-testing safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains playwright-testing?
It is published by laurigates in laurigates/claude-plugins. It has 99 recorded installs.
More from laurigates/claude-plugins
python-code-quality
laurigates/claude-plugins
Python code quality with ruff and ty. Use when the user mentions ruff, ty, linting, formatting, type checking, or Python code style.
ruff-linting
laurigates/claude-plugins
Python linting with ruff. Fast linting, rule selection, auto-fixing, and config. Use when checking Python code quality, enforcing standards, or finding bugs.
python-testing
laurigates/claude-plugins
Python testing with pytest, coverage, fixtures, and mocking. Use when the user mentions pytest, unit tests, coverage, fixtures, mocking, or writing Python tests.
pytest-advanced
laurigates/claude-plugins
Advanced pytest: fixtures, markers, parametrization, parallel execution. Use when implementing test infrastructure, writing fixtures, or running with coverage.
uv-workspaces
laurigates/claude-plugins
Manage multi-package Python projects with uv workspaces. Use when the user mentions uv workspaces, Python monorepo, shared lockfiles, or member dependencies.
basedpyright-type-checking
laurigates/claude-plugins
Open the skill to read its SKILL.md instructions.
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work