Puppeteer + Pixelmatch：在Mac和TravisCI Linux中比较屏幕截图

Question

我正在尝试通过加载页面并使用puppeteer拍摄元素的屏幕截图来实施JS测试。到目前为止，一切都很好，在我的本地系统中一切正常（在我修复了正常屏幕和视网膜显示器之间的障碍之后），但是当我在TravisCI上运行相同的测试时，发现文本差异很小，无法解决，任何人都有有什么线索吗？

这是我配置浏览器实例的方式：

browser = await puppeteer.launch(({
        headless: true,
        args :[
          '--hide-scrollbars',
          '--enable-font-antialiasing',
          '--force-device-scale-factor=1', '--high-dpi-support=1',
          '--no-sandbox', '--disable-setuid-sandbox', // Props for TravisCI
        ]
      }));

这是我比较屏幕截图的方式：

const compareScreenshots = (fileName) => {
  return new Promise((resolve) => {
    const base = fs.createReadStream(`${BASE_IMAGES_PATH}/${fileName}.png`).pipe(new PNG()).on('parsed', doneReading);
    const live = fs.createReadStream(`${WORKING_IMAGES_PATH}/${fileName}.png`).pipe(new PNG()).on('parsed', doneReading);

    let filesRead = 0;
    function doneReading() {
      // Wait until both files are read.
      if (++filesRead < 2) {
        return;
      }

      // Do the visual diff.
      const diff = new PNG({width: base.width, height: base.height});
      const mismatchedPixels = pixelmatch(
          base.data, live.data, diff.data, base.width, base.height,
          {threshold: 0.1});

        resolve({
          mismatchedPixels,
          diff,
        });
    }
  });
};

这是生成的差异的一个示例：

Answer 1

我有类似的问题。我在捕捉屏幕快照之前延迟了400毫秒，看来问题已解决。如果您想出更好的东西，我很想知道。

Answer 2

字体在不同的操作系统上的呈现可能略有不同。这可能会导致您所遇到的文本边缘出现伪影。您有几种选择：

• 在比较之前对图像应用轻微的高斯模糊（或使用CSS模糊）。这样可以消除图像中硬边缘之间的差异。
• 增加“阈值”（threshold）属性，以使抗混叠过滤的灵敏度降低。
• 通过使用整个图像的百分比（width * height * percent_threshold）在比较中允许一定数量的像素差异。该数字将受屏幕上任意给定点的文本数量影响。
• 对所有文本使用标准化的Web字体-如果您在两个系统上都使用相同的浏览器，则可以帮助使字体接近相同。

Answer 3

我遇到了类似的问题，最终我在 docker 容器中“本地”运行了我的快照测试。我还挂载了项目文件夹，因此每当必须更新快照时，它们都会在容器内部以及主机操作系统中进行更新。