testcafe-blink-diff

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(...)

If you set selector as an array, then the list of possible nodes will be used to the snapshot.

If no selectors are given, then it'll take page-screenshot of the visible content, unless fullPage is enabled.

"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.