Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,324 views

Published on

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

Published in: Education
  • Be the first to comment

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

  1. 1. Автоматизация визуального тестирования адаптивного дизайна на примере Galen Framework и Applitools Eyes
  2. 2. Коротко о себе Дарья Кисель QA Automation Engineer ISsoft / Coherent Solutions https://comaqa.by csi.dariakisel Меня зовут: Кем работаю: Skype:
  3. 3. О чём речь • Что, как и зачем автоматизировать в визуальном тестировании • Applitools Eyes SDK. Объект Eyes в Java тестах • Как избежать ложных несоответствий изображений • Что делать с приложением, если его дизайн слишком «отзывчивый» • Galen Framework. Пишем спецификацию к дизайну • Интеграция фреймворка с Java тестами • Выводы
  4. 4. Немного теории Визуальное тестирование (aka тестирование визуальных регрессий) – это акт проверки того, что графический интерфейс приложения корректно отображается для пользователя Особенности • это НЕ функциональное тестирование • это регрессионное тестирование • это тестирование с точки зрения конечного пользователя Цель: найти расхождения с эталоном, ошибки рендеринга страниц, шрифтов, изображений
  5. 5. Что мы на самом деле тестируем ?
  6. 6. • Замена множества ассертов одной визуальной проверкой • Тестирование динамического контента • Кроссбраузерность • Кроссплатформенность • Наглядный репортинг • Тестирование в процессе CI Что важно при выборе инструмента ?
  7. 7. APPLITOOLS EYES Облачный сервис, выполняющий визуальные валидации: проверки GUI, сравнение с эталонным изображением Web, Mobile и Native приложений Visual Regression Testing Tool Платный инструмент • Selenium-Java SDK + • Web-interface
  8. 8. APPLITOOLS EYES SDK • Selenium, Appium(Java, .Net, Ruby, Python, JS), Microsoft Coded UI, HP UTF
  9. 9. Принцип работы инструмента • Сделать скриншот при прохождении теста • Сравнить полученный скриншот с baseline image • Сделать отчет о несовпадениях изображений • Обновить baseline, если необходимо
  10. 10. Рассмотрим один пример «отзывчивого» дизайна
  11. 11. Объект Eyes в Java тестах • Eyes object • API key • WebDriver
  12. 12. Объект Eyes в Java тестах • Группы тестов • Скриншот целой страницы в Chrome и Safari
  13. 13. Примеры тестов
  14. 14. Отчёты о прохождении тестов
  15. 15. Отчёт о несовпадениях
  16. 16. Отчёт о несовпадениях
  17. 17. Решение проблем динамического контента Изменение способа сравнения: • mismatch tolerance • ignored region • floating region
  18. 18. Решение проблем динамического контента Mismatch tolerance
  19. 19. Решение проблем динамического контента Floating region
  20. 20. Решение проблем динамического контента Ignored region
  21. 21. Galen Framework • Изначально создан для тестирования адаптивного дизайна • Написание тестов на Java и JS. Использует gspec файлы. • Работает c Selenium Grid, Sauce Labs, BrowserStack • Репортинг: HTML, TestNG ( e.g для добавления в CI)
  22. 22. Вспомогательные схемы Desktop [ 1211 – max ] px
  23. 23. Laptop [ 779 – 1210 ] px Вспомогательные схемы
  24. 24. Tablet [ 778 – 491 ] px Вспомогательные схемы
  25. 25. Mobile [ 490px – min ] px Вспомогательные схемы
  26. 26. Пишем спецификацию gspec Описание элементов
  27. 27. Выделяем общее и частное
  28. 28. Выделяем общее и частное
  29. 29. Применяем циклы
  30. 30. Применяем циклы
  31. 31. Компоненты
  32. 32. Компоненты • text contains • text starts • text ends • text matches
  33. 33. Применяем в Java тестах • getReport • load • inject • resize • checkLayout
  34. 34. Применяем в Java тестах
  35. 35. Тестируем в рандомных разрешениях
  36. 36. Тестируем в рандомных разрешениях
  37. 37. Как выглядят репорты
  38. 38. Сравнение изображений
  39. 39. Сравнение изображений
  40. 40. Сравнение изображений • analyze-offset • contrast • denoise • quantinize
  41. 41. Выводы • Довольно низкий порог вхождения • Требует небольшие навыки автоматизации и языков программирования • Скорость, удобный интерактивный API • Невозможность тестирования случайных разрешений экрана • Полное покрытие проверками адаптивных блоков страниц • Долгое составление spec файлов • Необходимо уметь работать с локаторами элементов • Нужны навыки работы с Java и/или JS Applitools Eyes Galen Framework
  42. 42. Спасибо за внимание Кисель Дарья ISSoft / Coherent Solutions www.comaqa.by

×