qain

Style-regression testing that reports what changed and what merely moved.

Not pixels — the browser's resolved computed styles, diffed semantically, with each change attributed to the CSS declaration that caused it.

Get started Try the playground →

The demo

One page, broken four ways at once

Everything below is generated by CI from the example billing page and a stylesheet that breaks it four ways: a reflow, a WCAG contrast regression, a stacking-order change, and a :hover state that stopped differing — plus a utility-class rehash that must produce no diff at all.

the billing page before the regression — before

the billing page after the regression — after

pixel diff: changed pixels in red — pixel diff (`qain shot`)

Explore

See what qain produced

The pixel diff is where a screenshot tool stops. These are qain's answers — the same capture, rebuilt and explained.

Playground →

Edit a self-contained HTML page in your browser and watch qain diff it live — capture → diff → replay, entirely in the tab, no server or CDP.

Interactive replay diff →

Both pages rebuilt pixel-exactly from the snapshots; fade one into the other, causes outlined in red. qain diff --replay

HTML report →

Every change, its cause, and the file:line behind it. qain diff --html

Terminal output →

What CI and coding agents read. Exit code 1 when the diff is non-empty.

before.json →

The raw snapshot: every element's resolved styles, layout box, paint order, and matched CSS rules, as plain JSON.

after.json →

The same, after the regression — the second half of the diff above.

Install

Run it on any URL a browser can open

Node 22+ or Bun. Then read the docs — getting started, the CLI reference, recipes, the snapshot format, and the library API.

shell

npx playwright install chromium   # once
npx @qain/cli snap https://example.com --rules -o page.json