Документ обсуждает визуальное тестирование (visual testing) как важный процесс проверки интерфейса на наличие визуальных ошибок. Подчеркивается необходимость автоматизации визуального тестирования для повышения эффективности и скорости проверок, а также приводится обзор инструментов и технологий, используемых для этой цели. Рассматриваются основные проблемы и заблуждения, связанные с визуальным тестированием, а также предлагается последовательность действий для его автоматизации.

1. Авчинникова О.И.
28.03.15
Как улучшить тесты на
Selenium с помощью
визуального тестирования?

2. Agenda
• Что такое Visual Testing?
• Почему его нужно автоматизировать?
• Tools & technology
• Где его можно использовать?
2

3. Что такое Visual Testing?
*а так же visual software testing, visual checking, visual inspection, visual comparison visual regression
testing
- это процесс проверки отображенного пользователю интерфейса на
предмет соответствия заявленным требованиям.
Цель: проверить нет ли визуальных багов (шрифт, разметка, др. проблемы
отображения).
3

4. Баги верстки..
4

5. Заблуждения?
1. Баги верстки они некритичны. Функциональное тестирование куда боле важно.
2. Затраты ресурсов на написание Visual-тестов не оправдывают пользу от их
использования.
3. Проверить визуально корректность интерфейса приложения довольно просто.
4. Инструменты выполняющие сравнение изображений работают неэффективно.
5. Поддержка скриншотов в актуальном состоянии забирает очень много времени.
5

6. Agenda
• Что такое Visual Testing?
• Почему его нужно автоматизировать?
• Tools & technology
• Где его можно использовать?
6

7. Почему нужно автоматизировать Visual Testing?
1. Слишком много вариантов требуют проверки:
• Несколько браузеров.
• Несколько девайсов.
• Несколько ОС.
• Несколько разрешений экрана.
2. Проверка верстки средствами автоматизации функционального тестирования
слишком трудоемкая.
3. Большой шаг на пути к ContinuousDelivery.
4. Регрессионное тестирование занимает меньше времени.
7

8. Agenda
• Что такое Visual Testing?
• Почему его нужно автоматизировать?
• Tools & technology
• Где его можно использовать?
8

9. Инструменты?
9

10. Последовательность действий
10
• Запустить AUT и сделать скриншот.
• Сравнить скриншот с начальным “baseline”
изображением.
• Зафиксировать разницу.
• Обновить “baseline”, если нужно.

11. Сложности?!
11

12. На этапе «Запустить AUT и сделать скриншот»
1. Что лучше использовать настоящий браузер или его без интерфейсный эмулятор?
2. Как же проверить всю страницу?
3. Как работать с фреймами?
4. Можно ли работать с отдельными областями страницы?
5. Ожидание загрузки страницы.
12

13. На этапе: «Сравнение скриншотов»
1. Ложные срабатывания.
2. Смещение хотя бы на один пиксель.
3. Изображения разного размера.
4. Динамический контент.
5. Анимация.
Сравнение одинаковых
изображений
дает негативный результат.
13

14. Документирование различий
14

15. Обновить “baseline”
- Переименование или создание нового файла.
- Перезапись существующего изображения.
15

16. Fighting Layout Bugs
16

17. Applitools Eyes
Отчет о выполнении теста:
https://eyes.applitools.com/app/sessions/251974833743.../.
17

18. Applitools Eyes
Отчет о выполнении теста:
https://eyes.applitools.com/app/sessions/251974833743.../.
При первом выполнении теста:
При последующих, если найдены ошибки:
18

19. aShot (test 1)
19

20. aShot (test 1)
20

21. aShot (test 1)
21

22. aShot (test 2)
22

23. Galen Framework
Результат работы теста:
23

24. Сравнительный анализ инструментов
24
Критерий Applitools Eyes aShot
Fighting
Layout Bugs
Galen
Framework
Поддержка/
документация
хорошо хорошо хорошо отлично
Создание
скриншотов
+ + + +
Подсветка
проблемных
областей
+ + + +
Поддержка
различных
браузеров
+/- + +/- +
Возможность
изменять
“baseline”
+ - - -
Отчет + - - +
Управление
областями
сравнения
+ + - -

25. Agenda
• Что такое Visual Testing?
• Почему его нужно автоматизировать?
• Tools & technology
• Где его можно использовать?
25

26. Continuous deployment
26
Запуск на боевом
Мониторинг Ops, QA
Приемочные тесты
Боевой против тестового Ops, QA
Интеграция
Страницы, элементы страниц Разработчик, QA, дизайнер и др.
Unit тесты
Компоненты, код ревью Разработчик, QA, дизайнер
Написание кода
-

27. Где это может/должно запускаться?
Локальный браузер -
Без интерфейсный браузер -
Мобильный девайс/эмулятор -
Selenium grid -
Облачные сервисы -
27

28. Ссылки:
- Visual Testing: http://testautomation.applitools.com/post/105435804567/how-to-do-
visual-testing-with-selenium;
- Tools: http://automated-testing.info/t/17-instrumentov-kotorye-uspeshno-pomogayut-s-
avtomatizacziej-visual-software-testing/5670;
- aShot: https://github.com/yandex-qatools/ashot;
- Galen Framework: http://galenframework.com;
- Fighting-layout-bugs: https://code.google.com/p/fighting-layout-bugs/;
- How to level-up your Selenium tests with Visual Testing:
http://seleniumcamp.com/materials/visual-testing-with-selenium/,
https://www.youtube.com/watch?v=sSJSD-m-
Xrg&index=3&list=PL4Xdj6CMk6HRlUqnT7CyYxhRJABLiha18.
28

29. Спасибо за внимание!