Playwright截图对比已有图片失败：如何指定固定对比图片？

原代码的问题在于使用了toMatchSnapshot——这是Jest的默认快照机制，它会根据测试用例名称、运行环境自动生成带后缀的快照文件，而非直接对比你指定的固定图片，所以才会出现ExistingIconPicture-chromium-win32.png is missing的提示。

要实现与仓库中固定图片（如Icon.png）的复用对比，可按以下两种方案操作：

方法一：用像素对比库直接自定义对比逻辑 #

这种方式完全脱离快照机制，灵活度更高，适合需要严格复用固定图片的场景。

1. 安装依赖 #

先安装处理图片和像素对比的工具：

npm install pixelmatch pngjs --save-dev

2. 编写测试代码 #

const fs = require('fs').promises;
const { PNG } = require('pngjs');
const pixelmatch = require('pixelmatch');

// 截取指定区域截图
const screenshotBuffer = await page.screenshot({
  clip: { height: 20, width: 20, x: 630, y: 283 },
  // 可选：保存截图到本地用于调试
  path: `${name}Icon.png`
});

// 读取仓库中已有的目标图片（替换为你的图片实际路径）
const targetImageBuffer = await fs.readFile('./test/fixtures/Icon.png');

// 解析图片为PNG对象
const screenshotPng = PNG.sync.read(screenshotBuffer);
const targetPng = PNG.sync.read(targetImageBuffer);

// 校验图片尺寸一致性（截图区域固定时可省略，但建议保留）
if (screenshotPng.width !== targetPng.width || screenshotPng.height !== targetPng.height) {
  throw new Error('截图与目标图片尺寸不匹配');
}

// 计算像素差异数
const diffPixels = pixelmatch(
  screenshotPng.data,
  targetPng.data,
  null,
  screenshotPng.width,
  screenshotPng.height,
  { threshold: 0.1 } // 差异阈值，可根据需求调整，0为完全匹配
);

// 断言：两张图片无像素差异
expect(diffPixels).toBe(0);

方法二：配置jest-image-snapshot固定快照名称 #

如果坚持使用Jest快照体系，可通过jest-image-snapshot的配置固定文件名，避免自动生成带环境后缀的文件。

1. 安装依赖 #

npm install jest-image-snapshot --save-dev

2. 配置Jest（jest.config.js） #

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
};

3. 编写jest.setup.js扩展断言 #

const { toMatchImageSnapshot } = require('jest-image-snapshot');

expect.extend({
  toMatchFixedImageSnapshot(received, options = {}) {
    return toMatchImageSnapshot.call(this, received, {
      ...options,
      customSnapshotIdentifier: 'Icon', // 固定快照名称，不随测试/环境变化
      snapshotPath: './test/fixtures', // 指定已有图片所在目录
    });
  },
});

4. 在测试代码中使用 #

const screenshot = await page.screenshot({
  clip: { height: 20, width: 20, x: 630, y: 283 },
  path: `${name}Icon.png`
});

expect(screenshot).toMatchFixedImageSnapshot();

注意：首次运行前需确保./test/fixtures/Icon.png已存在，若不存在会自动生成该文件，后续测试将直接对比此固定文件。

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