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 毫秒的延迟，似乎已经解决了问题。如果你想出更好的东西，我很想知道。