Визуальные тесты

Мы используем Percy через Github Actions для запуска визуальных регрессионных тестов. Percy запускает процесс на основе PR и удобно обрабатывает поток проверки. Кроме того, он интегрируется с Cypress.

Как запускать визуальные тесты на CI

Когда ваш PR будет готов к рассмотрению, вы можете запустить визуальные тесты (обрабатываемые Percy) одним из двух способов:

• Добавьте «визуальную» метку к PR.
• Прокомментируйте запрос на включение с помощью @metabase-bot запускает визуальные тесты

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

По умолчанию тесты Cypress запускаются, чтобы убедиться, что базовые тесты работают корректно, но Cypress не будет отправлять снимки экрана на серверы Percy. Когда PR помечен или прокомментирован для запуска визуальных тестов, команда запуска Cypress имеет префикс percy exec -- и допустимую переменную среды PERCY_TOKEN, в этом случае Cypress отправит снимки экрана на серверы Percy.

Резюме:

1. Добавьте метку visual к вашему PR.

2. Если есть какие-то визуальные изменения, будет показана неудачная проверка Percy в PR.

3. После того как вы просмотрите и одобрите изменения, флажок PR станет зеленым.

Как создать визуальный тест

Мы используем Cypress для написания тестов Percy, поэтому мы можем полностью использовать все существующие помощники и пользовательские команды.

Визуальные регрессионные тесты находятся внутри каталога e2e/test/visual. Написание теста Percy состоит из создания желаемого состояния страницы и выполнения команды cy.createPercySnapshot().

Цель

Каждый визуальный тест должен охватывать как можно больше разных элементов на одном скриншоте. Например, когда мы пишем тест E2E, который проверяет диаграмму на панели инструментов, мы добавляем только одну карту и запускаем утверждения. В отличие от этого, визуальный тест может содержать все типы диаграмм на одной и той же панели инструментов, потому что это значительно сокращает количество снимков экрана, которые мы делаем, что снижает стоимость использования Percy.

Процесс

1. Запустите Glarus BI локально в режиме разработки (yarn dev или любой другой аналогичной командой).
2. Запустите yarn test-visual-open, чтобы открыть Cypress локально. Вам не нужно экспортировать PERCY_TOKEN.
3. Создайте спецификацию внутри e2e/test/visual и запустите её через Cypress runner.

На этом шаге, если вы где-то в своём тесте добавили команду percySnapshot, вы увидите в своём тесте шаг percyHealthCheck:

Считайте состояние страницы на шаге percyHealthCheck тем, которое будет захвачено и проверено.

Примечания

• Вам не нужно экспортировать PERCY_TOKEN для запуска тестов. Если токен экспортируется, Percy отправит снимки с вашего локального компьютера на свои серверы, чтобы вы могли увидеть свой локальный запуск в их интерфейсе.
• Когда код приложения использует Date.now(), вы можете заморозить дату/время в Cypress.
• Используйте Math.random, когда вы имеете дело с рандомизацией.
• При тестировании страницы, которая отображает любые даты, поступающие с сервера, во избежание нежелательных визуальных изменений добавьте атрибут data-server-date ко всем узлам DOM с датами. Пользовательская команда createPercySnapshot заменит содержимое конкретным значением перед созданием снимка.