Домой » Практика » java » Ocular — средство для визуальной валидации для Selenium WebDriver

Ocular — средство для визуальной валидации для Selenium WebDriver

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

Убедиться, правильно ли отобразился элемент, не так то и легко. Писать скрипты на том же Sikuli с множеством проверок — очень утомительно. Порой тесты, которые касаются правильно отображения на UI, попросту не автоматизируют, а оставляют на откуп мануальным тестировщикам.

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

Сложности визуальной валидации

  1. Высокая стоимоисть некоторых тулов;
  2. Создание и поддержка паттернов для визуального сравнения;
  3. Адаптационная вёрстка — многие макеты по-разному отображаются на различных устройствах;
  4. Составление отчёта;
  5. Частое изменение внешнего вида;

Изменение существующего тестового фреймворка порой очень сложно.

И тут нам должен помочь Ocular, который должен решить данные проблемы в автоматизированном тестовом фреймворке, базирующемся на Selenium WebDriver. Он бесплатный и опенсорсный.

Что представляет собой Ocular?

Ocular разработан на основе Arquillian RushEye — тула для сравнения изображений, работающая через командную строку.

Подключение к фреймворку с помощью Maven

Для подключения скопируйте в помку данную зависимость

Термины

  • Snapshot – базовое изображение
  • Sample – актуальное изображение
  • Similarity – соотношение сходства двух изображений

Конфигурация

Перед использованием утилиты её следует настроить

Параметр Описание Тип Значение по умолчанию
snapshotPath Путь к базовым изображениям Path null
resultPath Путь, где дожны быть сохранены результаты проверки с подсвеченными несовпадающими элементами Path null
globalSimilarity % пикселей, которые должны совпасть, чтобы валидация прошла Int 100
saveSnapshot Флаг для сохранения snapshot, если их нету (полезно для самого первого запуска) Boolean true

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

Данный кусок кода предоставляет пример, как вы можете настроить конфигурацию, его можно расположить, например, в @BeforeSuite методе

Внимание! Перед выполнением кода убедитесь, что пути существуют, автоматически они созданы не будут!

Snapshot в Page objects

Page Object стал основым паттерном для проектирования тестового фреймворка, который позволяет нам инкапсулировать сложные детали UI и упростить написание тестов. Ocular хорошо совмещается с Page Object паттерном, чтобы не доставить вам трудности в проектировании.

  • Используя @Snap аннотацию каждому пэйджу матчится snapshot в качестве паттерна;
  • Ожидается, что паттерн находится по snapshotPath пути.

Пример:

Представим, что Ocular настроен следующим образом:

Page Object для тестируемой страницы выглядет следующим образом

RichFacesTheme-classic

Теперь Ocular ищет snapshot по следующему пути: c:/ocular/snpshot/RichFace.png – (snapshotPath + путь указанный в атрибуте @Snap).

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

Пример сравнения изображений

  1. snapshot.from(this) – позволяет Ocular получить значение из @Snap
  2. sample.using(driver) – делается скриншот текущей страницы
  3. compare() – сравнивает скриншот с паттерном

Пути получения снэпшота

Выбор снэпшота в рантайме

Бывает, что необходимо проверить отображение на различных платформах или одной платформе и с различными темами. Контент всегда будет постоянным, а вот UI каждый раз обновляется. Для этого была придумана возможность в @Snap использовать переменные, как показанно на примере ниже.

Работа с меняющимися данными

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

для коллекции можно сделать так

или

Сравнение только одно элемента

Если не надо сравнивать целую страницу, а только один элемент, то можно сделать так:

Настройка точности

Иногда 100% точность не нужна, может подразумеваться некоторое несовпадение в шаблоне и актуальном результате. Для этого мы устанавливаем точность, например, в 85%. Все нижепоказанные настройки перезапишут глобальный конфиг Ocular.config().globalSimilarity().

Можно сделать ещё так:

Результат сравнения

OcularResult расширяет класс ComparisonResult, взятый из arquillian-rusheye, в котором имеется набор методов и который предоставляет результат сравнения изображений. Ниже приведён пример зафейленной валидации с подсвеченным несовпадении.

RichFaces-Poll

Валидация динамической вёрстки

Вы спокойно можете протестировать приложение с динамической вёрсткой.responsive

Для тестирования динамической вёрстки можно структурировать паттерны, как показано ниже:

Далее в тесты и конфиг необходимо внести небольшие изменения

Как видим, ничего сложного нету.

Итоги

Ocular c его статичным и fluent API позволяет проводить сравнение изображений более гибко по сравнению с тем же Sikuli.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*