vs Playwright
Playwright Test has visual comparisons through the toHaveScreenshot assertion.
Claims about Playwright come from its visual comparisons guide and the PageAssertions API reference, checked on 2026-11-03.
What it is
Section titled “What it is”You call await expect(page).toHaveScreenshot() in a Playwright test.
The first run writes the reference images.
Later runs compare against them.
References are stored in a folder named after the test file, such as example.spec.ts-snapshots, with the browser and platform in the file name.
You update them with npx playwright test --update-snapshots.
Screenshot assertions only work with the Playwright test runner.
Features
Section titled “Features”| Feature | Playwright | This project |
|---|---|---|
| Runs in | Playwright Test | Vitest Browser Mode, Storybook |
| Manual snapshots | Yes | Yes |
| Automatic snapshots | Not documented | Yes |
| Per-theme snapshots | Not documented | Yes |
| Comparison | pixelmatch |
pixel, ssim |
| Thresholds | threshold (default 0.2), maxDiffPixels, maxDiffPixelRatio |
failureThreshold with failureThresholdType pixel or percent |
| Waits for a stable page | Yes, until two consecutive screenshots match | Not provided |
| Masking | mask option takes locators |
mask takes selectors, locators or elements, with both providers |
| Animations | Disabled by default (animations) |
animations: 'disabled' finishes or cancels CSS animations, default 'allow' |
| Review UI | Not covered on the guide page | Vis panel in Storybook |
Sources for this project: comparison and thresholds, vis() options.
What Playwright does better
Section titled “What Playwright does better”- It is a full end-to-end test runner, so you can screenshot a whole flow across pages.
- It hides the caret and disables animations out of the box. Here, animations are disabled with the
animationsoption, which defaults to'allow'. - It waits for the page to be stable before it compares.
- It accepts
.webpas well as.pngbaselines.
What this project does better
Section titled “What this project does better”- It takes snapshots of your component tests and stories automatically.
- It takes one snapshot per theme from a single test.
- It offers SSIM as a second comparison method.
- It works with Storybook stories and shows failures in the Vis panel.
When to choose Playwright
Section titled “When to choose Playwright”Choose it when you test whole pages end to end.
When to choose this project
Section titled “When to choose this project”Choose it when you test components in Vitest Browser Mode or Storybook and want full coverage without an assertion in every test.
Migrate
Section titled “Migrate”Both can run in one repository because they write to different folders. Playwright baselines are not shared with this project. For components, move the rendering into a Vitest Browser Mode test or a story, enable the automatic snapshots, and create new baselines on the first run.