Playwright

A browser automation tool for end-to-end tests, visual regression, and automatic component screenshots.

All Dictionary

In one sentence

Playwright drives a real browser from a script, so I can click through a site, screenshot every component state, and compare it against yesterday’s version without lifting a finger.

What it is

Playwright is an open-source browser automation tool from Microsoft. It runs real Chromium, Firefox, and WebKit sessions from a test file, which makes it useful for end-to-end testing, visual regression testing, and generating component screenshots across breakpoints and themes.

Why it matters for designers

Designers do not need to be engineers to benefit from Playwright. I can use it to auto-capture every component state in every breakpoint, then diff the images to spot unintended visual changes. It is the fastest way to turn “did this change break anything?” into a report I can review in minutes.

Example

A script that screenshots a button in three states:

test('button states', async ({ page }) => {
  await page.goto('http://localhost:6006/?path=/story/button--primary');
  await page.screenshot({ path: 'button-default.png' });
  await page.hover('button');
  await page.screenshot({ path: 'button-hover.png' });
  await page.keyboard.press('Tab');
  await page.screenshot({ path: 'button-focus.png' });
});

Run it nightly and I get a folder of fresh screenshots for every component, ready to compare.

When to use it

  • You want automated visual checks without paying for a service
  • You need to test flows across multiple browsers and viewports
  • You want to feed screenshots into a design review or audit
  • You are pairing it with Storybook to screenshot every story

See also