testcafe-blink-diff
v0.5.8
Published
Visual regression for Testcafé through BlinkDiff
Downloads
30,524
Readme
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
as3%
which may be confusing — since v0.5.x this value is kept as is, so0.03
will be0.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 snapshotoptions.as
— Valid identifier for later comparisonoptions.base
— Custom folder for saving the taken snapshotoptions.timeout
— Waiting time before taking snapshotsoptions.selector
— String, orSelector()
to match on the DOMoptions.blockOut
— List ofSelector()
nodes to "block-out" on the snapshotoptions.fullPage
— EnablefullPage: true
as options passed totakeScreenshot(...)
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.