AgentToolHub
Skill

playwright-dev

playwright-dev — a Claude Code skill from microsoft/playwright

Features

  • ✓Automated web testing with Chromium, Firefox, and WebKit
  • ✓Single API for cross-browser consistency
  • ✓End-to-end testing with Playwright Test
  • ✓Customizable for AI agents with Playwright MCP
  • ✓Browser automation scripts with Playwright Library
  • ✓VS Code integration for test authoring and debugging

Installation Guide

bash
npm init playwright@latest

Or add manually:

bash
npm i -D @playwright/test
npx playwright install

Write a test

TypeScript
import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Run tests

bash
npx playwright test

Tests run in parallel across all configured browsers, in headless mode by default. Each test gets a fresh browser context — full isolation with near-zero overhead.

Key capabilities

Auto-wait and web-first assertions. No artificial timeouts. Playwright waits for elements to be actionable, and assertions automatically retry until conditions are met.

Locators. Find elements with resilient locators that mirror how users see the page:

TypeScript
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')

Test isolation. Each test runs in its own browser context — equivalent to a fresh browser profile. Save authentication state once and reuse it across tests:

TypeScript
// Save state after login
await page.context().storageState({ path: 'auth.json' });

// Reuse in other tests
test.use({ storageState: 'auth.json' });

Tracing. Capture execution traces, screenshots, and videos on failure. Inspect every action, DOM snapshot, network request, and console message in the Trace Viewer:

TypeScript
// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});
bash
npx playwright show-trace trace.zip

<!-- TODO: screenshot of trace viewer -->

Parallelism. Tests run in parallel by default across all configured browsers.

Full testing documentation

---

Reviews