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 # <= 3% is OK

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

If you set selector as an array, then the list of possible nodes will be used to 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.