由于字体呈现，视觉测试在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）的操作系统和本地开发人员的OS有所不同。字体可以根据操作系统进行不同的渲染。

Jest-snapshot issue

就目前而言，我只认为有两种方法可以解决此问题：

1. 在玩笑快照测试中启用最小故障阈值。 这并不理想，但是取决于文本的数量，它可能会起作用。 在我们的案例中，我们有大量的文本，这将需要大约1-2％的失败阈值。以这个百分比，我们开始看到其他视觉变化滑过了测试阈值。因此，我们研究了第二个解决方案。

2. 在与捕获图像相同的操作系统上运行笑话快照测试。在我的头顶上，我看到两个解决方案：

   2.a。启动与管道代理具有相同操作系统的VM，并将其用于开发。

   2.b。将与操作系统相关的映像包括到项目中。

我意识到这些解决方案都不是理想的，但我希望它们能帮助您找到最合适的前进方向。

干杯！