Skip to content

Configuring Cypres-image-snapshot for Cross-Device Consistency #270

Open
@GeetanshuGulati

Description

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

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions