Gathering detailed insights and metrics for cypress-image-snapshot
Gathering detailed insights and metrics for cypress-image-snapshot
Installations
npm install cypress-image-snapshotDeveloper Guide
BETA
Typescript
No
Module System
N/A
Min. Node Version
>=8
Node Version
12.20.0
NPM Version
6.14.8
Score
59.5
Supply Chain
51
Quality
70.8
Maintenance
50
Vulnerability
93.2
License
Releases
7
Languages
1
JavaScript
JavaScript (100%)
Developer
palmerhq
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
893 Stars
175 Commits
156 Forks
16 Watchers
68 Branches
11 Contributors
Updated on May 04, 2025
Maintainers
3
Package Meta Information
Latest Version
4.0.1
Package Id
cypress-image-snapshot@4.0.1
Unpacked Size
21.40 kB
Size
6.65 kB
File Count
8
NPM Version
6.14.8
Node Version
12.20.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Cypress Image Snapshot
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.
See it in action!
Cypress GUI
When using cypress open, errors are displayed in the GUI.
Composite Image Diff
When an image diff fails, a composite image is constructed.
Test Reporter
When using cypress run and --reporter cypress-image-snapshot/reporter, diffs are output to your terminal.
Installation
Install from npm
1npm install --save-dev cypress-image-snapshot
then add the following in your project's <rootDir>/cypress/plugins/index.js:
1const { 2 addMatchImageSnapshotPlugin, 3} = require('cypress-image-snapshot/plugin'); 4 5module.exports = (on, config) => { 6 addMatchImageSnapshotPlugin(on, config); 7};
and in <rootDir>/cypress/support/commands.js add:
1import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'; 2 3addMatchImageSnapshotCommand();
Syntax
1// addMatchImageSnapshotPlugin
2addMatchImageSnapshotPlugin(on, config);
3
4// addMatchImageSnapshotCommand
5addMatchImageSnapshotCommand();
6addMatchImageSnapshotCommand(commandName);
7addMatchImageSnapshotCommand(options);
8addMatchImageSnapshotCommand(commandName, options);
9
10// matchImageSnapshot
11.matchImageSnapshot();
12.matchImageSnapshot(name);
13.matchImageSnapshot(options);
14.matchImageSnapshot(name, options);
15
16// ---or---
17
18cy.matchImageSnapshot();
19cy.matchImageSnapshot(name);
20cy.matchImageSnapshot(options);
21cy.matchImageSnapshot(name, options);Usage
In your tests
1describe('Login', () => { 2 it('should be publicly accessible', () => { 3 cy.visit('/login'); 4 5 // snapshot name will be the test title 6 cy.matchImageSnapshot(); 7 8 // snapshot name will be the name passed in 9 cy.matchImageSnapshot('login'); 10 11 // options object passed in 12 cy.matchImageSnapshot(options); 13 14 // match element snapshot 15 cy.get('#login').matchImageSnapshot(); 16 }); 17});
Updating snapshots
Run Cypress with --env updateSnapshots=true in order to update the base image files for all of your tests.
Preventing failures
Run Cypress with --env failOnSnapshotDiff=false in order to prevent test failures when an image diff does not pass.
Reporter
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 😎.
Multiple reporters
Similar use case to: https://github.com/cypress-io/cypress-example-docker-circle#spec--xml-reports
If you want to report snapshot diffs as well as generate XML junit reports, you can use mocha-multi-reporters.
npm install --save-dev mocha mocha-multi-reporters mocha-junit-reporter
You'll then want to set up a cypress-reporters.json which may look a little like this:
1{ 2 "reporterEnabled": "spec, mocha-junit-reporter, cypress-image-snapshot/reporter", 3 "mochaJunitReporterReporterOptions": { 4 "mochaFile": "cypress/results/results-[hash].xml" 5 } 6}
where reporterEnabled is a comma-separated list of reporters.
You can then run cypress like this:
cypress run --reporter mocha-multi-reporters --reporter-options configFile=cypress-reporters.json
or add the following to your cypress.json
{
..., //other options
"reporter": "mocha-multi-reporters",
"reporterOptions": {
"configFile": "cypress-reporters.json"
}
}
Options
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:
1addMatchImageSnapshotCommand({
2 failureThreshold: 0.03, // threshold for entire image
3 failureThresholdType: 'percent', // percent of image or number of pixels
4 customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
5 capture: 'viewport', // capture viewport in screenshot
6});How it works
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:
- Take a screenshot with
cy.screenshot()named according to the current test. - Check if a saved snapshot exists in
<rootDir>/cypress/snapshotsand if so diff against that snapshot. - If there is a resulting diff, save it to
<rootDir>/cypress/snapshots/__diff_output__.
Cypress Version Requirements
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.0forcypress@>=3.0.0 <3.0.2cypress-image-snapshot@>2.0.0forcypress@>3.0.2.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/10 approved changesets -- score normalized to 3
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/jaredpalmer/cypress-image-snapshot/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/jaredpalmer/cypress-image-snapshot/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/jaredpalmer/cypress-image-snapshot/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/jaredpalmer/cypress-image-snapshot/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/jaredpalmer/cypress-image-snapshot/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/jaredpalmer/cypress-image-snapshot/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/jaredpalmer/cypress-image-snapshot/test.yml/master?enable=pin
- Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 23 are checked with a SAST tool
Reason
150 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-29gp-92wp-94q8
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-mvjj-gqq2-p4hw
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-3329-pjwv-fjpg
- Warn: Project is vulnerable to: GHSA-p6j9-7xhc-rhwp
- Warn: Project is vulnerable to: GHSA-89gv-h8wf-cg8r
- Warn: Project is vulnerable to: GHSA-gcv8-gh4r-25x6
- Warn: Project is vulnerable to: GHSA-gmv4-r438-p67f
- Warn: Project is vulnerable to: GHSA-8h2f-7jc4-7m3m
- Warn: Project is vulnerable to: GHSA-3vjf-82ff-p4r3
- Warn: Project is vulnerable to: GHSA-g694-m8vq-gv9h
- Warn: Project is vulnerable to: GHSA-pv4c-p2j5-38j4
- Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-3gx7-xhv7-5mx3
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-79jw-6wg7-r9g4
- Warn: Project is vulnerable to: GHSA-r5cq-9537-9rpf
- Warn: Project is vulnerable to: GHSA-84p7-fh9c-6g8h
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.8
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More