Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

testcafe-blink-diff

Package Overview
Dependencies
Maintainers
0
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

testcafe-blink-diff

Visual regression for Testcafé through BlinkDiff

  • 0.5.8
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
5.5K
decreased by-31.53%
Maintainers
0
Weekly downloads
 
Created
Source

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

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.

Contributors

FAQs

Package last updated on 26 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc