Comprehensive Playwright E2E testing framework for browser automation. Use when setting up tests, writing E2E scenarios, debugging test failures, configuring CI/CD pipelines, or running browser automation on WSL2.
/plugin marketplace add adaptationio/Skrillz/plugin install skrillz@skrillzThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/best-practices.mdreferences/wsl2-configuration.mdscripts/init-playwright.shPlaywright is the state-of-the-art browser automation framework for 2025, offering cross-browser testing (Chrome, Firefox, Safari/WebKit), built-in codegen, and 35-45% faster parallel execution than alternatives.
Key Advantages:
# Create new project or add to existing
npm init playwright@latest
# Install browsers
npx playwright install
# Set Windows Chrome as browser
export CHROME_BIN="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"
# Or use remote debugging (recommended)
# Start Chrome on Windows with: chrome.exe --remote-debugging-port=9222
// tests/example.spec.ts
import { test, expect } from '@playwright/test';
test('homepage has title', async ({ page }) => {
await page.goto('https://your-app.com');
await expect(page).toHaveTitle(/Your App/);
});
test('login works', async ({ page }) => {
await page.goto('https://your-app.com/login');
await page.fill('[name="email"]', 'test@example.com');
await page.fill('[name="password"]', 'password123');
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/dashboard/);
});
# Run all tests
npx playwright test
# Run in headed mode (see browser)
npx playwright test --headed
# Run specific test file
npx playwright test tests/login.spec.ts
# Run with UI mode (interactive)
npx playwright test --ui
# Launch codegen - click in browser, code generates automatically
npx playwright codegen https://your-app.com
# Save authentication state for reuse
npx playwright codegen --save-storage=auth.json https://your-app.com
tests/
├── e2e/
│ ├── auth.spec.ts # Authentication flows
│ ├── dashboard.spec.ts # Dashboard features
│ └── checkout.spec.ts # Checkout flow
├── visual/
│ └── screenshots.spec.ts # Visual regression
├── api/
│ └── api.spec.ts # API testing
└── fixtures/
└── index.ts # Shared fixtures
// pages/LoginPage.ts
import { Page } from '@playwright/test';
export class LoginPage {
constructor(private page: Page) {}
async goto() {
await this.page.goto('/login');
}
async login(email: string, password: string) {
await this.page.fill('[name="email"]', email);
await this.page.fill('[name="password"]', password);
await this.page.click('button[type="submit"]');
}
}
// tests/auth.spec.ts
import { LoginPage } from '../pages/LoginPage';
test('user can login', async ({ page }) => {
const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.login('user@example.com', 'password');
await expect(page).toHaveURL(/dashboard/);
});
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
fullyParallel: true,
workers: process.env.CI ? 2 : undefined,
retries: process.env.CI ? 2 : 0,
reporter: [['html'], ['list']],
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
},
projects: [
{ name: 'chromium', use: { browserName: 'chromium' } },
{ name: 'firefox', use: { browserName: 'firefox' } },
{ name: 'webkit', use: { browserName: 'webkit' } },
],
});
# Create wrapper script
mkdir -p ~/bin
cat << 'EOF' > ~/bin/chrome-win
#!/bin/bash
"/mnt/c/Program Files/Google/Chrome/Application/chrome.exe" "$@"
EOF
chmod +x ~/bin/chrome-win
# Set environment variable
echo 'export CHROME_BIN="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"' >> ~/.bashrc
source ~/.bashrc
# On Windows, start Chrome with debugging:
# chrome.exe --remote-debugging-port=9222
# In Playwright config:
import { chromium } from '@playwright/test';
const browser = await chromium.connectOverCDP('http://localhost:9222');
# WSLg is built into Windows 11 - GUI apps work automatically
wsl --update
# Install Chrome in WSL
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb
sudo apt-get install -f
# Run headed tests directly
npx playwright test --headed
See references/wsl2-configuration.md for detailed troubleshooting.
page.getByRole('button', { name: 'Submit' })page.getByLabel('Email')page.getByPlaceholder('Enter email')page.getByTestId('submit-btn')page.locator('.btn-primary')// BAD - manual waits
await page.waitForTimeout(2000);
await page.click('.button');
// GOOD - Playwright auto-waits
await page.click('.button'); // Waits automatically
await expect(page.locator('.result')).toBeVisible(); // Waits for element
// Run tests in parallel (default)
test.describe.configure({ mode: 'parallel' });
// Run tests serially (when order matters)
test.describe.configure({ mode: 'serial' });
See references/best-practices.md for comprehensive patterns.
# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test
- uses: actions/upload-artifact@v4
if: failure()
with:
name: playwright-report
path: playwright-report/
See references/ci-cd-integration.md for Docker, Railway, and advanced setups.
# Enable traces in config
# trace: 'on-first-retry'
# View trace after test failure
npx playwright show-trace trace.zip
# Interactive debugging
npx playwright test --ui
# See browser during test
npx playwright test --headed --slowmo=500
Install "Playwright Test for VS Code" extension for:
| Command | Description |
|---|---|
npx playwright test | Run all tests |
npx playwright test --headed | Run with visible browser |
npx playwright test --ui | Interactive UI mode |
npx playwright codegen <url> | Record test by clicking |
npx playwright show-report | View HTML report |
npx playwright show-trace <file> | View trace file |
npx playwright install | Install browsers |
npx playwright --version | Check version |
references/setup-guide.md - Complete installation guidereferences/best-practices.md - Locators, parallelization, patternsreferences/wsl2-configuration.md - WSL2 setup and troubleshootingreferences/ci-cd-integration.md - GitHub Actions, Docker, Railwayscripts/init-playwright.sh - Initialize Playwright in projectscripts/generate-test.ts - Generate test from URLPlaywright is the recommended testing framework for 2025 - cross-browser, fast, and developer-friendly.
Activates when the user asks about Agent Skills, wants to find reusable AI capabilities, needs to install skills, or mentions skills for Claude. Use for discovering, retrieving, and installing skills.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.