Testcafe-blink-diff NPM

How it works?

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

Note that v0.4.x will still treat 0.03 as 3% which may be confusing — since v0.5.x this value is kept as is, so 0.03 will be 0.03% and nothing else!

That's all, explore the generated report and enjoy!

API Options

takeSnapshot(t[, label[, options]])

If the given selector does not exists on the DOM, a warning will be raised.

label|options.label — Readable name for the taken snapshot
options.as — Valid identifier for later comparison
options.base — Custom folder for saving the taken snapshot
options.timeout — Waiting time before taking snapshots
options.selector — String, or Selector() to match on the DOM
options.blockOut — List of Selector() nodes to "block-out" on the snapshot
options.fullPage — Enable fullPage: true as options passed to takeScreenshot(...)