Как Устранить «Слепые Пятна» С Помощью Визуального Тестирования

Перевод статьи был подготовлен до начала курса.

«Инженер по контролю качества Python» .



Как устранить «слепые пятна» с помощью визуального тестирования

Визуальные ошибки – это ошибки в представлении приложения.

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

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

Это связано с тем, что большинство инструментов автоматизированное тестирование проверить с DOM (объектная модель документа) сообщить о состоянии приложения.

Например, приложение от этот твит не показывает последнюю цифру цены, но полная цена указана в DOM. В первом случае реальная цена составляет 1250 новозеландских долларов, но отображается как 125 новозеландских долларов.

Очень большая разница!

Как устранить «слепые пятна» с помощью визуального тестирования

К сожалению, автоматическое тестирование покажет вам, что все в порядке и цена правильная, даже если пользователи увидят другую картину.

Сегодня мы поговорим о том, как отлавливать подобные ошибки с помощью визуальное тестирование .



Что такое визуальное тестирование?

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

Они делают снимок экрана вашего приложения, когда оно достигает желаемого состояния, а затем делают новый снимок экрана при каждом запуске теста.

Скриншоты выполнения регрессионного тестирования сравниваются с «правильным» скриншотом.

Если обнаружены существенные расхождения, тест считается неудачным.

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

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



Придется ли мне начинать все сначала?

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

Ответ - нет. Визуальное тестирование можно интегрировать в существующую систему тестирования.

Многие инструменты визуального тестирования поддерживают все основные языки программирования, а также такие платформы автоматизации, как Selenium WebDriver, Cypress, Appium и другие.

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

функциональные проверки .

Например, в приведенном выше примере Wellington Suite текущие тесты, скорее всего, включают в себя ценовые утверждения.

Конечно, вы можете их оставить и добавить к ним визуальные тесты, чтобы убедиться, что цены отображаются корректно.

Сравнение, выполненное с помощью алгоритмов визуального тестирования, уже гарантирует правильность и правильность отображения цены.

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



Что делать, если я не хочу делать скриншот всего экрана?

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

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



Игнорировать области

Некоторые инструменты визуального тестирования позволяют игнорировать определенные области экрана.

Этот метод подходит для тех областей, которые не связаны с тестированием, например, статус-бары, линии даты, реклама и т.п.



Как устранить «слепые пятна» с помощью визуального тестирования



Рамки для площади

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

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



Будьте осторожны с границами

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

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

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



А как насчет динамических данных, которые варьируются от теста к тесту?

Вы можете подумать, что визуальное тестирование неприменимо, когда данные меняются от теста к тесту, но это не так.

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

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



Применимо ли визуальное тестирование только к веб-приложениям?

Визуальное тестирование не ограничивается только веб-приложениями.

Визуальное тестирование можно использовать для мобильные приложения , системы проектирования например, Сборник рассказов, PDF-файлы и отдельные изображения.

Кроссплатформенное тестирование также можно проводить с использованием визуальных сеток.

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



Как начать визуальное тестирование

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

Выбирая один из них, убедитесь, что он обеспечивает гибкость, соответствующую вашим потребностям в тестировании.

Тестирование макета с использованием Selenium и Python .

Теги: #qa #Тестирование веб-сервисов #Тестирование мобильных приложений #визуальное тестирование

Вместе с данным постом часто просматривают: