Configuring Cypres-image-snapshot for Cross-Device Consistency

[GeetanshuGulati]

We're newly integrating Cypress into our project for component testing and have also integrated a snapshot testing plugin for our UI components. However, when I run snapshot testing, it's failing even though the snapshots appear visually identical.

I suspect this might be due to the DPI (Dots Per Inch) settings being different between the devices where the initial snapshots were taken and where the tests are currently running.

What configuration settings can we adjust in Cypress to ensure snapshots are taken that are identical across all devices?

command.ts file:

import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command;

addMatchImageSnapshotCommand({
  failureThreshold: 0.0,
  failureThresholdType: 'percent',
});

cypress.config file:

import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
    },
    setupNodeEvents(on) {
      addMatchImageSnapshotPlugin(on);
    },
  },
});

snapshot taken by cy.matchImageSnapshot(image-name)

[simonsmith]

Simplest way to solve this is to run your Cypress tests in a Docker container to ensure consistency across platforms. This extends to things like inputs, fonts etc across different platforms.

You will struggle to generate snapshots on a Mac and then run the tests on a Linux OS on a CI machine for example