Визуальный тест не пройден на конвейере gitlab из-за рендеринга шрифтов - PullRequest
Новая
       33

Визуальный тест не пройден на конвейере gitlab из-за рендеринга шрифтов

0 голосов
/ 10 февраля 2020

У меня есть проект Angular с Storybook в качестве системы проектирования. Я хочу интегрировать визуальное тестирование для него. Я использую Jest с кукловодом и снимком изображения. Локально он работает нормально, но на GitLab конвейер не работает, потому что шрифт отображается по-разному. Я использую указанный c шрифт, но он также включен в среду GitLab, но кажется более растянутым:

diff output from the pipeline

Я также запускаю тот же docker контейнер локально и на GitLab.

Вот мой 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'
    ]
  }
};

Было бы здорово, если бы кто-нибудь мог помочь мне с этим.

1 Ответ

0 голосов
/ 10 марта 2020

Была такая же проблема некоторое время go.

В моем случае это было связано с изменением ОС агента конвейера (GitLab) и моей локальной ОС разработчика. Шрифт может отображаться по-разному в зависимости от ОС.

Проблема с Jest-снимком

На данный момент я считаю, что есть только два пути решения этой проблемы:

  1. Включить минимальный порог отказа в тесте jest-snapshot. Не идеально, но в зависимости от объема текста, это может сработать. В нашем случае у нас было достаточное количество текста, что потребовало бы порог сбоя примерно 1-2%. При этом проценте мы начали видеть, что другие визуальные изменения проскальзывают через порог теста. Поэтому мы исследовали второе решение.

  2. Запустите тест jest-snapshot с той же ОС, что и при захвате изображений. В верхней части головы я вижу два решения:

    2.a. Запустите виртуальную машину той же ОС, что и агенты конвейера, и используйте ее для разработки.

    2.b. Включите в проект образы, зависящие от ОС.

Я понимаю, что ни одно из этих решений не является идеальным, но я надеюсь, что они помогут вам найти наиболее подходящий способ продвижения вперед.

Ура!

...