Install this dependency in your project, e.g. npm i testcafe-blink-diff --save-dev
Call the takeSnapshot()
helper within your tests, e.g.
import { takeSnapshot } from 'testcafe-blink-diff';
fixture('Snapshots')
.page('http://localhost:8080');
test('check something here', async t => {
// verify anything you want before
await t
.click('...')
.expect('...')
.ok();
// then pass the `t` reference to invoke the helper
await takeSnapshot(t);
});
Each time you run tests with --take-snapshot base
it'll take the base screenshots.
$ npx testcafe chrome:headless tests/e2e/cases -s tests/screenshots --take-snapshot
Now run the same tests --take-snapshot actual
to take the actual screenshots to compare with.
Finally, invoke the CLI for generating a simple generated/index.html
report, e.g.
$ npx testcafe-blink-diff tests/screenshots --compare base:actual --open --threshold 0.03 # <= 3% is OK
That's all, explore the generated report and enjoy!
takeSnapshot(t[, label[, options]])
label|options.label
— Readable name for the taken snapshotoptions.as
— Valid identifier for later comparisonoptions.timeout
— Waiting time before taking snapshotsoptions.selector
— String, orSelector()
to match on the DOMoptions.blockOut
— List ofSelector()
nodes to "block-out" on the snapshot
"Block-out" means matched DOM nodes are covered by a solid-color overlay, helping to reduce unwanted differences if they change often, e.g. ads
Type npx testcafe-blink-diff --help
to list all available options.