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