![Page 1: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/1.jpg)
Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes
![Page 2: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/2.jpg)
Коротко о себе
Дарья Кисель
QA Automation Engineer ISsoft / Coherent Solutions
https://comaqa.bycsi.dariakisel
Меня зовут:
Кем работаю:
Skype:
![Page 3: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/3.jpg)
О чём речь• Что, как и зачем автоматизировать в визуальном
тестировании
• Applitools Eyes SDK. Объект Eyes в Java тестах
• Как избежать ложных несоответствий изображений
• Что делать с приложением, если его дизайн слишком «отзывчивый»
• Galen Framework. Пишем спецификацию к дизайну
• Интеграция фреймворка с Java тестами
• Выводы
![Page 4: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/4.jpg)
Немного теорииВизуальное тестирование (aka тестирование визуальных регрессий)– это акт проверки того, что графический интерфейсприложения корректно отображается для пользователя
Особенности• это НЕ функциональное тестирование
• это регрессионное тестирование
• это тестирование с точки зрения конечного пользователя
Цель: найти расхождения с эталоном, ошибки рендеринга страниц, шрифтов, изображений
![Page 5: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/5.jpg)
Что мы на самом деле тестируем ?
![Page 6: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/6.jpg)
• Замена множества ассертов одной визуальной проверкой
• Тестирование динамического контента
• Кроссбраузерность
• Кроссплатформенность
• Наглядный репортинг
• Тестирование в процессе CI
Что важно при выборе инструмента ?
![Page 7: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/7.jpg)
APPLITOOLS EYES
Облачный сервис, выполняющий визуальные валидации:
проверки GUI, сравнение с эталонным изображением
Web, Mobile и Native приложений
Visual Regression Testing Tool
Платный инструмент
• Selenium-Java SDK
+• Web-interface
![Page 8: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/8.jpg)
APPLITOOLS EYES SDK
• Selenium, Appium(Java, .Net, Ruby, Python, JS), Microsoft
Coded UI, HP UTF
![Page 9: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/9.jpg)
Принцип работы инструмента
• Сделать скриншот при прохождении теста
• Сравнить полученный скриншот с baseline image
• Сделать отчет о несовпадениях изображений
• Обновить baseline, если необходимо
![Page 10: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/10.jpg)
Рассмотрим один пример «отзывчивого» дизайна
![Page 11: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/11.jpg)
Объект Eyes в Java тестах
• Eyes object
• API key
• WebDriver
![Page 12: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/12.jpg)
Объект Eyes в Java тестах
• Группы тестов
• Скриншот целой страницы в Chrome и Safari
![Page 13: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/13.jpg)
Примеры тестов
![Page 14: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/14.jpg)
Отчёты о прохождении тестов
![Page 15: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/15.jpg)
Отчёт о несовпадениях
![Page 16: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/16.jpg)
Отчёт о несовпадениях
![Page 17: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/17.jpg)
Решение проблем динамического контента
Изменение способа сравнения:
• mismatch tolerance
• ignored region
• floating region
![Page 18: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/18.jpg)
Решение проблем динамического контентаMismatch tolerance
![Page 19: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/19.jpg)
Решение проблем динамического контентаFloating region
![Page 20: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/20.jpg)
Решение проблем динамического контентаIgnored region
![Page 21: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/21.jpg)
Galen Framework
• Изначально создан для тестирования адаптивного дизайна
• Написание тестов на Java и JS. Использует gspec файлы.
• Работает c Selenium Grid, Sauce Labs, BrowserStack
• Репортинг: HTML, TestNG ( e.g для добавления в CI)
![Page 22: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/22.jpg)
Вспомогательные схемы
Desktop
[ 1211 – max ] px
![Page 23: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/23.jpg)
Laptop [ 779 – 1210 ] px
Вспомогательные схемы
![Page 24: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/24.jpg)
Tablet [ 778 – 491 ] px
Вспомогательные схемы
![Page 25: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/25.jpg)
Mobile [ 490px – min ] px
Вспомогательные схемы
![Page 26: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/26.jpg)
Пишем спецификацию gspecОписание элементов
![Page 27: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/27.jpg)
Выделяем общее и частное
![Page 28: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/28.jpg)
Выделяем общее и частное
![Page 29: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/29.jpg)
Применяем циклы
![Page 30: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/30.jpg)
Применяем циклы
![Page 31: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/31.jpg)
Компоненты
![Page 32: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/32.jpg)
Компоненты
• text contains
• text starts
• text ends
• text matches
![Page 33: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/33.jpg)
Применяем в Java тестах
• getReport
• load
• inject
• resize
• checkLayout
![Page 34: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/34.jpg)
Применяем в Java тестах
![Page 35: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/35.jpg)
Тестируем в рандомных разрешениях
![Page 36: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/36.jpg)
Тестируем в рандомных разрешениях
![Page 37: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/37.jpg)
Как выглядят репорты
![Page 38: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/38.jpg)
Сравнение изображений
![Page 39: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/39.jpg)
Сравнение изображений
![Page 40: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/40.jpg)
Сравнение изображений
• analyze-offset • contrast • denoise • quantinize
![Page 41: Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587c181f1a28abb5068b4a9b/html5/thumbnails/41.jpg)
Выводы
• Довольно низкий порог вхождения
• Требует небольшие навыки автоматизации и языков программирования
• Скорость, удобный интерактивный API
• Невозможность тестирования случайных разрешений экрана
• Полное покрытие
проверками адаптивных блоков страниц
• Долгое составление spec файлов
• Необходимо уметь работать с локаторами элементов
• Нужны навыки работы с Java и/или JS
Applitools Eyes Galen Framework