Documentation | Changelog

The best module for visual testing for Cypress.

Join us, we're hiring.

Cypress Lens

Based on Cypress Visual Regression

Module for visual regression testing and reporting for Cypress.

Visual Regression Demo

Reporter Demo

Getting Started

Install:

$ npm install cypress-lens

1. Setup visual regression

Add the following config to your cypress.config.js file:

const { defineConfig } = require("cypress");
const getCompareSnapshotsPlugin = require("cypress-lens/dist/plugin");

module.exports = defineConfig({
  screenshotsFolder: "./cypress/snapshots/actual",
  trashAssetsBeforeRuns: true,
  video: false,
  e2e: {
    setupNodeEvents(on, config) {
      getCompareSnapshotsPlugin(on, config);
    },
  },
});

Add the command to cypress/support/commands.js:

const compareSnapshotCommand = require("cypress-lens/dist/command");

compareSnapshotCommand();

Make sure you import commands.js in cypress/support/e2e.js:

import "./commands";

TypeScript

cypress/tsconfig.json

{
  "compilerOptions": {
    "types": ["cypress", "cypress-lens"]
  }
}

1. Setup reporter

Install cypress-multi-reporters: This plugin allows us to use more than one reporters since we want to keep the cypress default spec reports.

$ npm install cypress-multi-reporters

Create reporter-config.json and place the following code

{
  "reporterEnabled": "spec, cypress-lens"
}

Add the following config to your cypress.config.js file:

const { defineConfig } = require("cypress");
const getCompareSnapshotsPlugin = require("cypress-lens/dist/plugin");

module.exports = defineConfig({
  screenshotsFolder: "./cypress/snapshots/actual",
  trashAssetsBeforeRuns: true,
  video: false,
  e2e: {
    reporter: "cypress-multi-reporters",
    reporterOptions: {
      configFile: "reporter-config.json",
    },
    setupNodeEvents(on, config) {
      getCompareSnapshotsPlugin(on, config);
    },
  },
});

3. How to use

it("Should display the home page according to baseline snapshot", () => {
  cy.visit("www.dreamshot.bg");
  cy.compareSnapshot("home-page");
});

Options

failSilently is enabled by default. Add the following config to your cypress.config.js file to see the errors:

{
  env: {
    failSilently: false;
  }
}

You can also pass default arguments to compareSnapshotCommand():

const compareSnapshotCommand = require("cypress-visual-regression/dist/command");

compareSnapshotCommand({
  capture: "fullPage",
});

These will be used by default when no parameters are passed to the compareSnapshot command.

Take the base images:

$ ./node_modules/.bin/cypress run --env type=base"

Find regressions:

$ ./node_modules/.bin/cypress run --env type=actual