Автоматизация визуального тестирования адаптивного...

Автоматизация визуального тестирования адаптивного дизайна на примере 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

Решение проблем динамического контентаFloating 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  

Выводы

• Довольно низкий порог вхождения

• Требует небольшие навыки автоматизации и языков программирования

• Скорость, удобный интерактивный API

• Невозможность тестирования случайных разрешений экрана

• Полное покрытие

проверками адаптивных блоков страниц

• Долгое составление spec файлов

• Необходимо уметь работать с локаторами элементов

• Нужны навыки работы с Java и/или JS

Applitools Eyes Galen Framework

Спасибо за внимание

Кисель ДарьяISSoft / Coherent Solutions

www.comaqa.by