Automate Browser Testing Without Writing Code

1. 01

   Navigate

   Playwright opens a real browser and loads a page

2. 02

   Screenshot

   Captures the full page or a specific component

3. 03

   Audit

   Compares pixels, checks accessibility, flags diffs

4. 04

   Report

   HTML report with expected, actual, and diff images

What is Playwright?

Playwright is a browser automation tool by Microsoft. It opens a real browser, clicks buttons, fills forms, takes screenshots, and checks if things look right. All from code.

Why designers should care

Playwright solves real design system problems:

• Screenshot every component across themes, viewports, and states automatically
• Catch visual regressions before they reach production
• Audit live websites for design system compliance
• Test user flows to make sure your designs actually work

Setup (2 minutes)

# In your project folder
npm init playwright@latest

This installs Playwright and creates a tests/ folder. That’s it.

Your first test: Screenshot a page

Create tests/screenshot.spec.ts:

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

test('capture homepage', async ({ page }) => {
  await page.goto('https://your-site.com');
  await page.screenshot({ path: 'screenshots/homepage.png', fullPage: true });
});

Run it:

npx playwright test

You now have a full-page screenshot in the screenshots/ folder.

Practical use cases for design systems

1. Component inventory screenshots

Capture every component from your Storybook:

test('button variants', async ({ page }) => {
  const variants = ['primary', 'secondary', 'ghost', 'danger'];

  for (const variant of variants) {
    await page.goto(`http://localhost:6006/?path=/story/button--${variant}`);
    await page.screenshot({
      path: `screenshots/button-${variant}.png`
    });
  }
});

2. Responsive audit

Check how a page looks across breakpoints:

const viewports = [
  { width: 375, height: 812, name: 'mobile' },
  { width: 768, height: 1024, name: 'tablet' },
  { width: 1440, height: 900, name: 'desktop' },
];

for (const vp of viewports) {
  test(`homepage at ${vp.name}`, async ({ page }) => {
    await page.setViewportSize({ width: vp.width, height: vp.height });
    await page.goto('https://your-site.com');
    await page.screenshot({ path: `screenshots/homepage-${vp.name}.png` });
  });
}

3. Dark mode comparison

test('dark mode toggle', async ({ page }) => {
  await page.goto('https://your-site.com');
  await page.screenshot({ path: 'screenshots/light.png' });

  await page.click('[data-theme-toggle]');
  await page.screenshot({ path: 'screenshots/dark.png' });
});

4. Accessibility check

import AxeBuilder from '@axe-core/playwright';

test('check accessibility', async ({ page }) => {
  await page.goto('https://your-site.com');
  const results = await new AxeBuilder({ page }).analyze();

  console.log(`Found ${results.violations.length} accessibility issues`);
  results.violations.forEach(v => {
    console.log(`- ${v.id}: ${v.description} (${v.nodes.length} instances)`);
  });
});

Playwright MCP: AI-powered testing

With the Playwright MCP server, Claude Code can control a browser directly:

You: "Go to our Storybook, screenshot every button variant, and flag any that don't match our design tokens"

Claude: [opens browser, navigates to Storybook, captures screenshots, analyzes colors against tokens, reports mismatches]

This is where Playwright becomes truly powerful for designers: you describe what you want in plain English, and the AI executes the browser automation.

Running tests

npx playwright test                    # Run all tests
npx playwright test --headed           # Watch the browser
npx playwright test --ui               # Interactive UI mode
npx playwright show-report             # View HTML report

Exercise

Screenshot every button variant in your design system tonight

30 min

1. Install Playwright and write a one-component test

   In your design system repo (or a sandbox folder), run npm init playwright@latest. Accept defaults. Then create tests/buttons.spec.ts with a single test that navigates to your Storybook or live component preview URL and screenshots one real button variant. Run npx playwright test. Open test-results/ and verify the screenshot looks like your actual button.

   • npx playwright test runs without errors
   • The screenshot file exists and shows your real component, not a blank page
   • If your preview URL needs authentication or a local dev server, your script handles that (or you hardcoded a public URL for now)

2. Loop over every variant and establish baselines

   Extend the test with an array of every button variant you actually ship (primary, secondary, ghost, danger, loading, disabled, whatever your system has). Use the loop pattern from this guide. Run with --update-snapshots to establish baselines. Commit the baseline PNGs to your repo. Change one token (a hex value, a border radius, a padding) and run the test again without --update-snapshots. Watch it fail with a diff image.

   • One screenshot per real variant in your system, all committed to the repo
   • The intentional token change triggered a test failure, not a pass
   • The HTML report shows the expected, actual, and diff images side by side
   • You now trust this tool enough to point it at more components