Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

2.768 visualizaciones

Publicado el

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

Publicado en: Educación
  • Inicia sesión para ver los comentarios

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

×