snapDiff

Visual regression testing
in the browser.

Capture DOM elements with snapDOM, compare them with saved baselines, and review what changed.

npm install --save-dev @zumer/snapdiff @zumer/snapdom

Try an example

  • Script tag

    Mark elements with data-snap and run checks when the page loads. Missing baselines are saved automatically.

  • Test runner

    Register elements with runner.test(). Run a check, change the example, and compare the result.

  • Component folder

    Load HTML examples from a directory listing or manifest and test each one in an iframe.

From your code

import { snapdom } from '@zumer/snapdom'
import { createRunner, Reporter } from '@zumer/snapdiff'

const runner = createRunner({ snapdom })
runner.test('profile', () =>
  document.querySelector('#profile'))

const report = new Reporter(runner)
report.mount()
await report.runAndShow()

Saving a baseline

The runner marks a first capture as new. Review it in the report and save it as a baseline. Later runs compare against that image.

These examples keep baselines in your browser. Use the report’s export and import controls to move them between browsers.

Running in CI

The package also includes a Vitest browser suite with baselines on disk, and snapdiff-stale to check for outdated baselines. See the README for setup and API details.