Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Автоматизация визуального тестирования
адаптивного дизайна на примере
Galen Framework и Applitools Eyes
Коротко о себе
Дарья Кисель
QA Automation Engineer
ISsoft / Coherent Solutions
https://comaqa.by
csi.dariakisel
Меня зовут...
О чём речь
• Что, как и зачем автоматизировать в визуальном
тестировании
• Applitools Eyes SDK. Объект Eyes в Java тестах
...
Немного теории
Визуальное тестирование
(aka тестирование визуальных регрессий)
– это акт проверки того, что графический ин...
Что мы на самом деле тестируем ?
• Замена множества ассертов одной визуальной проверкой
• Тестирование динамического контента
• Кроссбраузерность
• Кросспл...
APPLITOOLS EYES
Облачный сервис, выполняющий визуальные валидации:
проверки GUI, сравнение с эталонным изображением
Web, M...
APPLITOOLS EYES SDK
• Selenium, Appium(Java, .Net, Ruby, Python, JS), Microsoft
Coded UI, HP UTF
Принцип работы инструмента
• Сделать скриншот при прохождении теста
• Сравнить полученный скриншот с baseline image
• Сдел...
Рассмотрим один пример «отзывчивого» дизайна
Объект Eyes в Java тестах
• Eyes object
• API key
• WebDriver
Объект Eyes в Java тестах
• Группы тестов
• Скриншот целой страницы в Chrome и Safari
Примеры тестов
Отчёты о прохождении тестов
Отчёт о несовпадениях
Отчёт о несовпадениях
Решение проблем динамического контента
Изменение способа сравнения:
• mismatch tolerance
• ignored region
• floating region
Решение проблем динамического контента
Mismatch tolerance
Решение проблем динамического контента
Floating region
Решение проблем динамического контента
Ignored region
Galen Framework
• Изначально создан для тестирования адаптивного дизайна
• Написание тестов на Java и JS. Использует gspec...
Вспомогательные схемы
Desktop
[ 1211 – max ] px
Laptop [ 779 – 1210 ] px
Вспомогательные схемы
Tablet [ 778 – 491 ] px
Вспомогательные схемы
Mobile [ 490px – min ] px
Вспомогательные схемы
Пишем спецификацию gspec
Описание элементов
Выделяем общее и частное
Выделяем общее и частное
Применяем циклы
Применяем циклы
Компоненты
Компоненты
• text contains
• text starts
• text ends
• text matches
Применяем в Java тестах
• getReport
• load
• inject
• resize
• checkLayout
Применяем в Java тестах
Тестируем в рандомных разрешениях
Тестируем в рандомных разрешениях
Как выглядят репорты
Сравнение изображений
Сравнение изображений
Сравнение изображений
• analyze-offset • contrast • denoise • quantinize
Выводы
• Довольно низкий порог
вхождения
• Требует небольшие навыки
автоматизации и языков
программирования
• Скорость, уд...
Спасибо за внимание
Кисель Дарья
ISSoft / Coherent Solutions
www.comaqa.by
Prochain SlideShare
Chargement dans…5
×

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

2 752 vues

Publié le

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

Publié dans : Formation
  • Identifiez-vous pour voir les commentaires

Автоматизация визуального тестирования адаптивного дизайна на примере 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

×