Claude webapp-testing skill: 10 Playwright cookbook

The prompt

Write a Playwright smoke test in tests/smoke/homepage.spec.ts. It should: load http://localhost:3000, assert the page has a visible h1, click the primary CTA labelled 'Get started', and assert the URL ends with /signup. Tag the test '@smoke' so we can filter it in CI.

What slides.md looks like

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

test('homepage loads and CTA navigates to signup @smoke', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/\/signup$/);
});

Pairs with

The prompt

Write tests/auth/login.spec.ts. Fill the email and password inputs (use getByLabel), click 'Sign in', expect URL to become /dashboard, expect a cookie named 'session' to exist. Then click 'Log out' and expect the cookie to be gone. Save the authenticated state to playwright/.auth/user.json with page.context().storageState.

What slides.md looks like

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

test('user can sign in, persist session, and sign out', async ({ page, context }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('[email protected]');
  await page.getByLabel('Password').fill(process.env.TEST_PASSWORD!);
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL('/dashboard');
  expect((await context.cookies()).some(c => c.name === 'session')).toBe(true);
  await context.storageState({ path: 'playwright/.auth/user.json' });
  await page.getByRole('button', { name: 'Log out' }).click();
  expect((await context.cookies()).some(c => c.name === 'session')).toBe(false);
});

Pairs with

The prompt

Write tests/visual/pricing.spec.ts. Navigate to /pricing, wait for networkidle, then call expect(page).toHaveScreenshot('pricing.png'). Mask the dynamic '€/$' price block with a CSS selector. Set maxDiffPixels: 100.

What slides.md looks like

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

test('pricing page matches the committed baseline', async ({ page }) => {
  await page.goto('/pricing');
  await page.waitForLoadState('networkidle');
  await expect(page).toHaveScreenshot('pricing.png', {
    mask: [page.locator('[data-test="price-amount"]')],
    maxDiffPixels: 100,
    animations: 'disabled',
  });
});

Pairs with

The prompt

Write tests/mocks/search.spec.ts. Intercept GET /api/search?q=* and respond with a fixture of three results. Type 'react' into the search input and assert the three result titles appear.

What slides.md looks like

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

test('search renders results from a stubbed API', async ({ page }) => {
  await page.route('**/api/search?q=*', async route => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ hits: [
        { id: '1', title: 'React docs' },
        { id: '2', title: 'React Router' },
        { id: '3', title: 'React Query' },
      ] }),
    });
  });
  await page.goto('/search');
  await page.getByPlaceholder('Search').fill('react');
  await expect(page.getByRole('listitem')).toHaveCount(3);
  await expect(page.getByText('React Router')).toBeVisible();
});

Pairs with

The prompt

Add a 'mobile' project to playwright.config.ts using devices['iPhone 13']. Write tests/mobile/nav.spec.ts that opens the hamburger, taps 'Pricing', and asserts the URL is /pricing.

What slides.md looks like

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'mobile',   use: { ...devices['iPhone 13'] } },
  ],
});

// tests/mobile/nav.spec.ts
import { test, expect } from '@playwright/test';
test('mobile nav opens and routes to /pricing', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: 'Open menu' }).tap();
  await page.getByRole('link', { name: 'Pricing' }).tap();
  await expect(page).toHaveURL('/pricing');
});

Pairs with

The prompt

Write tests/oauth/github.spec.ts. Click 'Continue with GitHub'. Use page.waitForEvent('popup') CREATED BEFORE the click. In the popup, fill the GitHub login fixture and click Authorize. Expect the original page to land at /dashboard.

What slides.md looks like

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

test('github OAuth popup completes and returns to /dashboard', async ({ page }) => {
  await page.goto('/login');
  const popupPromise = page.waitForEvent('popup');           // create BEFORE click
  await page.getByRole('button', { name: 'Continue with GitHub' }).click();
  const popup = await popupPromise;
  await popup.waitForLoadState();
  await popup.getByLabel('Username').fill(process.env.GH_USER!);
  await popup.getByLabel('Password').fill(process.env.GH_PW!);
  await popup.getByRole('button', { name: 'Sign in' }).click();
  await popup.getByRole('button', { name: 'Authorize' }).click();
  await expect(page).toHaveURL('/dashboard');
});

Pairs with

The prompt

Write tests/perf/landing.spec.ts. Navigate to /, wait until the page is settled, then read the browser-side `performance.getEntriesByType('paint')` API to assert First Contentful Paint < 1500 ms.

What slides.md looks like

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

test('landing page FCP stays under 1.5s', async ({ page }) => {
  await page.goto('/', { waitUntil: 'networkidle' });
  const fcp = await page.evaluate(() => {
    const entry = performance
      .getEntriesByType('paint')
      .find((e) => e.name === 'first-contentful-paint');
    return entry ? entry.startTime : null;
  });
  console.log('FCP (ms):', fcp);
  expect(fcp).not.toBeNull();
  expect(fcp!).toBeLessThan(1500);
});

Pairs with

The prompt

Install @axe-core/playwright. Write tests/a11y/dashboard.spec.ts that navigates to /dashboard, runs AxeBuilder({ page }).analyze(), and fails if any 'serious' or 'critical' violation is reported.

What slides.md looks like

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('dashboard has no serious or critical a11y violations', async ({ page }) => {
  await page.goto('/dashboard');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa'])
    .analyze();
  const blocking = results.violations.filter(
    v => v.impact === 'serious' || v.impact === 'critical'
  );
  expect.soft(blocking, JSON.stringify(blocking, null, 2)).toEqual([]);
});

Pairs with

The prompt

Generate .github/workflows/playwright.yml. Matrix over the three projects (chromium, firefox, webkit). Cache Playwright browsers. Upload playwright-report/ as an artifact on failure.

What slides.md looks like

# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        project: [chromium, firefox, webkit]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - run: npm ci
      - run: npx playwright install --with-deps ${{ matrix.project }}
      - run: npx playwright test --project=${{ matrix.project }}
      - if: ${{ failure() }}
        uses: actions/upload-artifact@v4
        with: { name: playwright-report-${{ matrix.project }}, path: playwright-report/, retention-days: 7 }

Pairs with

The prompt

Refactor the suite. Create tests/fixtures/auth.ts that exports a custom test with an `authedPage` fixture. Use storageState from playwright/.auth/user.json (saved by use case 2). Then rewrite tests/dashboard.spec.ts to import from the fixture and skip the login UI entirely.

What slides.md looks like

// tests/fixtures/auth.ts
import { test as base, expect, Page } from '@playwright/test';
type Fixtures = { authedPage: Page };
export const test = base.extend<Fixtures>({
  authedPage: async ({ browser }, use) => {
    const context = await browser.newContext({ storageState: 'playwright/.auth/user.json' });
    const page = await context.newPage();
    await use(page);
    await context.close();
  },
});
export { expect };

// tests/dashboard.spec.ts
import { test, expect } from './fixtures/auth';
test('authed user sees their org name', async ({ authedPage }) => {
  await authedPage.goto('/dashboard');
  await expect(authedPage.getByTestId('org-name')).toHaveText('Acme Inc.');
});

Pairs with