配置Cypress快照实现跨设备一致性，解决DPI引发的测试失败

针对DPI差异引发的快照测试失败，需要从三个核心维度调整配置，确保跨设备快照完全一致：

1. 固定测试视口尺寸 #

在cypress.config.ts中添加固定的视口宽高，确保所有测试在统一的渲染尺寸下执行：

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

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
    },
    // 固定视口尺寸，可根据组件测试需求调整数值
    viewportWidth: 1280,
    viewportHeight: 720,
    setupNodeEvents(on, config) {
      addMatchImageSnapshotPlugin(on);
      // 配置浏览器启动参数，强制设备缩放比例为1
      on('before:browser:launch', (browser = {}, launchOptions) => {
        // 针对Chrome等Chromium内核浏览器
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--force-device-scale-factor=1');
        }
        // 针对Electron浏览器
        if (browser.name === 'electron') {
          launchOptions.preferences.webPreferences.zoomFactor = 1;
        }
        return launchOptions;
      });
    },
  },
});

2. 强制消除DPI缩放影响 #

通过before:browser:launch钩子给浏览器添加启动参数，强制设备缩放比例为1，彻底规避不同DPI设备的渲染差异：

• Chromium浏览器：添加--force-device-scale-factor=1参数
• Electron浏览器：设置zoomFactor=1

3. 优化快照对比参数 #

调整command.ts中的快照命令配置，禁用动画干扰并设置合理的对比阈值：

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

addMatchImageSnapshotCommand({
  failureThreshold: 0.01, // 允许0.01%的像素差异，避免极端场景误判
  failureThresholdType: 'percent',
  capture: 'viewport', // 确保捕获整个视口范围
  disableCSSAnimation: true, // 禁用CSS动画，防止过渡状态导致快照不一致
  customDiffConfig: { threshold: 0.01 }, // 自定义图片像素对比阈值
});

关键配置说明 #

• 固定视口：统一渲染基础尺寸，避免不同设备默认视口差异引发的快照变化
• 强制缩放比例：让浏览器以1:1像素比例渲染，消除高DPI设备的自动缩放影响
• 禁用动画：避免组件动画的过渡状态被捕获，确保快照是稳定的最终状态
• 阈值调整：微小的像素差异（如抗锯齿）不会导致测试失败，同时保证视觉一致性

内容的提问来源于stack exchange，提问作者Geetanshu Gulati