Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
cypress-image-snapshot
Advanced tools
The cypress-image-snapshot package is a plugin for Cypress that allows you to take and compare screenshots for visual regression testing. It helps ensure that your web application's UI does not change unexpectedly.
Snapshot Testing
This feature allows you to take a snapshot of the current state of a web page and compare it to a baseline image. If the images do not match, the test will fail.
cy.visit('http://example.com');
cy.matchImageSnapshot();
Custom Snapshot Names
You can specify a custom name for your snapshot, which is useful for organizing and identifying different snapshots.
cy.visit('http://example.com');
cy.matchImageSnapshot('customSnapshotName');
Snapshot Options
This feature allows you to customize the snapshot comparison with various options such as failure thresholds, custom diff configurations, and capture modes.
cy.visit('http://example.com');
cy.matchImageSnapshot({
failureThreshold: 0.03,
failureThresholdType: 'percent',
customDiffConfig: { threshold: 0.1 },
capture: 'viewport'
});
jest-image-snapshot is a Jest matcher for image comparisons. It is similar to cypress-image-snapshot but is designed to work with Jest, a popular JavaScript testing framework. It provides similar functionality for visual regression testing but is used in a different testing environment.
puppeteer-screenshot-tester is a package that allows you to take screenshots with Puppeteer and compare them for visual regression testing. It is similar to cypress-image-snapshot but uses Puppeteer, a headless browser automation tool, instead of Cypress.
webdriver-image-comparison is a package for visual regression testing with WebDriver. It allows you to take and compare screenshots in WebDriver-based tests. It is similar to cypress-image-snapshot but is designed for use with WebDriver.
Cypress Image Snapshot binds jest-image-snapshot's image diffing logic to Cypress.io commands. The goal is to catch visual regressions during integration tests.
When using cypress open
, errors are displayed in the GUI.
When an image diff fails, a composite image is constructed.
When using cypress run
and --reporter cypress-image-snapshot/reporter
, diffs are output to your terminal.
Install from npm
npm install --save-dev cypress-image-snapshot
then add the following in your project's <rootDir>/cypress/plugins/index.js
:
const {
addMatchImageSnapshotPlugin,
} = require('cypress-image-snapshot/plugin');
module.exports = (on, config) => {
addMatchImageSnapshotPlugin(on, config);
};
and in <rootDir>/cypress/support/commands.js
add:
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand(options);
// addMatchImageSnapshotPlugin
addMatchImageSnapshotPlugin(on, config);
// addMatchImageSnapshotCommand
addMatchImageSnapshotCommand();
addMatchImageSnapshotCommand(commandName);
addMatchImageSnapshotCommand(options);
addMatchImageSnapshotCommand(commandName, options);
// matchImageSnapshot
.matchImageSnapshot();
.matchImageSnapshot(name);
.matchImageSnapshot(options);
.matchImageSnapshot(name, options);
// ---or---
cy.matchImageSnapshot();
cy.matchImageSnapshot(name);
cy.matchImageSnapshot(options);
cy.matchImageSnapshot(name, options);
describe('Login', () => {
it('should be publicly accessible', () => {
cy.visit('/login');
// snapshot name will be the test title
cy.matchImageSnapshot();
// snapshot name will be the name passed in
cy.matchImageSnapshot('login');
// options object passed in
cy.matchImageSnapshot(options);
// match element snapshot
cy.get('#login').matchImageSnapshot();
});
});
Run Cypress with --env updateSnapshots=true
in order to update the base image files for all of your tests.
Run Cypress with --env failOnSnapshotDiff=false
in order to prevent test failures when an image diff does not pass.
Run Cypress with --reporter cypress-image-snapshot/reporter
in order to report snapshot diffs in your test results. This can be helpful to use with --env failOnSnapshotDiff=false
in order to quickly view all failing snapshots and their diffs.
If you using iTerm2, the reporter will output any image diffs right in your terminal 😎.
customSnapshotsDir
: Path to the directory that snapshot images will be written to, defaults to <rootDir>/cypress/snapshots
.customDiffDir
: Path to the directory that diff images will be written to, defaults to a sibling __diff_output__
directory alongside each snapshot.Additionally, any options for cy.screenshot()
and jest-image-snapshot can be passed in the options
argument to addMatchImageSnapshotCommand
and cy.matchImageSnapshot()
. The local options in cy.matchImageSnapshot()
will overwrite the default options set in addMatchImageSnapshot
.
For example, the default options we use in <rootDir>/cypress/support/commands.js
are:
addMatchImageSnapshotCommand({
failureThreshold: 0.03, // threshold for entire image
failureThresholdType: 'percent', // percent of image or number of pixels
customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
capture: 'viewport', // capture viewport in screenshot
});
We really enjoy the diffing workflow of jest-image-snapshot and wanted to have a similar workflow when using Cypress. Because of this, under the hood we use some of jest-image-snapshot's internals and simply bind them to Cypress's commands and plugins APIs.
The workflow of cy.matchImageSnapshot()
when running Cypress is:
cy.screenshot()
named according to the current test.<rootDir>/cypress/snapshots
and if so diff against that snapshot.<rootDir>/cypress/snapshots/__diff_output__
.Cypress's screenshot functionality has changed significantly across 3.x.x
versions. In order to avoid buggy behavior, please use the following version ranges:
cypress-image-snapshot@>=1.0.0 <2.0.0
for cypress@>=3.0.0 <3.0.2
cypress-image-snapshot@>2.0.0
for cypress@>3.0.2
.FAQs
Cypress bindings for jest-image-snapshot.
The npm package cypress-image-snapshot receives a total of 100,354 weekly downloads. As such, cypress-image-snapshot popularity was classified as popular.
We found that cypress-image-snapshot demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.