Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
testcafe-blink-diff
Advanced tools
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!
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, or Selector()
to match on the DOMoptions.blockOut
— List of Selector()
nodes to "block-out" on the snapshotoptions.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.
FAQs
Visual regression for Testcafé through BlinkDiff
The npm package testcafe-blink-diff receives a total of 4,502 weekly downloads. As such, testcafe-blink-diff popularity was classified as popular.
We found that testcafe-blink-diff demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.