Доклад Дарьи Кисель на конференции SQA Days-18, 27-28 ноября 2015 г., Москва www.sqadays.com

1. Автоматизация визуального тестирования
адаптивного дизайна на примере
Galen Framework и Applitools Eyes

2. Коротко о себе
Дарья Кисель
QA Automation Engineer
ISsoft / Coherent Solutions
https://comaqa.by
csi.dariakisel
Меня зовут:
Кем работаю:
Skype:

3. О чём речь
• Что, как и зачем автоматизировать в визуальном
тестировании
• Applitools Eyes SDK. Объект Eyes в Java тестах
• Как избежать ложных несоответствий изображений
• Что делать с приложением, если его дизайн слишком
«отзывчивый»
• Galen Framework. Пишем спецификацию к дизайну
• Интеграция фреймворка с Java тестами
• Выводы

4. Немного теории
Визуальное тестирование
(aka тестирование визуальных регрессий)
– это акт проверки того, что графический интерфейс
приложения корректно отображается для пользователя
Особенности
• это НЕ функциональное тестирование
• это регрессионное тестирование
• это тестирование с точки зрения конечного пользователя
Цель: найти расхождения с эталоном,
ошибки рендеринга страниц, шрифтов, изображений

5. Что мы на самом деле тестируем ?

6. • Замена множества ассертов одной визуальной проверкой
• Тестирование динамического контента
• Кроссбраузерность
• Кроссплатформенность
• Наглядный репортинг
• Тестирование в процессе CI
Что важно при выборе инструмента ?

7. APPLITOOLS EYES
Облачный сервис, выполняющий визуальные валидации:
проверки GUI, сравнение с эталонным изображением
Web, Mobile и Native приложений
Visual Regression Testing Tool
Платный инструмент
• Selenium-Java SDK + • Web-interface

8. APPLITOOLS EYES SDK
• Selenium, Appium(Java, .Net, Ruby, Python, JS), Microsoft
Coded UI, HP UTF

9. Принцип работы инструмента
• Сделать скриншот при прохождении теста
• Сравнить полученный скриншот с baseline image
• Сделать отчет о несовпадениях изображений
• Обновить baseline, если необходимо

10. Рассмотрим один пример «отзывчивого» дизайна

11. Объект Eyes в Java тестах
• Eyes object
• API key
• WebDriver

12. Объект Eyes в Java тестах
• Группы тестов
• Скриншот целой страницы в Chrome и Safari

13. Примеры тестов

14. Отчёты о прохождении тестов

15. Отчёт о несовпадениях

16. Отчёт о несовпадениях

17. Решение проблем динамического контента
Изменение способа сравнения:
• mismatch tolerance
• ignored region
• floating region

18. Решение проблем динамического контента
Mismatch tolerance

19. Решение проблем динамического контента
Floating region

20. Решение проблем динамического контента
Ignored region

21. Galen Framework
• Изначально создан для тестирования адаптивного дизайна
• Написание тестов на Java и JS. Использует gspec файлы.
• Работает c Selenium Grid, Sauce Labs, BrowserStack
• Репортинг: HTML, TestNG ( e.g для добавления в CI)

22. Вспомогательные схемы
Desktop
[ 1211 – max ] px

23. Laptop [ 779 – 1210 ] px
Вспомогательные схемы

24. Tablet [ 778 – 491 ] px
Вспомогательные схемы

25. Mobile [ 490px – min ] px
Вспомогательные схемы

26. Пишем спецификацию gspec
Описание элементов

27. Выделяем общее и частное

28. Выделяем общее и частное

29. Применяем циклы

30. Применяем циклы

31. Компоненты

32. Компоненты
• text contains
• text starts
• text ends
• text matches

33. Применяем в Java тестах
• getReport
• load
• inject
• resize
• checkLayout

34. Применяем в Java тестах

35. Тестируем в рандомных разрешениях

36. Тестируем в рандомных разрешениях

37. Как выглядят репорты

38. Сравнение изображений

39. Сравнение изображений

40. Сравнение изображений
• analyze-offset • contrast • denoise • quantinize

41. Выводы
• Довольно низкий порог
вхождения
• Требует небольшие навыки
автоматизации и языков
программирования
• Скорость, удобный
интерактивный API
• Невозможность
тестирования случайных
разрешений экрана
• Полное покрытие
проверками адаптивных
блоков страниц
• Долгое составление spec
файлов
• Необходимо уметь работать
с локаторами элементов
• Нужны навыки работы с Java
и/или JS
Applitools Eyes Galen Framework

42. Спасибо за внимание
Кисель Дарья
ISSoft / Coherent Solutions
www.comaqa.by