Какие инструменты используются для визуального тестирования (например, Loki)?

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

Основные инструменты

Для этого используются специализированные инструменты и сервисы:

• Loki: Инструмент с открытым исходным кодом для захвата скриншотов компонентов из Storybook и их сравнения. Работает локально или в CI/CD.
• Chromatic: Облачный сервис от создателей Storybook. Автоматически публикует Storybook, делает скриншоты и предоставляет удобный интерфейс для ревью визуальных изменений.
• Percy: Популярный коммерческий сервис от BrowserStack. Интегрируется с множеством фреймворков и делает "умное" сравнение скриншотов, игнорируя незначительные различия.
• Applitools Eyes: Использует AI для визуальной валидации, что позволяет находить различия более точно и снижает количество ложных срабатываний.

Как это работает

Типичный процесс выглядит так: вы создаете компоненты и описываете их состояния в Storybook. Инструмент тестирования (например, Loki) запускает браузер, рендерит каждый стори (историю компонента), делает скриншот и сравнивает его с сохраненным ранее эталоном. Если различия превышают заданный порог, тест падает, и разработчик получает уведомление.

Пример настройки Loki

Вот базовый пример конфигурации и команды для Loki в проекте с React и Storybook:

// package.json (фрагмент скриптов)
"scripts": {
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook",
  "test:visual": "loki test",
  "approve:visual": "loki approve"
}

// Конфигурационный файл .loki/config.js
module.exports = {
  configurations: {
    'chrome.laptop': {
      target: 'chrome.docker',
      width: 1366,
      height: 768,
    },
  },
  fetchFailIgnore: 'localhost:6006',
};

После первого запуска npm run test:visual скриншоты сохраняются как эталоны. При последующих запусках новые скриншоты сравниваются с ними. Если изменения преднамеренные, их можно утвердить командой npm run approve:visual.

Где применяется

Визуальное тестирование особенно полезно в больших командах, работающих над сложными интерфейсами, где даже маленькое изменение в глобальных стилях может сломать внешний вид десятков компонентов. Оно интегрируется в pipeline CI/CD, чтобы блокировать мерж пул-реквестов с визуальными регрессиями.

Вывод: Инструменты вроде Loki стоит применять в проектах с развитой библиотекой UI-компонентов (особенно с использованием Storybook) для автоматического контроля визуальной целостности и предотвращения регрессий, что значительно экономит время на ручную проверку интерфейса.