Visual regression testing that runs in the browser.
SnapDiff captures DOM elements with SnapDOM, compares them to saved baselines, and shows what changed. Capture, diff, storage and review happen in the page; the Vitest suite adds disk baselines and tests that fail when visuals drift.
Built on SnapDOM, released from its own repository.Separate project
What it does
- A script tag with
data-snapattributes: baselines in IndexedDB, a badge to review changes. snapdiff-staleflags baselines older than their source files, with no rendering.defineDemoSuiteturns each demo into a Vitest browser test with disk baselines.
Install
npm install --save-dev @zumer/snapdiff @zumer/snapdom@latestUse it
import { snapdom } from '@zumer/snapdom'
import { createRunner, Reporter } from '@zumer/snapdiff'
const runner = createRunner({ snapdom, namespace: 'my-app', threshold: 0.1, failureRatio: 0 })
runner.test('homepage hero', () => document.querySelector('.hero'))
const reporter = new Reporter(runner)
reporter.mount()
await reporter.runAndShow()Where it fits
SnapDiff captures a DOM subtree rather than the browser window. Browser chrome is excluded; native controls can render differently from the live page.
SnapEye and SnapDiff both compare pixels. Choose SnapEye for an agent’s capture-and-inspect task; choose SnapDiff for a maintained set of visual tests and baseline reviews.
Works with SnapDOM 2.x and 3.x.
Ways to use itVitest browser suiteStaleness checkDeterminism