由於字體渲染，gitlab管道上的視覺測試失敗

Question

我有一個使用 Storybook 作為設計系統的 Angular 項目。 我想為它集成視覺測試。 我將 Jest 與 puppeteer 和圖像快照一起使用。 在本地它運行良好，但在 GitLab 上，管道失敗，因為字體呈現方式不同。 我使用了一種特定的字體，但它也包含在 GitLab 環境中，但它似乎更加拉伸：

我還在本地和 GitLab 上運行相同的 docker 容器。

這是我的 jest.config.js

process.env.JEST_PUPPETEER_CONFIG = 'node_modules/jest-puppeteer-docker/src/config.js';

module.exports = {
  preset: 'jest-puppeteer-docker',
  rootDir: '../',
  setupFilesAfterEnv: [
    '<rootDir>/.jest/jest-puppeteer.config.js'
  ],
  testMatch: [
    '<rootDir>/.storybook/visual-tests/*.visual-test.js'
  ]
};

還有我的 jest-puppeteer.config.js

module.exports = {
  launch: {
    headless: true,
    args: [
      '--enable-font-antialiasing=false',
      '--font-render-hinting=medium',
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  }
};

如果有人可以幫助我，那就太好了。

Answer 1

前段時間有同樣的問題。

就我而言，這是由於管道代理 (GitLab) 和我的本地開發人員操作系統的操作系統不同。 字體可以根據操作系統以不同方式呈現。

開玩笑快照問題

至於現在我只相信有兩種方法可以解決這個問題：

1. 在 jest-snapshot 測試中啟用最小故障閾值。 不理想，但取決於文本的數量，它可能會起作用。 在我們的例子中，我們有相當多的文本，這需要大約 1-2% 的失敗閾值。 在這個百分比下，我們開始看到其他視覺變化超過了測試閾值。 因此，我們研究了第二種解決方案。

2. 使用與捕獲圖像相同的操作系統運行 jest-snapshot 測試。 在我的頭頂上，我看到了兩個解決方案：

   2.a. 啟動與管道代理相同操作系統的 VM 並將其用於開發。

   2.b。 將依賴於操作系統的映像包含到項目中。

我意識到這些解決方案都不是理想的，但我希望它們能幫助您找到最合適的前進方式。

干杯!

Answer 2

即使您有自定義字體，例如“Roboto”，在容器的“沒有緩存字體的新瀏覽器”中呈現也需要一些時間。

一種解決方法是使用超時，比如說 500 毫秒，讓瀏覽器有足夠的時間下載和渲染字體。 另一種解決方法是檢查字體是否已加載，這要歸功於fonts api