Авчинникова О.И.28.03.15

Как улучшить тесты на Selenium с помощью

визуального тестирования?

Agenda

• Что такое Visual Testing?

• Почему его нужно автоматизировать?

• Tools & technology

• Где его можно использовать?

2

Что такое Visual Testing?

*а так же visual software testing, visual checking, visual inspection, visual comparison visual regression testing

- это процесс проверки отображенного пользователю интерфейса на предмет соответствия заявленным требованиям.

Цель: проверить нет ли визуальных багов (шрифт, разметка, др. проблемы отображения).

3

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

4

Заблуждения?

1. Баги верстки они некритичны. Функциональное тестирование куда боле важно.

2. Затраты ресурсов на написание Visual-тестов не оправдывают пользу от их

использования.

3. Проверить визуально корректность интерфейса приложения довольно просто.

4. Инструменты выполняющие сравнение изображений работают неэффективно.

5. Поддержка скриншотов в актуальном состоянии забирает очень много времени.

5

Agenda

• Что такое Visual Testing?

• Почему его нужно автоматизировать?

• Tools & technology

• Где его можно использовать?

6

Почему нужно автоматизировать Visual Testing?

1. Слишком много вариантов требуют проверки:

• Несколько браузеров.

• Несколько девайсов.

• Несколько ОС.

• Несколько разрешений экрана.

2. Проверка верстки средствами автоматизации функционального тестирования

слишком трудоемкая.

3. Большой шаг на пути к ContinuousDelivery.

4. Регрессионное тестирование занимает меньше времени.

7

Agenda

• Что такое Visual Testing?

• Почему его нужно автоматизировать?

• Tools & technology

• Где его можно использовать?

8

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

9

Последовательность действий

10

• Запустить AUT и сделать скриншот.

• Сравнить скриншот с начальным “baseline” изображением.

• Зафиксировать разницу.

• Обновить “baseline”, если нужно.

Сложности?!

11

На этапе «Запустить AUT и сделать скриншот»

1. Что лучше использовать настоящий браузер или его без интерфейсный эмулятор?

2. Как же проверить всю страницу?

3. Как работать с фреймами?

4. Можно ли работать с отдельными областями страницы?

5. Ожидание загрузки страницы.

12

На этапе: «Сравнение скриншотов»

1. Ложные срабатывания.

2. Смещение хотя бы на один пиксель.

3. Изображения разного размера.

4. Динамический контент.

5. Анимация.

Сравнение одинаковых изображений дает негативный результат.

13

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

14

Обновить “baseline”

- Переименование или создание нового файла.

- Перезапись существующего изображения.

15

Fighting Layout Bugs

16

Applitools Eyes

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

17

Applitools Eyes

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

При первом выполнении теста:

При последующих, если найдены ошибки:

18

aShot (test 1)

19

aShot (test 1)

20

aShot (test 1)

21

aShot (test 2)

22

Galen Framework

Результат работы теста:

23

Сравнительный анализ инструментов

24

Критерий Applitools Eyes aShot Fighting Layout Bugs

Galen FrameworkПоддержка/

документация хорошо хорошо хорошо отлично

Создание скриншотов + + + +

Подсветка проблемных

областей+ + + +

Поддержка различных браузеров

+/- + +/- +

Возможность изменять “baseline”

+ - - -

Отчет + - - +Управление областями сравнения

+ + - -

Agenda

• Что такое Visual Testing?

• Почему его нужно автоматизировать?

• Tools & technology

• Где его можно использовать?

25

Continuous deployment

26

Запуск на боевомМониторинг Ops, QA

Приемочные тестыБоевой против тестового Ops, QA

ИнтеграцияСтраницы, элементы страниц Разработчик, QA, дизайнер и др.

Unit тестыКомпоненты, код ревью Разработчик, QA, дизайнер

Написание кода-

Где это может/должно запускаться?

Локальный браузер -

Без интерфейсный браузер -

Мобильный девайс/эмулятор -

Selenium grid -

Облачные сервисы -

27

Ссылки:

- Visual Testing: http://

testautomation.applitools.com/post/105435804567/how-to-do-visual-testing-with-seleniu

m

;

- Tools: http://

automated-testing.info/t/17-instrumentov-kotorye-uspeshno-pomogayut-s-avtomatizaczie

j-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=PL4Xdj6CMk6HRlUqnT7CyYxhRJA

BLiha18

.

28

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