cypress-lens

Documentation | Changelog

The best module for visual testing for Cypress.

Developed in

Join us, we're hiring.

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-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

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-lens/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-lens/dist/command";

compareSnapshotCommand();

cypress/tsconfig.json

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

Changelog

1.7.0 (2023-08-30)

Features

• update reporter style and add test results (71ae0a1)