npmpackage.info

Gathering detailed insights and metrics for cypress-image-snapshot

Other packages similar to cypress-image-snapshot

@types/cypress-image-snapshot

3.1.9

TypeScript definitions for cypress-image-snapshot

@simonsmith/cypress-image-snapshot

9.1.0

Cypress Image Snapshot binds jest-image-snapshot's image diffing logic to Cypress commands.

@emerson-eps/cypress-image-snapshot

1.5.3

Cypress Image Snapshot binds [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)'s image diffing logic to [Cypress.io](https://cypress.io) commands.

cypress-image-snapshot-plugin

1.0.0

Cypress image snapshot plugin fork.

Gathering detailed insights and metrics for cypress-image-snapshot

cypress-image-snapshot

Catch visual regressions in Cypress

4.0.1

893

MIT

JavaScript

30,696,848 2.8

Installations

npm install cypress-image-snapshot

Pull Requests

Open

45

Total

132

Closed

30

Merged

57

Issues

Open

78

Total

137

Closed

59

Releases

v4.0.1

Published on 22 Jan 2021

v4.0.0

Published on 23 Nov 2020

v3.1.1

Published on 03 Jun 2019

v3.1.0

Published on 23 May 2019

v3.0.2

Published on 13 May 2019

v3.0.1

Published on 14 Mar 2019

View all 7 releases

Developer

palmerhq

Developer Guide

BETA

Module System

Unable to determine the module system for this package.

Min. Node Version

>=8

Typescript Support

No

Node Version

12.20.0

NPM Version

6.14.8 Statistics

893 Stars

175 Commits

158 Forks

18 Watching

68 Branches

11 Contributors

Updated on 12 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

30,696,848

Last day

2.9%

18,408

Compared to previous day

Last week

7.5%

99,693

Compared to previous week

Last month

2.3%

447,686

Compared to previous month

Last year

-22.5%

5,478,829

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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

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/snapshots and 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.0 for cypress@>=3.0.0 <3.0.2
cypress-image-snapshot@>2.0.0 for cypress@>3.0.2.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

140 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-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-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 / 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-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-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-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 / 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 2024-11-18

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

Other packages similar to cypress-image-snapshot

Other packages similar to cypress-image-snapshot

cypress-image-snapshot

Installations

Pull Requests

45

132

30

57

Issues

78

137

59

Releases

Developer

palmerhq

Developer Guide

>=8

No

12.20.0

6.14.8

Statistics

Languages

Total Downloads

30,696,848

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Cypress Image Snapshot

Cypress GUI

Composite Image Diff

Test Reporter

Installation

Syntax

Usage

In your tests

Updating snapshots

Preventing failures

Reporter

Multiple reporters

Options

How it works

Cypress Version Requirements

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10