Документ описывает автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном, начиная с процесса создания скриншотов и заканчивая генерацией отчетов. Упоминаются различные браузеры и разрешения экрана, а также преимущества автоматизации, такие как снижение ошибок и повышение удовлетворенности работой. Автор документа – Эмиль Хуснетдинов, контактный адрес указан в конце.

1. Москва. 27-28 ноября 2015
Автоматизированное
тестирование верстки веб-сайтов
методом сравнения с эталоном
Эмиль Хуснетдинов
SmartHead. Казань, Россия

2. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Digital Production
• Дизайн и креатив
• Интерактивная коммуникация

3. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Digital Production
• Уникальная верстка
• Высокие требования к качеству верстки

4. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Найти 5 отличий

5. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном

6. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Тестирование верстки
• 10 страниц сайта
• 1280x1024, 1920x1080
• FF, IE11, Safari (Mac), Chrome, Opera

7. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Тестирование верстки
10 х 2 х 5 = 100

8. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Тестирование верстки
11 х 3 х 6 = 198

9. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Если вы думаете,
что приключения опасны,
попробуйте рутину:
это смертельно.
Пауло Коэльо

10. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Тестирование верстки -
рутина
• Монотонная работа
• Ручная подготовка данных
• Трудоемкая задача

11. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Автоматизация
тестирования верстки
1. Создать скриншоты страниц сайта
2. Сравнить изображения
3. Сформировать отчет

12. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Создание скриншотов
PhantomJS Selenium

13. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Скриншоты в Chrome

14. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Скриншоты в Chrome
Расширение листает страницу, склеивает
скриншот и возвращает изображение

15. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Сравнение изображений

16. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Рендер шрифтов

17. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Анимации

18. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Различия в контенте

19. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Регрессионное тестирование

20. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Кроссбраузерное
тестирование

21. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Отчет

22. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Автоматизация
тестирования верстки
• Уменьшилось количество ошибок при
тестировании
• Все заинтересованные лица могут
выполнить тесты
• Трудозатраты не изменились
• Выросла удовлетворенность работой

23. Автоматизированное тестирование верстки веб-сайтов методом сравнения с эталоном
Спасибо!
Эмиль Хуснетдинов
emil@smarthead.ru