Начало работы с визуальным регрессионным тестированием с использованием Appium
Опубликовано: 2023-09-17
Современное программное обеспечение требует беспрепятственного взаимодействия с пользователем на различных платформах и устройствах. Одним из наиболее сложных аспектов в этой области является поддержание визуальной целостности вашего приложения. Именно здесь в игру вступает визуальное регрессионное тестирование (VRT), предлагающее упрощенный способ выявления визуальных ошибок и несоответствий, которые в противном случае могли бы остаться незамеченными. Тем, кто хочет начать работу с VRT, Appium предлагает надежную масштабируемую платформу для автоматизации такого рода тестирования на широком спектре платформ.
Более того, такие сервисы, какLambdaTest, предлагают решение для оркестровки и выполнения тестов на основе искусственного интеллекта для визуального регрессионного тестирования, что устраняет необходимость для команд настраивать и управлять собственной инфраструктурой тестирования.Этот облачный подход обеспечивает доступ по требованию к различным реальным браузерам и устройствам, позволяя одновременно проводить тестирование в нескольких средах, сокращая время выполнения тестов и обеспечивая согласованность внешнего вида и функциональности веб-приложений. LambdaTest также предлагает подробные отчеты о тестировании и интеграцию с популярными платформами тестирования для быстрого выявления и устранения проблем.
В этой статье мы рассмотрим основы начала работы с VRT с использованием Appium, чтобы вы могли поднять свою стратегию тестирования на новый уровень.
Что такое визуальное регрессионное тестирование?
Визуальное регрессионное тестирование — это метод проверки, используемый для обеспечения того, чтобы изменения, внесенные в приложение, не оказывали неблагоприятного воздействия на визуальное представление пользовательского интерфейса (UI) приложения. Его основная цель — подтвердить, что макет и визуальные элементы соответствуют заранее определенным ожиданиям, тем самым гарантируя безупречный визуальный опыт пользователя. Эти визуальные проверки охватывают различные атрибуты, такие как положение, яркость, контрастность и цвет кнопок, меню, компонентов, текста и т. д. Этот метод также иногда называют визуальным тестированием или тестированием пользовательского интерфейса.
Как работают визуальные регрессионные тесты?
По сути, визуальное регрессионное тестирование заключается в получении снимков пользовательского интерфейса до внесения изменений и их сопоставлении со снимками экрана, сделанными после этого. Любые несоответствия впоследствии выявляются для проверки инженером-испытателем. На практике существуют различные методики проведения визуального регрессионного тестирования. Некоторые из наиболее часто используемых из них перечислены ниже для вас:
Ручное визуальное тестирование
Этот метод предполагает ручную проверку пользовательского интерфейса без использования специализированных инструментов. Дизайнеры и разработчики во время каждого выпуска посвящают время визуальному осмотру страниц, активно выявляя любые визуальные недостатки. Хотя этот подход может быть трудоемким и подвержен человеческим ошибкам при применении ко всему приложению, он полезен для специального или исследовательского тестирования пользовательского интерфейса, особенно на ранних этапах разработки.
Попиксельное сравнение
Этот метод тщательно изучает два снимка экрана на уровне пикселей, предупреждая инженера по тестированию о любых несоответствиях. Сравнение пикселей, также известное как различия пикселей, может выявить все потенциальные проблемы, но оно также может выявить множество несущественных различий, которые незаметны для человеческого глаза и не влияют на удобство использования (например, варианты рендеринга, сглаживание или различия в заполнении/полях). ). Инженер-испытатель должен тщательно отсеивать эти «ложные срабатывания» при каждом запуске теста.
Сравнение на основе DOM
Этот метод сравнения основан на анализе объектной модели документа (DOM) до и после изменения состояния и выявлении различий. Хотя он эффективен для выделения изменений, связанных с кодом, в DOM, он не обеспечивает настоящего визуального сравнения. Он часто генерирует ложноотрицательные или положительные результаты, когда код остается неизменным, но пользовательский интерфейс развивается (например, динамический контент или встроенный контент) или когда код изменяется, но пользовательский интерфейс остается статическим. Следовательно, результаты испытаний могут быть противоречивыми и требовать тщательного анализа, чтобы не упустить из виду визуальные дефекты.
Визуальное сравнение ИИ
Визуальное регрессионное тестирование с использованием Visual AI использует компьютерное зрение для восприятия пользовательского интерфейса так же, как люди. Хорошо обученный ИИ может помочь инженерам-испытателям, отмечая исключительно различия, которые мог бы заметить человек-наблюдатель, устраняя трудоемкую задачу решения «ложноположительных» проблем, типичных для сравнительных тестов пикселей и DOM. Кроме того, визуальный ИИ может оценивать динамический контент и выявлять проблемы только в неожиданных областях или регионах.
Причины провести визуальное регрессионное тестирование
В этом разделе объясняются наиболее веские причины для проведения визуального регрессионного тестирования в вашем приложении. Итак, продолжайте читать….
Обеспечение визуальной согласованности
Визуальное регрессионное тестирование помогает гарантировать, что пользовательский интерфейс и визуальные элементы вашего мобильного приложения остаются согласованными на разных версиях, устройствах и платформах. Такая согласованность важна для обеспечения бесперебойного взаимодействия с пользователем.
Проверка изменений конструкции
Когда в приложение вносятся изменения в дизайне, визуальное регрессионное тестирование позволяет проверить, были ли эти изменения реализованы правильно и не привели ли они к непреднамеренным визуальным проблемам.
Более быстрый цикл обратной связи
Визуальные регрессионные тесты могут обеспечить быструю обратную связь с разработчиками и дизайнерами, позволяя им решать проблемы на ранних этапах цикла разработки. Это снижает вероятность попадания критических визуальных дефектов на производство.
Улучшенный пользовательский опыт
Визуальные сбои и несоответствия могут негативно повлиять на пользовательский опыт и запятнать репутацию приложения. Выявляя эти проблемы с помощью визуального регрессионного тестирования, вы можете повысить удовлетворенность пользователей.
Регрессионное тестирование для библиотек пользовательского интерфейса
Если ваше приложение использует сторонние библиотеки или платформы пользовательского интерфейса, визуальное регрессионное тестирование помогает гарантировать, что обновления этих библиотек не приведут к нежелательным визуальным изменениям.
Шаги по началу визуального регрессионного тестирования с использованием Appium
Визуальное регрессионное тестирование с использованием Appium включает сравнение визуальных элементов пользовательского интерфейса приложения для обнаружения любых непреднамеренных визуальных изменений между различными версиями приложения. Вот шаги, которые помогут начать визуальное регрессионное тестирование с использованием Appium:
Шаг 1. Настройте Appium и тестовую среду
Сначала убедитесь, что Appium установлен и настроен в вашей системе. Вам также понадобится клиентская библиотека Appium для предпочитаемого вами языка программирования (например, Java, Python). Кроме того, установите все необходимые зависимости и инструменты для вашей среды тестирования.
Шаг 2. Подготовьте тестовые изображения
Прежде чем вы сможете выполнить визуальное регрессионное тестирование, вам понадобится набор базовых изображений, которые представляют ожидаемый внешний вид экранов вашего приложения. Сохраните эти базовые изображения, запустив приложение на различных устройствах/эмуляторах и сделав снимки экрана каждого экрана. Сохраните эти изображения в определенной папке внутри вашего проекта.
Шаг 3. Реализация тестовых сценариев
Напишите тестовые сценарии с использованием клиентской библиотеки Appium для автоматизации процесса создания снимков экрана и выполнения визуального сравнения. Ваши тестовые сценарии должны выполнять следующее:
- Инициализируйте драйвер Appium, чтобы запустить приложение на определенном устройстве/эмуляторе.
- Перемещайтесь по экранам приложения, выполняя действия, вызывающие изменения пользовательского интерфейса.
- Делайте снимки экрана, используя функцию скриншотов Appium.
- Сохраните сделанные скриншоты в отдельную папку для сравнения.
Вот пример того, как код может выглядеть на Java с использованием Java-клиента Appium:
```Ява
импортировать io.appium.java_client.AppiumDriver;
импортировать io.appium.java_client.MobileElement;
импортировать io.appium.java_client.android.AndroidDriver;
импортировать org.openqa.selenium.remote.DesiredCapabilities;
импортировать java.net.URL;
общественный класс VisualReprofitTest {
public static void main(String[] args) выдает исключение {
// Устанавливаем желаемые возможности для драйвера Appium
DesiredCapabilities caps = новые DesiredCapabilities();
caps.setCapability("Имя платформы", "Android");
caps.setCapability("deviceName", "emulator-5554");
caps.setCapability("appPackage", "your.app.package");
caps.setCapability("appActivity", "your.app.activity");
// Инициализируем драйвер Appium
Драйвер AppiumDriver<MobileElement> = новый AndroidDriver<>(новый URL("https://localhost:4723/wd/hub"), caps);
// Выполняем действия и делаем снимки экрана
// ...
// Сохраняем скриншоты для сравнения
// ..
// Закрываем драйвер
драйвер.выйти();
}
}
```
Шаг 4. Реализуйте логику визуального сравнения
Для визуального регрессионного тестирования вам нужен механизм сравнения сделанных снимков экрана с базовыми изображениями. Вы можете использовать библиотеки сравнения изображений, такие как «Resemble.js» или «Pixelmatch», для выполнения попиксельного сравнения и расчета визуальных различий.
Шаг 5: Утверждение и отчетность
В своих тестовых сценариях реализуйте утверждения, основанные на результатах визуального сравнения. Если визуальные различия превышают определенный порог, считайте тест неудавшимся. Создавайте отчеты с подробным описанием результатов испытаний, включая любые обнаруженные визуальные различия.
Шаг 6: Непрерывная интеграция (CI)
Интегрируйте визуальные регрессионные тесты в свой конвейер CI/CD, чтобы гарантировать их автоматический запуск при каждом изменении кода или выходе новых выпусков. Это помогает выявить визуальные регрессии на ранних этапах процесса разработки.
Шаг 7. Сохранение базовых изображений
По мере развития вашего приложения вам потребуется обновлять базовые изображения, чтобы они соответствовали новому ожидаемому внешнему виду. Это гарантирует, что законные изменения пользовательского интерфейса не будут ошибочно приняты за регрессию.
Как пользователи могут выполнять VRT с помощью Appium в LambdaTest?
Вот как пользователи могут выполнять визуальное регрессионное тестирование с помощью Appium на LambdaTest:
Настройте учетную запись LambdaTest
Для начала создайте учетную запись на платформе LambdaTest, если у вас ее еще нет. Эта учетная запись понадобится вам для доступа к их инфраструктуре тестирования. Затем обязательно установите Appium и все зависимости, как описано выше.
Написание тестовых сценариев
Разработайте сценарии тестирования Appium для взаимодействия с вашим мобильным приложением. Эти сценарии должны включать шаги по навигации по вашему приложению и созданию снимков экрана ключевых элементов или экранов.
Настройка возможностей LambdaTest
Измените свои сценарии Appium, включив в них возможности, специфичные для LambdaTest. Сюда входит указание желаемой платформы (iOS/Android), версии браузера, типа устройства и учетных данных LambdaTest (имя пользователя и ключ доступа).
Запуск тестов на LambdaTest
Загрузите свои тестовые сценарии Appium на платформу LambdaTest. LambdaTest предоставляет сетку Selenium, в которой вы можете запускать тесты Appium. Эта сетка предлагает для тестирования широкий спектр реальных устройств и браузеров.
Выполнение тестов
Выполняйте тесты в сетке LambdaTest, запуская их из веб-интерфейса. LambdaTest выполнит ваши тесты на указанных мобильных устройствах и браузерах, делая снимки экрана в различных точках вашего тестового процесса.
Визуальное сравнение
После выполнения теста LambdaTest создает снимки экрана различных состояний приложения. Вы можете использовать встроенный инструмент визуального сравнения, чтобы сравнить эти снимки экрана с базовыми изображениями и выявить любые визуальные несоответствия.
Обзор и анализ
Проанализируйте результаты ВРТ, чтобы выявить визуальные различия. LambdaTest дает представление о визуальных изменениях, выделяя области, в которых обнаружены несоответствия.
Автоматизированная отчетность
LambdaTest предлагает функции автоматической отчетности для отслеживания результатов тестирования с течением времени, что упрощает выявление тенденций и оценку влияния изменений на внешний вид вашего приложения.
Лучшие практики для успешного визуального регрессионного тестирования с использованием Appium
Вот несколько рекомендаций, которым следует следовать для успешного визуального регрессионного тестирования с использованием Appium:
Выберите надежное устройство и матрицу платформы
Выберите набор устройств, операционных систем и разрешений экрана, которые представляют собой наиболее важные комбинации, используемые вашей целевой аудиторией. Эта матрица должна охватывать широкий спектр устройств, чтобы ваше приложение выглядело одинаково в различных конфигурациях.
Контроль версий для справочных изображений
Сохраняйте репозиторий эталонных изображений с контролем версий, которые представляют ожидаемый внешний вид вашего приложения на разных устройствах и платформах. Эти эталонные изображения будут служить базой для сравнения во время регрессионных тестов.
Стабильная и согласованная тестовая среда
Убедитесь, что тестовая среда единообразна для каждого запуска теста. Это включает в себя использование одних и тех же версий ОС, версий Appium и библиотек в разных тестовых запусках. Избегайте внесения ненужных изменений в среду, которые могут привести к ложноположительным результатам ваших тестов.
Изолируйте изменения пользовательского интерфейса от функциональных изменений
Отделите тесты визуальной регрессии от функциональных тестов. Это позволяет вам сосредоточиться исключительно на визуальных различиях, не отвлекаясь на функциональные проблемы.
Терпеть ожидаемое визуальное отклонение
Не все визуальные различия являются ошибками. Установите уровень допуска для приемлемого визуального отклонения, чтобы учесть незначительные изменения пользовательского интерфейса, такие как варианты рендеринга шрифтов, которые могут не повлиять на общее взаимодействие с пользователем.
Динамическая обработка контента
Грамотно обрабатывайте динамический контент, такой как реклама, пользовательский контент и данные в реальном времени. Возможно, вам придется либо исключить эти элементы из сравнения, либо обновить эталонные изображения, чтобы учесть эти динамические изменения.
Умные стратегии ожидания
Внедрите стратегии умного ожидания, чтобы гарантировать полную загрузку элементов пользовательского интерфейса приложения перед созданием снимков экрана. Это помогает избежать ложных срабатываний, вызванных неполными или частично загруженными экранами.
Параллельное выполнение
Если возможно, запускайте визуальные регрессионные тесты параллельно на нескольких устройствах и платформах. Это сокращает общее время тестирования и обеспечивает более быструю обратную связь о потенциальных визуальных несоответствиях.
Автоматизированные отчеты и уведомления
Настройте автоматические отчеты и уведомления, чтобы предупреждать команду при обнаружении визуальных несоответствий. Это обеспечивает быстроту действий и минимизирует время, необходимое для устранения проблем.
Регулярное тестовое обслуживание
По мере развития вашего приложения обновляйте эталонные изображения и адаптируйте тесты с учетом преднамеренных визуальных изменений. Регулярно проверяйте и обновляйте свои тесты визуальной регрессии, чтобы гарантировать, что они остаются актуальными.
Обзор и подтверждение результатов
Прежде чем рассматривать какое-либо различие как реальную проблему, вручную просмотрите снимки экрана, чтобы проверить, являются ли различия реальными ошибками или просто ложными срабатываниями, вызванными динамическим контентом или незначительными визуальными изменениями.
Постоянное улучшение
Постоянно оценивайте свою стратегию визуального регрессионного тестирования и адаптируйте ее по мере необходимости. Будьте в курсе новейших инструментов, библиотек и передовых методов, чтобы обеспечить эффективность вашего процесса тестирования.
Заключение
Если вы хотите выявить непреднамеренные изменения, сократить объем ручного контроля качества или просто улучшить визуальную согласованность на разных устройствах и разрешениях, VRT — незаменимый инструмент в вашем арсенале тестирования. Как и в случае с любой технологией, освоение нюансов требует времени, но преимущества в виде экономии времени, уменьшения количества ошибок и более удобного взаимодействия с пользователем могут быть огромными. Так зачем ждать? Начните работу с VRT и Appium сегодня и поднимите тестирование мобильных приложений на новый уровень.