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);
});
Run your tests adding --take-snapshot
to take the base screenshots.
$ npx testcafe chrome:headless tests/e2e/cases -s tests/screenshots --take-snapshot
Now run the same tests without --take-snapshot
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 --open --threshold 0.03 # <= 3% is OK
That's all, explore the generated report and enjoy!