cypress-lens

Cypress Lens

Based on Cypress Visual Regression

Module for visual regression testing and reporting for Cypress.

Getting Started

Install:

$ npm install cypress-lens

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

const { defineConfig } = require("cypress");
const getCompareSnapshotsPlugin = require('cypress-visual-regression/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-visual-regression/dist/command');

compareSnapshotCommand();

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

import './commands'

TypeScript

If you're using TypeScript, use files with a .ts extension, as follows:

cypress/cypress.config.ts

import { defineConfig } from 'cypress';
import getCompareSnapshotsPlugin from 'cypress-visual-regression/dist/plugin';

export default defineConfig({
  env: {
    screenshotsFolder: './cypress/snapshots/actual',
    trashAssetsBeforeRuns: true,
    video: false
  },
  e2e: {
    setupNodeEvents(on, config) {
      getCompareSnapshotsPlugin(on, config);
    },
  },
});

cypress/support/commands.ts

import compareSnapshotCommand from 'cypress-visual-regression/dist/command';

compareSnapshotCommand();

cypress/tsconfig.json

{
  "compilerOptions": {
    "types": [
      "cypress",
      "cypress-visual-regression"
    ]
  }
}