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.

It is a photo shoot that runs itself from a call sheet. The script lists every component, state, and breakpoint, a real browser poses them, and the camera fires the same shots every night. Compare today’s contact sheet against yesterday’s and any unplanned change jumps out.

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