Visual tests for your app
Catch a page that changed by mistake with knighn drift, on your own Mac.
knighn drift draws the pages of your app and compares each one with a saved picture, its baseline. A page that changed more than its threshold fails. It runs on your Mac; nothing runs in the cloud.
Write a test
A test is a file whose name ends in .knighn.spec.ts, anywhere in the project. It names a route and the widths to draw:
// tests/visual/home.knighn.spec.ts
export default {
route: '/',
// A phone and a desktop window.
frames: [375, 1440],
// Font drawing can change by a few pixels between Chrome versions.
threshold: 0.01
}
A file can also export a list of tests, each with a name.
Run it
knighn drift
The first run writes each baseline to __knighn__/ beside the test; commit those pictures. Later runs compare with them.
| You want | Run |
|---|---|
| Accept a change you meant | knighn drift --update |
| Fail on a page with no baseline | knighn drift --strict |
| Only some tests | knighn drift --filter home |
| Use a dev server that already runs | knighn drift --url http://localhost:3000 |
Just the pictures
knighn screens draws every route as a PNG file with no test, for a quick look or a review:
knighn screens --out shots --widths 390,1440