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 模糊）。 這將消除圖像中硬邊緣之間的差異。
• 增加“閾值”屬性，使抗鋸齒過濾不那么敏感。
• 通過使用總圖像的百分比（寬度 * 高度 * 百分比_閾值），在您的比較中允許一定數量的像素差異。 該數字將受到任何給定點屏幕上文本數量的影響。
• 對所有文本使用標准化的 Webfonts - 如果您在兩個系統上使用相同的瀏覽器，這可能有助於使字體接近相同。

Answer 3

我遇到了類似的問題，最終在 docker 容器內“本地”運行我的快照測試。 我還安裝了項目文件夾，因此每當必須更新快照時，它們都會在容器內部以及主機操作系統中進行更新。