Gemini разработан в Яндексе Gemini — инструмент с открытым исходным кодом, позволяющий автоматизировать регрессивное тестирование отображения веб-страниц. Gemini снимает области экрана с элементами на странице и сравнивает их с эталонными изображениями элементов. Если изображения не совпадают, их отличия указываются в отчёте. Тесты разрабатываются на JavaScript и запускаются в реальных браузерах, используя протокол Selenium WebDriver. С Gemini можно работать как в командной строке, так и через графический-интерфейс gemini-gui. - Для начала нам нужно создать наш тестовый набор. Это делается командой gemini.suite. Мы передаем имя набора и функцию, в которой в дальнейшем будем производить настройку этого набора. Весь дальнейший код, который я буду приводить в примерах, происходит внутри этой функции. Первый шаг настройки — задание URL, с которого мы будем снимать скриншоты. Далее нам нужно задать регион для съемки. В примере элемент только один, но их может быть сколько угодно. Область захвата определяется как минимальный прямоугольник, в который попадают все перечисленные элементы. Закончив с настройкой, можно переходить к захвату скриншотов. Наше первое состояние — исходное (plain). нам не надо выполнять никаких действий, просто сделать захват скриншота командой capture, которой мы передаем имя состояния. Также нам нужно создать файл конфигурации. В нем мы задаем корневой URL, от которого будут рассчитаны относительные URL, задаваемые в тестах. Второй параметр — это URL для Selenium Grid (так как gemini основан на Selenium, использование Grid обязательно). Ну и список браузеров, в которых мы будем тестировать. Конфиг выглядит приблизительно так: Задачей корневой URL от которого мы будем резолвить все углы, указанные в тесты

1. Gemini
Автоматизация UI
Artem Ch.

2. Возможности
• параллельный запуск тестов в различных браузерах
• тестирования различных состояний элемента веб-страницы
• тестирования картинки — сравнение с эталоном (
игнорирование заданных областей при сравнении
изображений )
• учет свойств box-shadow and outline при вычислении
позиции и размера элемента?
• быстрый перезапуск только failed тестов
• сбор статистики покрытия css-кода тестами

3. Тестовый набор состояния
кнопок
Немного расскажу о том, как он работает. Вы
описываете несколько состояний блока. Для
каждого состояния можно указать список действий,
которые необходимо выполнить для перехода в
него.

4. Схема состояний кнопки
• Button: plain -> hover -> pressed -> loading
Вот так предыдущая абстрактная
схема будет выглядеть для
конкретной кнопки:

5. Create first suite

6. setWindowSize
.setUrl('/PrivacyStatement')
.setCaptureElements(captureElement)
.capture('mobile', function(actions, find) {
actions.setWindowSize(screenSizes.mobile.width, screenSizes.mobile.height);
})
.capture('tablet portrait', function(actions, find) {
actions.setWindowSize(screenSizes.tabletPortrait.width, screenSizes.tabletPortrait.height);
})
.capture('tablet landscape', function(actions, find) {
actions.setWindowSize(screenSizes.tabletLandscape.width,``screenSizes.tabletLandscape.height);
})
.capture('desktop', function(actions, find) {
actions.setWindowSize(screenSizes.desktop.width, screenSizes.desktop.height);
});
});

7. Config

10. Вопросы
А.