Javascript 木偶演员+；Pixelmatch：比较Mac和TravisCI Linux中的屏幕截图

我试图通过加载页面和使用Puppeter拍摄元素的屏幕截图来实现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,
        });
    }
  });
};

const compareScreenshots=（文件名）=>{
返回新承诺（（解决）=>{
const base=fs.createReadStream（`${base\u IMAGES\u PATH}/${fileName}.png`）.pipe（new png（））.on（'parsed'，donerereading）；
const live=fs.createReadStream（`${WORKING\u IMAGES\u PATH}/${fileName}.png`）.pipe（new png（））.on（'parsed'，donerereading）；
让filesRead=0；
函数donerereading（）{
//等待两个文件都被读取。
如果（++filesRead<2）{
返回；
}
//做视觉区分。
const diff=newpng（{width:base.width，height:base.height}）；
常量不匹配像素=像素匹配(
base.data、live.data、diff.data、base.width、base.height、，
{阈值：0.1}）；
决心({
不匹配的像素，
差异，
});
}
});
};

以下是生成的差异示例：

---

我也有类似的问题。我在抓拍屏幕截图之前延迟了400毫秒，似乎已经解决了这个问题。如果你能想出更好的办法，我很想知道。

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

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

---

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

知道这解决了问题的原因吗？在动画仍在运行的情况下，我遇到了另一个问题，但我通过加快“等待页面”的速度修复了这个问题。_client.send（'Animation.setPlaybackRate'，{playbackRate:12}）`我的猜测是，当木偶演员认为它已经准备好拍摄快照时，事情仍在摇摆不定。我是在手动调整窗口大小时看到一些抖动时得出这个猜测的。有趣的是，我会让你知道并报告回来。我想知道抖动是否是由于CSS转换引起的。只需在页面上方的某个地方进行一次小小的快速转换即可。我在页面顶部有一个按钮，可以在某个断点处变小。我想这就是造成我的问题的原因。我不这么认为，这就是为什么我添加了

wait页面。_client.send（'Animation.setPlaybackRate'，{playbackRate:12}）