Automating Canvas: difficult but possible
Download as PPTX, PDF0 likes968 views
Документ представляет исследование по автоматизации тестирования веб-приложений с использованием технологии canvas, описывая два прототипа тестирования: Selenium и Sikuli. Основное внимание уделяется различиям в подходах, эффективности и метрикам выполнения тестов, а также трудозатратам и стабильности. В результате выбрана система Selenium за её надёжность и простоту в использовании, несмотря на схожие временные показатели с Sikuli.
Automating Canvas: difficult but possible
- 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)