Пожалуй, нет такого проекта, на котором автоматизированное тестирование GUI прошло бы быстро и гладко. Особенно это актуально для нового проекта, когда не знаешь, какие трудности придется преодолеть во время написания авто-тестов. При работе с веб-приложением, написанном с использованием canvas, мы также не подозревали, что внутри этого маленького элемента «таится целый мир», и что этот «мир» нужно как-то тестировать. В докладе будет рассказано о том: · как мы разбирались с возможностью автоматизировать тестирование canvas через UI; · какие подходы для этого выбрали; · с какими вызовами столкнулись и как их преодолели.

1. 15 ДЕКАБРЯ 2016
COMAQA BIRTHDAY 2016
Автоматизация
CANVAS:
сложно, но
возможно

2. Марта Веренчикова
Компания
 Applied Systems Ltd.
Позиция
 QA Engineer (веб-проекты)
Опыт
 в IT: 1+
 в автоматизации: курсы Академии ПВТ,
начата работа над первым тестовым проектом
Stack технологий
 Java + Selenium WebDriver
О ДОКЛАДЧИКЕ

3. СОДЕРЖАНИЕ
Canvas: маленький
элемент с
характером
1
2 подхода – 2
прототипа
2
Selenium vs
SikLenium: кто
победит?
3
Вместо эпилога:
уроки, лайфхаки,
next steps
4

4. Arrange
Act
Assert
СТРУКТУРА ТЕСТОВ
 пред- и пост-условия
 поиск элемента
 взаимодействие с элементом
 проверка
(сравнение поведения – actual vs
expected)

5. Координатный
подход
Использование DOM-
структуры
Распознавание
изображений
ПОДХОДЫ К ПОИСКУ ВЕБ-ЭЛЕМЕНТОВ НА СТРАНИЦЕ

6. Canvas – «безDOM-ный» элемент
<canvas height="1256" width="3584" style="position: absolute; width: 1792px; height:
628px; left: -128px; top: -128px;"></canvas>
CANVAS: В ЧЕМ ПРОБЛЕМА?

7.  визуализация
состояния складских
помещений
 html5, canvas
(библиотека fabric.js)
 до 170 «объектов» в 1
canvas-е
 > 50 оттенков и текстур
 сложное поведение
«объектов» в canvas-е
(click, hover и пр.)
СПЕЦИФИКА ПРОЕКТА (1)

8. Реакция на hover
Реакция на click и
hover
СПЕЦИФИКА ПРОЕКТА (2)

9. СПЕЦИФИКА ПРОЕКТА (3): ТРЕБОВАНИЯ К
ИСПОЛЬЗОВАНИЮ ВЕБ-ПРИЛОЖЕНИЯ
OS
Разрешение
экрана
Браузер
Полноэкранный
режим
Windows 7
и выше
1920×1280 Google Chrome F11

10. ЦЕЛИ ИССЛЕДОВАНИЯ
Общие:
 выбрать оптимальный
подход к поиску,
взаимодействию и
проверке объектов
внутри canvas
 подобрать
инструментарий,
позволяющий выполнить
«поиск-взаимодействие-
проверку»
Проектные:
 покрыть авто-тестами
наиболее сложный
«функционал»
Что интересовало:
 трудозатраты на
разработку и поддержку
 стабильность
выполнения
 скорость выполнения
 масштабируемость

11.  координатный подход
Прототип #1
 распознавание
изображений
Прототип #2
 API библиотеки fabric.js
 WebDriver API
Прототип #1 + Прототип #2
 изменения в html-
верстке через
WebDriver API
Прототип #1 + Прототип #2
 сравнение
изображений
Прототип #1 + Прототип #2
Поиск Взаимодействие Проверка
ПРОВЕРКА
РАЗРАБОТКА ПРОТОТИПА (1): ВЫБОР ПОДХОДА
ПОИСК ВЗАИМОДЕЙСТВИЕ

12. РАЗРАБОТКА ПРОТОТИПА (2): ВЫБОР ТЕСТОВЫХ
СЦЕНАРИЕВ
Тесты атомарны и полностью независимы
Общая часть Тест #1 Тест #2 Тест #3
1. Переход по URL
3. Проверка
состояния canvas
без
взаимодействия
3. Клик по
«целевой» ячейке
внутри canvas
3. Клик по
«целевой» ячейке
внутри canvas
2. Смена
цветового режима
4. Проверка
соответствия
параметров
внутри таблицы с
данными внутри
«целевой» ячейки
4. Проверка
состояния canvas
после
взаимодействия

13. Реакция на hover
Реакция на click и hover

14. РАЗРАБОТКА ПРОТОТИПА (3): ВЫБОР ИНСТРУМЕНТА
Selenuim WebDriver SikuliXvs

15. РАЗРАБОТКА ПРОТОТИПА (4): ОТЛИЧИЯ ПРОТОТИПОВ
Прототипы разрабатывались
тестировщиками одного уровня
Действие Selenium SikLenium
Поиск «объектов» в canvas по координатам
по изображению
(класс Region, SikuliX)
Взаимодействие (click) WebDriver API (класс Actions)
Сравнение данных в
таблице WebDriver API
Получение «actual»
изображений интерфейс TakeScreenshot
–
(«на лету»)
Сравнение с «expected»
изображениями
класс PixelGrabber
(java.awt.image)
класс Region (SikuliX)

16. РАЗРАБОТКА ПРОТОТИПА (5): ТЕСТОВОЕ ОКРУЖЕНИЕ
Параметр Selenium SikLenium
Language Java (JDK v.1.8.9_92)
IDE Intellij IDEA 2016.2.4
Build-instrument Maven v.3.3.9
Browsers and Drivers
Google Chrome v. 54.0.2840
chromedriver.exe (v.2.25)
Plug-ins, add-ons FireBug + FirePath (Mozilla Firefox should be installed)
Test Framework TestNG (v.6.9.10)
External Libraries
(via POM-file dependencies)
selenium-java (v.2.53.1) selenium-java (v.2.53.1)
sikulixapi.jar (v.1.1.0)
Reporting Allure

17. РАЗРАБОТКА ПРОТОТИПА (6): ПОДГОТОВКА ДАННЫХ
Данные Selenium SikLenium
Координатная сетка + -
«Базовые» скриншоты
X шт.
(сравнение)
2X шт.
(поиск + сравнение)
html-локаторы общие локаторы (.property-файл)
Значения параметров в
таблице список констант (@DataProvider)

18. РАЗРАБОТКА ПРОТОТИПА (7): АРХИТЕКТУРА
ТЕСТОВОГО ПРОЕКТА
Prototype Selenium Prototype SikLenium
Отличия:
 «статический» (Selenium) vs «динамический» (SikLenium) Canvas Page Element
 дополнительные helper-классы (Selenium)
 накопление «actual» изображений (Selenium)

19. РАЗРАБОТКА ПРОТОТИПА (8): ЗАПУСК ТЕСТОВ
 mvn clean test site
 последовательно, не
параллельно
 конфигурирование –
через параметры
аннотации @Test

20. МЕТРИКИ (1): СРЕДНЕЕ ВРЕМЯ ВЫПОЛНЕНИЯ ТЕСТА, С
 1 тест – 100 запусков
 100% passed (оба прототипа)
 время выполнения Test Suite: 41.23 мин (Selenium) и 41.82 мин (SikLenium)

21. МЕТРИКИ (2): ТЕНДЕНЦИЯ РОСТА ВРЕМЕНИ
ВЫПОЛНЕНИЯ ТЕСТОВ ПРИ УВЕЛИЧЕНИИ НАГРУЗКИ
С увеличением нагрузки на машину (CPU Usage, Physical
Memory) наблюдается тенденция к росту времени выполнения
тестов

22. Test Name Selenuim SikLenium
Test #1 Passed – 100% Passed – 100%
Test #3
Passed – 100% Passed – 20%
Failed – 80%
МЕТРИКИ (3): ПРОХОЖДЕНИЕ FALSE-POSITIVE
ПРОВЕРКИ
 Test #1, Test #3
 «ложный» expected image
 1 тест – 100 запусков
 similarity = 0.99

23. Test Name Selenuim vs Manual SikLenium vs Manual
Test #1
98.4% 98.4%
Test #2 67.2% 68.6%
Test #3 64.2% 60.9%
МЕТРИКИ (4): ВЫИГРЫШ ПО ВРЕМЕНИ ПРИ
ВЫПОЛНЕНИИ ТЕСТОВ (MANUAL VS AUTOMATION)

24. СРАВНЕНИЕ ПРОТОТИПОВ (1)
Параметр Selenium SikLenium
Время разработки прототипа (ч) X 2X
«Базовые» скриншоты X шт. 2X шт.
Расчет координатной сетки да нет
«Сторонние» библиотеки -
sikulixapi.jar (v.1.1.0)
Необходимость разработки
методов получения и сравнения
скриншотов
да нет
Скорость выполнения тестов схожие значения для обоих подходов
Стабильность выполнения все хорошо до определенных значений нагрузки
Надежность выполнения (false-
positive tests)
все «ложные» проверки пройдены
зависит от similarity, «ложного»
скриншота и «ожидалок»*
Трудозатраты на обновление
зависит от «изменяемой» части
(поведение, цвет, форма и расположение и пр.)
Масштабируемость (в рамках
приложения)
зависит от тестируемой страницы приложения*

25. СРАВНЕНИЕ ПРОТОТИПОВ (2)
Параметр Selenium SikLenium
Зависимость от разрешения
экрана да*
Зависимость от уровня
zoom браузера да
Формат скриншотов .png (по умолчанию), .jpg (также работает)
Глубина цвета изображения 24-bit (по умолчанию), 32-bit (также работает)
Размер изображения (в пк) 2 сравниваемых скриншота должны быть одного размера
Разрешение изображения
(dpi) 96 DPI (использовался для 2 прототипов)
Влияние наличия
«идентичных» элементов
на экране
нет
возможно*
Возможность управления
точностью сравнения
изображений
нет
да
(similarity)

26.  setup необязателен (via
POM-файл)
 «коварная» similarity
 документация – хорошо,
но FAQ – порою лучше
 название image-файлов
без символа «_» и пр.
 driver.manage().window().
fullscreen() не работает
в ChromeDriver
 настройки компа: front
size, DPI и пр.
SikuliX Selenium
WebDriver
General
GENERALSIKULIX SELENIUM
WEBDRIVER
НАБИТЫЕ ШИШКИ

27. Трудности Selenium:
 разработка методов для
работы со скриншотами
 координатная сетка
Трудности SikLenium:
 дополнительные
зависимости (SikuliX,
OpenCV)
 сложность работы с
similarity
1 2 3
ВЫВОДЫ (1)
Оба подхода:
 имеют ряд недостатков
и ограничений
 требуют заготовки (и
обновления) «expected»
изображений (! в разном
объеме)

28. Для условий нашего
проекта мы выбрали
прототип Selenium
(координаты +
взаимодействие via
WebDriver API +
сравнение скриншотов
и изменений в html).
Учитывая
 возникшие сложности
(влияет на t разработки)
 специфику сравнения
изображений с параметром
similarity (надежность
результатов ???)
 общность проблем
(зависимость от screen
resolution и пр.)
 отсутствие очевидного
выигрыша по времени у
какого-либо из подходов
 возможность
переиспользования
координатной сетки (с/без
коэффициентов)
 невозможность предугадать,
какие изменения наиболее
вероятны
ВЫВОДЫ (2)

29. ИСПОЛЬЗУЕМЫЕ МАТЕРИАЛЫ
 Тестирование приложений на Canvas: рецепты на примере тестирования
API Яндекс.Карт (https://habrahabr.ru/company/yandex/blog/177163/)
 Тестирование безDOMных объектов современных веб-интерфейсов. SQA
Days12 (https://www.youtube.com/watch?v=aLUXFcYKq2Y)
 Тестируем Canvas c помощью Sikuli Script и Selenium WebDriver
(http://www.slideshare.net/ISsoft/html5-canvas-sikuli-selenium-2-web-driver)
 Visual vs. DOM-Based Web Locators: An Empirical Study (14th International
Conference, ICWE 2014)
 Visual GUI Testing: Automating High-Level Software Testing in Industrial Practice
(2015) (http://publications.lib.chalmers.se/records/fulltext/221145/221145.pdf)
 Практическое применение Sikuli Script в автоматизации тестирования. SQA
Days16 (https://comaqa.by/2016/06/02/sikuli-script-sqadays16/)
 Библиотека fabric.js (http://fabricjs.com/)
 Информация о SikuliX (http://sikulix.com/ и http://sikulix-
2014.readthedocs.io/en/latest/index.html)

30. Спасибо за
внимание!
Контакты
Skype: marta_verenchikova
Email:
marta.verenchikova@gmail.com
LinkedIn:
https://www.linkedin.com/in/verenc
hikova/en