Follow the steps below to have access to the comparison command so you can build visual regression tests
Install Cypress:
npm i -D cypress
Install the package:
npm i -D cypress-image-diff-js
Then initialise Cypress if you don't have a project:
npx cypress open
Import and initialise the Cypress image diff plugin:
// Cypress v10+
// cypress.config.js
const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin');
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
return getCompareSnapshotsPlugin(on, config);
},
},
});
// Cypress v10+ with TypeScript
// cypress.config.ts
import getCompareSnapshotsPlugin from 'cypress-image-diff-js/dist/plugin';
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
return getCompareSnapshotsPlugin(on, config);
},
},
});
// Cypress < v10
// cypress/plugin/index.js
module.exports = (on, config) => {
const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin')
return getCompareSnapshotsPlugin(on, config)
};
Import and add Cypress image command:
// Cypress v10+
// cypress/support/{scheme}.js, where {scheme} defaults to e2e
const compareSnapshotCommand = require('cypress-image-diff-js/dist/command');
compareSnapshotCommand();
// or Cypress v10+ with TypeScript
// cypress/support/{scheme}.ts, where {scheme} defaults to e2e
import compareSnapshotCommand from 'cypress-image-diff-js/dist/command';
compareSnapshotCommand();
// Cypress < v10
// cypress/support/index.js
require('./commands');
// cypress/support/commands.js
const compareSnapshotCommand = require('cypress-image-diff-js/dist/command');
compareSnapshotCommand();