Автоматизация тестирования визуальных регрессий, как особый вид тестирования, может поставить в тупик даже опытных специалистов своей отрасли. Тем более, если речь идёт об адаптивном дизайне. Задача тестирования адаптивной верстки не является простой, хотя бы по той причине, что требует большого времени на проверку отображения визуального контента и покрытие всей требуемой матрицы платформ, браузеров и разрешений экрана. Тем не менее существуют способы эффективного использования таких инструментов как Galen Framework и Applitools Eyes и интеграции их в уже существующую среду тестирования. На наглядном примере сайта, имеющего адаптивный дизайн, я расскажу о том, как можно с лёгкостью применять вышеуказанные инструменты с целью избежать как можно больше разнообразных регрессионных визуальных ошибок. Также будут подробно рассмотрены варианты построения архитектуры тестов и организации работы с дизайном приложения в целом.

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. Что мы на самом деле тестируем ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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