Will tell about real cases that may arise if you would not test a layout of your application. We’ll take a look at popular tools for automated layout testing and dive deep into Galen Framework usage. Consider how to build an automatic design review process in a scrum team and what pros and cons such process has in real work.
4. Может приносить убытки
4
Bug с позиционированием всплывающих окон
Возник из-за обновления версии Chrome
3 часа пользователи не могли произвести
перевод в другой банк
10. Требования к инструменту для автоматизации тестирования верстки
‣ Низкий порог входа
‣ Поддержка кроссбраузерности
‣ Поддержка адаптивности
‣ Стабильность
‣ Возможность интеграции с существующими
инструментами
10
13. Из чего состоит
13
‣ для рендеринга
‣ для эмуляции действий пользователя
‣ для анализа, сравнения скриншотов
14. Требования к инструменту для автоматизации тестирования верстки
✓Низкий порог входа
- Поддержка кроссбраузерности
✓Поддержка адаптивности
✓Стабильность
- Возможность интеграции с существующими
инструментами
14
20. Galen Framework позволяет
20
‣ Тестировать расположение элементов
‣ Тестировать css стили
‣ Тестировать по скриншотам
‣ Эмулировать действия пользователя
‣ Проверять адаптивность
‣ Тестировать в разных браузерах
‣ Интегрироваться с Selemium тестами
21. Требования к инструменту для автоматизации тестирования верстки
21
✓ Низкий порог входа
✓ Поддержка кроссбраузерности
✓ Поддержка адаптивности
✓ Стабильность
✓ Возможность интеграции с существующими
инструментами
30. Пользовательский сценарий
Сценарий: Отображение страницы входа GitHub
Дано совершен переход на страницу "GitHub" по ссылке "gitHubUrl"
Тогда страница соответствует спецификации
"gitHubPage.spec" для экрана "desktop"
31. @Тогда("(?:страница соответствует|соответствует|блок соответствует) спецификации
"([^"]*)" для экрана "(D+)"")
public void compareCurrentPageWithBase(String spec, String tag) {
List<String> tags = new ArrayList<>();
tags.add(tag);
checkLayoutAccordingToSpec(spec, tags);
}
Cucumber Step Definition
Проверка, что текущая страница соответствует описанным в .spec файле
требованиям
* @param spec - Название galen-spec, где описан ожидаемый дизайн
* @param tag - название тэга в galen-speс (@on desktop), для которого
описан дизайн конкретных элементов.
33. Запуск тестов
33
Проверки в .spec файлах описали
Эталонные скриншоты сделали
Локально тесты прошли
Пора запустить тесты на ремоуте!
(у себя используем Selenoid)
35. Несоответствие изображений на разных ОС
error=Error{[Element does not look like «./akita-testing-template/src/test/resources/specs/
images/registration-form.png». There are 10,47% mismatching pixels but max allowed is 10%]
35
Actual Expected Map
37. Решение проблемы тестирования в разных OC
37
‣ Поставить допустимую погрешность (error) 15%
‣ Тестировать все в Docker
38. Решение проблемы тестирования в разных OC
38
‣ Поставить допустимую погрешность (error) 15%
‣ Тестировать все в Docker
‣ Ставить специальные теги в .spec файлах
54. Дизайнер и фронт-разработчик
Вместе заполняют контракт
*.spec в рамках проекта,
в котором описывают:
➡ какие элементы будут на
странице
➡ как они будут выглядеть (стили,
шрифты и прочее)
➡ где они будут располагаться
54
56. А что же делает тестировщик?
дополняет «Контракт»
следующим:
описывает элементы на
странице согласно локаторам
56
57. А что же делает тестировщик?
дополняет «Контракт»
следующим:
описывает элементы на
странице согласно локаторам
уточняет/проверяет
расположение элементов, их
стили и шрифты
57
58. А что же делает тестировщик?
дополняет «Контракт»
следующим:
описывает элементы на
странице согласно локаторам
уточняет/проверяет
расположение элементов, их
стили и шрифты
создает эталонные скриншоты
58
60. В итоге
‣ Сократили количество и время прохождения smoke
тестов ∽ на 20%
‣ Уверены в корректном отображении страницы для
топовых браузеров
60
61. В итоге
‣ Сократили количество и время прохождения smoke
тестов ∽ на 20%
‣ Уверены в корректном отображении страницы для
топовых браузеров
‣ Пришли к автоматическому дизайн-ревью
61
62. В итоге
‣ Сократили количество и время прохождения smoke
тестов ∽ на 20%
‣ Уверены в корректном отображении страницы для
топовых браузеров
‣ Пришли к автоматическому дизайн-ревью
‣ Поймали баги при изменении библиотеки UI-
компонентов
62
63. Подходит если
‣Зрелая Scrum команда
‣Требуется соблюдение единого дизайна
многостраничного приложения
‣Разрабатываем Webview и Web версии
‣В команде нет выделенного дизайнера на Full-time
63
64. Не всегда оправданно, если
‣Молодая Scrum команда
‣One page application
‣В команде есть Full-time дизайнер, который
сам проводит ревью верстки новых внедрений
64
