Опыт автоматизации регрессионного визуального тестирования на Java + Selenium Webdriver + aShot

Здравствуйте.

В этой статье я бы хотел рассказать о своем опыте автоматизации визуального регрессионного тестирования.

Введение

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

Решив, что проверять внешний вид страниц сайта вручную не вариант, я занялся автоматизацией.

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

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

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

О проекте

VisualRegressionBoilerplate — это относительно простой проект с определенной структурой.

Что-то вроде boilerplate шаблона / проекта для визуальных автотестов.

Проект предназначен для небольших сайтов / проектов. Для тех, кому нужно простое решение, без сложных фреймфорков.

Возможности

• Сравнение скриншотов страниц сайта. Можно указать один или несколько игнорируемых элементов.
• Сравнение скриншотов элементов сайта.
• Тесты можно запускать с разной шириной экрана: mobile — 360px, tablet — 768px, desktop — 1920px
• По умолчанию доступно два браузера — chrome и firefox + эти же браузеры в headless режиме.
• Генератор отчетов — для каждого теста создается по 4 скриншота — актуальный, ожидаемый, разница, гиф. Если ожидаемых скриншотов нет, актуальные скриншоты будут сохранены как ожидаемые.

Используемые технологии

• Java
• TestNG
• Maven
• Selenium Webdriver
• aShot — библиотека для сравнения изображений

Как начать работать с проектом

1. Установить java, maven, браузеры.
2. В конструкторе класса DriverWrapper можно добавить или удалить браузеры если это необходимо
3. В классе TestConfig хранятся все настройки проекта — браузер, размер окна браузера по умолчанию и т.п. Здесь можно добавить или изменить настройки.
4. В классе BasePage установить адрес тестируемого сайта. Можно установить разный адрес для разного окружения (dev, stage, prod). BasePage и остальные классы в модуле app это пример паттерна page object. Использовать его не обязательно.
5. Изучить тестовый класс TestExample и по примеру создавать свои тестовые классы.
6. Добавить новые тестовые классы в testng.xml
7. Запустить тесты с нужными параметрами через maven
8. Проверить отчет в папке report

В README проекта все описано более подробно.

Как писать тесты

В общем-то как угодно. Каких либо ограничений нет. Можно использовать паттерн page object или что-то другое.

Все что нужно, это использовать следующие функции для сравнения скриншотов:

Для страниц:

Сравнение скриншотов страницы:

comparePageScreenshots("index_page");

Сравнение скриншотов страницы с игнорированием одного элемента:

comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK);

Сравнение скриншотов страницы с игнорированием нескольких элементов:

 comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"});

Сравнение скриншотов элемента страницы — элемент можно искать по css локатору

compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK);

Либо можно передать объект класса WebElement

compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge")));

Возможные проблемы

• Тесты могут заканчиваться ошибкой из-за динамичного контента на странице. Проблема решается игнорированием элементов с динамичным контентом.
• Тесты могут заканчиваться ошибкой из-за разницы в несколько пикселей. Исправить это можно отредактировав настройку — TestConfig.allowableDiffSize.
• Иногда не успевают загрузиться все изображения или какие-то элементы на сайте. Чтобы исправить это я написал функцию preparePageForScreenshot() в которой, используя javaScript, страница прокручивается вниз и вверх. Но это не всегда помогает.

Резюме

На данный момент в проекте примерно 50 тестов — страницы и разные элементы страниц.
Через баш скрипт автотесты запускаются и сайт тестируется сразу в трех расширениях (mobile, tablet, desktop).

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

Любые изменения в верстке видны сразу.

Ссылка на репозиторий проекта — VisualRegressionBoilerplate