Puppeteer + Pixelmatch：比较 Mac 和 TravisCI Linux 中的屏幕截图答案

【问题标题】：Puppeteer + Pixelmatch: Comparing screenshots in Mac and TravisCI LinuxPuppeteer + Pixelmatch：比较 Mac 和 TravisCI Linux 中的屏幕截图
【发布时间】：2021-01-12 04:53:37
【问题描述】：

我正在尝试通过加载页面并使用 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,
        });
    }
  });
};

以下是由此产生的差异示例：

【问题讨论】：

标签： javascript puppeteer

【解决方案1】：

我遇到了类似的问题。我在截屏之前延迟了 400 毫秒，它似乎已经解决了这个问题。如果你想出更好的东西，我很想知道。

【讨论】：

知道为什么解决了这个问题吗？我有一个不同的问题，动画仍在运行，但我通过加快它们来解决这个问题` await page._client.send('Animation.setPlaybackRate', {playbackRate: 12 }); `
我的猜测是，当 puppeteer 认为它已准备好拍摄快照时，事情仍在摇摆不定。当我在手动调整窗口大小时看到一些抖动时，我得出了这个猜测。
有趣，我会告诉你并报告
我想知道抖动是否是由 CSS 过渡引起的。页面上方某处的一个微小的快速过渡可以做到这一点。我在页面顶部有一个按钮，它在某个断点处变小。我认为这就是导致我的问题的原因。
我不这么认为，所以我加了await page._client.send('Animation.setPlaybackRate', { playbackRate: 12 });

【解决方案2】：

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

在比较之前对图像应用轻微的高斯模糊（或使用 css 模糊）。这将消除图像中硬边缘之间的差异。
增加“阈值”属性以降低抗锯齿过滤的敏感度。
通过使用总图像的百分比（宽度 * 高度 * 百分比阈值）在您的比较中允许一定数量的像素差异。此数字将受屏幕上任意给定点的文本数量影响。
对所有文本使用标准化的 Web 字体 - 鉴于您在两个系统上使用相同的浏览器，这有助于使字体接近相同。

【讨论】：

【解决方案3】：

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

【讨论】：