npmpackage.info

Gathering detailed insights and metrics for cypress-plugin-snapshots

Other packages similar to cypress-plugin-snapshots

@kpdecker/cypress-plugin-snapshots

1.5.1

Cypress snapshot functionality for data

@simonsmith/cypress-image-snapshot

9.1.0

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

eslint-plugin-cypress

4.1.0

An ESLint plugin for projects using Cypress

@mosofsky/cypress-plugin-snapshots

1.4.7

Cypress snapshot functionality for data

Gathering detailed insights and metrics for cypress-plugin-snapshots

cypress-plugin-snapshots

Plugin for snapshot tests in Cypress.io

1.4.4

497

MIT

JavaScript

9,221,158 3.2

Installations

npm install cypress-plugin-snapshots

Pull Requests

Open

31

Total

97

Closed

19

Merged

47

Issues

Open

87

Total

142

Closed

55

Releases

v1.4.4

Published on 11 Aug 2020

v1.4.3

Published on 08 May 2020

Release v1.4.2

v1.4.2

Published on 08 May 2020

View all 3 releases

Developer

meinaart

Developer Guide

BETA

Module System

Unable to determine the module system for this package.

Min. Node Version

>=8.2.1

Typescript Support

Yes

Node Version

12.18.3

NPM Version

6.14.6 Statistics

497 Stars

157 Commits

118 Forks

15 Watching

19 Branches

23 Contributors

Updated on 11 Oct 2024

Languages

JavaScript (84.51%)

CSS (8.32%)

HTML (7.16%)

Total Downloads

Cumulative downloads

Total Downloads

9,221,158

Last day

-11.6%

5,532

Compared to previous day

Last week

-3.6%

30,890

Compared to previous week

Last month

-2.3%

141,303

Compared to previous month

Last year

-14.1%

2,027,870

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

cypress-plugin-snapshots

Plugin for snapshot tests in Cypress.io.

cypress-plugin-snapshots

Installation

npm i cypress-plugin-snapshots -S

Usage for text snapshots

1describe('data test', () => {
2  it('toMatchSnapshot - JSON', () => {
3    return cy.request('data.json')
4      .its('body')
5      .toMatchSnapshot();
6  });
7
8  it('toMatchSnapshot - JSON with options', () => {
9    return cy.request('data.json')
10      .its('body')
11      .toMatchSnapshot({
12        ignoreExtraFields: true,
13      });
14  });
15
16  it('toMatchSnapshot - HTML', () => {
17    cy.visit('page.html')
18      .then(() => {
19        cy.get('div').toMatchSnapshot();
20      });
21  });
22});

You can pass the following options to toMatchSnapshot to override default behavior.

1{
2  "ignoreExtraFields": false,         // Ignore fields that are not in snapshot
3  "ignoreExtraArrayItems": false,     // Ignore if there are extra array items in result
4  "normalizeJson": true,              // Alphabetically sort keys in JSON
5  "replace": {                        // Replace `${key}` in snapshot with `value`.
6    "key": "value",
7  }
8}

replace Use replace with caution. Tests should be deterministic. It's often a better solution to influence your test result instead of your snapshot (by mocking data for example).

Usage for image snapshots

1it('toMatchImageSnapshot - element', () => {
2  cy.visit('/static/stub.html')
3    .then(() => {
4      cy.get('[data-test=test]')
5        .toMatchImageSnapshot();
6    });
7});
8
9it('toMatchImageSnapshot - whole page', () => {
10  cy.visit('/static/stub.html')
11    .then(() => {
12      cy.document()
13        .toMatchImageSnapshot();
14    });
15});

You can pass the following options to toMatchImageSnapshot to override default behavior.

1{
2  "imageConfig": {
3    "createDiffImage": true,                // Should a "diff image" be created, can be disabled for performance
4    "threshold": 0.01,                      // Amount in pixels or percentage before snapshot image is invalid
5    "thresholdType": "percent",             // Can be either "pixel" or "percent"
6  },
7  "name": "custom image name",            // Naming resulting image file with a custom name rather than concatenating test titles
8  "separator": "custom image separator",  // Naming resulting image file with a custom separator rather than using the default ` #`
9}

You can also use any option from the cypress.screenshot arguments list.

For example:

1cy.get('.element')
2  .toMatchImageSnapshot({
3    clip: { x: 0, y: 0, width: 100, height: 100 },
4  });

Configure Cypress.io

Add this to your cypress.json configuration file:

1"ignoreTestFiles": [
2  "**/__snapshots__/*",
3  "**/__image_snapshots__/*"
4]

Plugin

Find your cypress/plugins/index.js file and change it to look like this:

1const { initPlugin } = require('cypress-plugin-snapshots/plugin');
2
3module.exports = (on, config) => {
4  initPlugin(on, config);
5  return config;
6};

Command

Find your cypress/support/index.js file and add the following line:

1import 'cypress-plugin-snapshots/commands';

Make changes to default configuration

You can customize the configuration in the cypress.json file in the root of your Cypress project.

Add the configuration below to your cypress.json file to make changes to the default values.

1"env": {
2  "cypress-plugin-snapshots": {
3    "autoCleanUp": false,            // Automatically remove snapshots that are not used by test
4    "autopassNewSnapshots": true,    // Automatically save & pass new/non-existing snapshots
5    "diffLines": 3,                  // How many lines to include in the diff modal
6    "excludeFields": [],             // Array of fieldnames that should be excluded from snapshot
7    "ignoreExtraArrayItems": false,  // Ignore if there are extra array items in result
8    "ignoreExtraFields": false,      // Ignore extra fields that are not in `snapshot`
9    "normalizeJson": true,           // Alphabetically sort keys in JSON
10    "prettier": true,                // Enable `prettier` for formatting HTML before comparison
11    "imageConfig": {
12      "createDiffImage": true,       // Should a "diff image" be created, can be disabled for performance
13      "resizeDevicePixelRatio": true,// Resize image to base resolution when Cypress is running on high DPI screen, `cypress run` always runs on base resolution
14      "threshold": 0.01,             // Amount in pixels or percentage before snapshot image is invalid
15      "thresholdType": "percent"     // Can be either "pixels" or "percent"
16    },
17    "screenshotConfig": {            // See https://docs.cypress.io/api/commands/screenshot.html#Arguments
18      "blackout": [],
19      "capture": "fullPage",
20      "clip": null,
21      "disableTimersAndAnimations": true,
22      "log": false,
23      "scale": false,
24      "timeout": 30000
25    },
26    "serverEnabled": true,           // Enable "update snapshot" server and button in diff modal
27    "serverHost": "localhost",       // Hostname for "update snapshot server"
28    "serverPort": 2121,              // Port number for  "update snapshot server"
29    "updateSnapshots": false,        // Automatically update snapshots, useful if you have lots of changes
30    "backgroundBlend": "difference"  // background-blend-mode for diff image, useful to switch to "overlay"
31  }
32}

Caveats :warning:

There is currently an issue when running "All Tests" in Cypress with this plugin. You can follow the progress on the issue here and here. When running "All Tests" any tests that utilize cypress-plugin-snapshots will throw an error.

Roadmap

Below is a list of functionality that is under consideration for implementing in a next version.

Fix handling of "update snapshot" button that contains a replacable field
Disable "update snapshots" server in headless mode
Add more unit tests
Add JSDoc documentation
Improve TypeScript bindings

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style.

License

This plugin is released under the MIT license.

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.

2

Pinned-Dependencies

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

Reason

dependency not pinned by hash detected -- score normalized to 2

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/test.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/meinaart/cypress-plugin-snapshots/test.yml/master?enable=pin
Info: 0 out of 12 GitHub-owned GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

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

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

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

61 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-w7q9-p3jq-fmhm
Warn: Project is vulnerable to: GHSA-xvf7-4v9q-58w6
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
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-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-x565-32qp-m3vf
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
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-fxwf-4rqh-v8g3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
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

Score

3.2

/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-plugin-snapshots

Other packages similar to cypress-plugin-snapshots

cypress-plugin-snapshots

Installations

Pull Requests

31

97

19

47

Issues

87

142

55

Releases

Developer

meinaart

Developer Guide

>=8.2.1

Yes

12.18.3

6.14.6

Statistics

Languages

Total Downloads

9,221,158

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

cypress-plugin-snapshots

Installation

Usage for text snapshots

Usage for image snapshots

Configure Cypress.io

Plugin

Command

Make changes to default configuration

Caveats :warning:

Roadmap

Contributing

License

10

10

10

3

2

0

0

0

0

0

0

0

3.2

/10