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)