Embed Size (px)
Citation preview
Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes
Коротко о себе
Дарья Кисель
QA Automation Engineer ISsoft / Coherent Solutions
https://comaqa.bycsi.dariakisel
Меня зовут:
Кем работаю:
Skype:
О чём речь• Что, как и зачем автоматизировать в визуальном
тестировании
• Applitools Eyes SDK. Объект Eyes в Java тестах
• Как избежать ложных несоответствий изображений
• Что делать с приложением, если его дизайн слишком «отзывчивый»
• Galen Framework. Пишем спецификацию к дизайну
• Интеграция фреймворка с Java тестами
• Выводы
Немного теорииВизуальное тестирование (aka тестирование визуальных регрессий)– это акт проверки того, что графический интерфейсприложения корректно отображается для пользователя
Особенности• это НЕ функциональное тестирование
• это регрессионное тестирование
• это тестирование с точки зрения конечного пользователя
Цель: найти расхождения с эталоном, ошибки рендеринга страниц, шрифтов, изображений
Что мы на самом деле тестируем ?
Что мы на самом деле тестируем ?
• Замена множества ассертов одной визуальной проверкой
• Тестирование динамического контента
• Кроссбраузерность
• Кроссплатформенность
• Наглядный репортинг
• Тестирование в процессе CI
Что важно при выборе инструмента ?
APPLITOOLS EYES
Облачный сервис, выполняющий визуальные валидации:
проверки GUI, сравнение с эталонным изображением
Web, Mobile и Native приложений
Visual Regression Testing Tool
Платный инструмент
• Selenium-Java SDK
+• Web-interface
APPLITOOLS EYES SDK
• Selenium, Appium(Java, .Net, Ruby, Python, JS), Microsoft
Coded UI, HP UTF
Принцип работы инструмента
• Сделать скриншот при прохождении теста
• Сравнить полученный скриншот с baseline image
• Сделать отчет о несовпадениях изображений
• Обновить baseline, если необходимо
Рассмотрим один пример «отзывчивого» дизайна
Объект Eyes в Java тестах
• Eyes object
• API key
• WebDriver
Объект Eyes в Java тестах
• Группы тестов
• Скриншот целой страницы в Chrome и Safari
Примеры тестов
Отчёты о прохождении тестов
Отчёт о несовпадениях
Отчёт о несовпадениях
Решение проблем динамического контента
Изменение способа сравнения:
• mismatch tolerance
• ignored region
• floating region
Решение проблем динамического контента
Изменение способа сравнения:
• mismatch tolerance
• ignored region
• floating region
Решение проблем динамического контентаMismatch tolerance
Решение проблем динамического контентаFloating region
Решение проблем динамического контентаIgnored region
Решение проблем динамического контентаIgnored region
Galen Framework
• Изначально создан для тестирования адаптивного дизайна
• Написание тестов на Java и JS. Использует gspec файлы.
• Работает c Selenium Grid, Sauce Labs, BrowserStack
• Репортинг: HTML, TestNG ( e.g для добавления в CI)
Вспомогательные схемы
Desktop
[ 1211 – max ] px
Laptop [ 779 – 1210 ] px
Вспомогательные схемы
Tablet [ 778 – 491 ] px
Вспомогательные схемы
Mobile [ 490px – min ] px
Вспомогательные схемы
Пишем спецификацию gspecОписание элементов
Выделяем общее и частное
Выделяем общее и частное
Выделяем общее и частное
Применяем циклы
Применяем циклы
Компоненты
Компоненты
• text contains
• text starts
• text ends
• text matches
Применяем в Java тестах
• getReport
• load
• inject
• resize
• checkLayout
Применяем в Java тестах
Тестируем в рандомных разрешениях
Тестируем в рандомных разрешениях
Как выглядят репорты
Как выглядят репорты
Как выглядят репорты
Как выглядят репорты
Как выглядят репорты
Сравнение изображений
Сравнение изображений
Сравнение изображений
• analyze-offset • contrast • denoise • quantinize
Сравнение изображений
• analyze-offset • contrast • denoise • quantinize
Выводы
• Довольно низкий порог вхождения
• Требует небольшие навыки автоматизации и языков программирования
• Скорость, удобный интерактивный API
• Невозможность тестирования случайных разрешений экрана
• Полное покрытие
проверками адаптивных блоков страниц
• Долгое составление spec файлов
• Необходимо уметь работать с локаторами элементов
• Нужны навыки работы с Java и/или JS
Applitools Eyes Galen Framework
