Кроссбраузерное визуальное тестирование - выбор подходящего инструмента для дизайн-системы NewsKit

В мире, где большинство ИТ-продуктов борются за более широкую аудиторию, становится все более важным иметь приятный на вид и удобный пользовательский интерфейс.

Здесь, в NewsKit, один из наших продуктов - система дизайна, которая позволяет разным тайтлам NewsUK создавать быстрее более качественные продукты. Одна из наших целей с точки зрения качества - обеспечить правильную визуализацию нескольких компонентов. Но как этого добиться, особенно в реальности, где у нас есть множество устройств, браузеров, разрешений и возможностей на разных платформах? Похоже, это невыполнимая миссия. Но так ли это?

С чего начать?

Давайте признаем, нам нужно провести кросс-браузерное тестирование. Сейчас мы чувствуем, как некоторые из вас говорят: «О нет, только не еще один уровень тестов!» и полностью понимаем это разочарование. Когда у вас есть сложное программное решение с множеством интеграций, приложить много усилий для создания еще одного набора тестов - настоящая боль. Вы начинаете думать о времени и затратах, которые вам нужно инвестировать в создание тестов, затем на обслуживание, а также на повышение квалификации тестировщиков и разработчиков.

А что такое кроссбраузерное тестирование? Это нефункциональный тип тестирования, предназначенный для проверки того, как ваш веб-сайт и / или веб-компоненты будут работать в разных браузерах и на разных устройствах с разными возможностями. Акцент делается не на функциональной стороне (вы должны проверить это с помощью функциональных e2e тестов), а на том, как ваш продукт отображается на этих платформах.

Таким образом, если вам нужно поддерживать браузеры Chrome, IE, Mozilla Firefox, Safari и последние версии iOS, а также Android, которые запускаются на разных устройствах, вам нужно будет выполнить свой набор визуального тестирования на этих платформах, чтобы убедиться, что ваше программное обеспечение работает безупречно. . Как вы понимаете, проверка всего этого вручную потребует очень много времени и усилий, и вам нужно будет делать это каждый раз, когда будет происходить визуальное изменение. Итак, чтобы сократить усилия, рекомендуется автоматизировать кросс-браузерные тесты.

А вот и инструменты для визуального тестирования!

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

Но, опять же, здесь так много вариантов. Быстрый онлайн-поиск инструментов визуального тестирования приведет вас к ряду результатов - и это хорошо, поскольку у вас появляется возможность выбрать подходящий именно для вас. Но как именно выбрать подходящий инструмент? Выбор пути «проб и ошибок», скорее всего, приведет к потере времени и денег.

Как выбрать подходящий?

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

Итак, что следует учитывать при выборе инструмента для визуального тестирования?

1. С какими проблемами визуального оформления вашего продукта(ов) вы сталкиваетесь?
2. Помните об используемых вами технологиях.
3. Кто будет проводить визуальные тесты?
4. И не забывайте о бюджете и временных ограничениях.

Анализ всего вышеперечисленного поможет вам сориентироваться в огромной вселенной инструментов визуального кроссбраузерного тестирования.

И чтобы помочь вам в вашем путешествии, мы подготовили краткий список инструментов, которые мы оценили на основе наших требований, а также их преимуществ и недостатков.

Applitools

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

Applitools поддерживают различные версии большинства браузеров и эмуляторов устройств через Visual Grid. Еще одна приятная функциональность заключается в том, что они легко интегрируются с большинством фреймворков функционального тестирования: Selenium, Cypress, Appium, WebdriverIO, Espresso, XCUITest и даже Storybook! У них также есть Github и интеграция с различными инструментами непрерывной интеграции (CI).

Также значительно сокращается обслуживание тестов. Если есть какие-либо тесты, которые падают из-за новых изменений кода, Applitools предоставляет возможность легко принимать и отклонять сравнения.

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

Happo

Если вы ищете славный и более дешевый визуальный инструмент, то Happo может стать для вас правильным выбором.

Happo использует сравнение пиксель в пиксель, однако у вас есть возможность настроить его так, что он не будет строго сравнивать снимки с базовым. Опять же, они поддерживают последние версии большинства браузеров и эмуляторов. Их скорость сравнения изображений впечатляет - Happo использует хеширование растровых изображений и сравнивают хеши. У них также есть интеграция с Github и CI и плагины для прямой поддержки Storybook и Cypress. Кроме того, вы можете напрямую использовать их библиотеку javascript. Их панель инструментов обеспечивает простой способ просмотра всех снимков и любых визуальных различий.

Из минусов - они поддерживают только попиксельное сравнение, и даже если вы настроите его, у вас все равно могут быть ложные положительные результаты. Тем не менее, Happo написали несколько советов о том, как избежать ложных положительных результатов в изображениях, которые могут оказаться полезными.

Percy

Еще один хороший вариант, особенно если вам не обязательно поддерживать много браузеров, - это Percy. Недавно приобретенный компанией Browserstack, Percy пока поддерживает только последние версии Chrome и Firefox.

Это, также, инструмент попиксельного сравнения с погрешностью в 1 пиксель при сравнении ваших снимков с базовым. Подобно Applitools и Happo, у них также есть интеграции с Github и CI.

К сожалению, у Percy отсутствуют некоторые функции, которые, по крайней мере, в нашем случае были важны. Пока Percy поддерживают только два браузера - Chrome и Firefox. Надеюсь, они добавят в список больше браузеров. У них также отсутствует возможность изменить погрешность при сравнении. Кроме того, мы обнаружили, что если у вас есть большие ресурсы, такие как аудиофайлы, на вашей странице (как это делаем мы), Percy не сможет обработать снимки, и ваша сборка завершится ошибкой. И последнее, но не менее важное: иногда им не хватает времени, чтобы сделать полный снимок страницы или компонента, что вызывает ложные положительные результаты - и Percy не предоставляет вам задержек из коробки, поэтому вам необходимо реализовать их самому.

Chromatic

Если ваше визуальное тестирование будет сосредоточено только на фреймворке Storybook, этот инструмент может подойти вам.

Chromatic - еще один инструмент для попиксельных сравнений, и тут у вас есть возможность изменить погрешность пикселей. Они также имеют интеграцию с Github и CI и поддерживают Chrome, Firefox и IE 11.

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

Screener

Очередной инструмент попиксельного сравнения, Screener, теперь приобретенный командой Saucelabs, поддерживает множество браузеров, имеет интеграцию с Github и CI, а также может интегрироваться с фреймворками Storybook и Selenium.

С другой стороны, в настоящее время у них нет поддержки Cypress, что для нас важно. Но если вы используете Selenium, то может быть этот инструмент для вас.

Loki

Loki - это очень легкий инструмент для попиксельного сравнения компонентов Storybook, который также дает вам возможность менять погрешность пикселей. И это бесплатно!

Наш энтузиазм по поводу этого инструмента уменьшился из-за того, что Loki поддерживает только Chrome и предназначен только для Storybook. Вам также понадобится внешний инструмент для сравнения снимков.

Сравнительная таблица

Итак, что теперь?

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

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

Переведено командой QApedia. Еще больше переведенных статей вы найдете на нашем телеграм-канале.