testcafe-blink-diff
Visual regression for Testcafé through BlinkDiff
Last updated 5 days ago by pateketrueke .
MIT · Original npm · Tarball · package.json
$ cnpm install testcafe-blink-diff 
SYNC missed versions from official npm registry.

build NPM version Known Vulnerabilities

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

Current Tags

  • 0.4.7                                ...           latest (5 days ago)

30 Versions

  • 0.4.7                                ...           5 days ago
  • 0.4.6                                ...           4 months ago
  • 0.4.5                                ...           8 months ago
  • 0.4.4                                ...           8 months ago
  • 0.4.3                                ...           10 months ago
  • 0.4.2                                ...           a year ago
  • 0.4.1                                ...           a year ago
  • 0.4.0 [deprecated]           ...           a year ago
  • 0.3.15                                ...           a year ago
  • 0.3.14                                ...           a year ago
  • 0.3.13                                ...           a year ago
  • 0.3.12                                ...           a year ago
  • 0.3.11                                ...           a year ago
  • 0.3.10                                ...           a year ago
  • 0.3.9                                ...           a year ago
  • 0.3.8 [deprecated]           ...           a year ago
  • 0.3.7                                ...           2 years ago
  • 0.3.6                                ...           2 years ago
  • 0.3.5                                ...           2 years ago
  • 0.3.4                                ...           2 years ago
  • 0.3.3                                ...           2 years ago
  • 0.3.2                                ...           2 years ago
  • 0.3.1                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.3                                ...           2 years ago
  • 0.2.2                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 1
This Week 1
This Month 12
Last Day 0
Last Week 11
Last Month 0
Dependencies (4)
Dev Dependencies (9)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |