testomat.io управление авто тестамиТестирование верстки сайта - довольно известная проблема и существуют разные методы ее решения. В этой статье я бы хотел представить еще один способ автоматизации с помощью Galen Framework. Этот инструмент основан на Selenium и использует WebDriver для того, чтобы открыть нужную страничку в указаном браузере, получить информацию об элементах на странице и сделать скриншот в случае найденой ошибки.
Основа Galen Framework (или просто Galen) - это язык разметки страницы. Сам инструмент и язык Galen Specs, в отличие от CSS, оперирует объектами на странице, а не классами. Расположение каждого объекта на странице описывается и тестируется относительно других объектов. Т.е. если мы, например, хотим кому-то объяснить на словах как должен выглядеть каркас сайта ( http://samples.galenframework.com/tutorial1/tutorial1.html ) на разных устройствах то скажем нечто подобное:
“Шапка сайта должна быть над меню и растянута по всей ширине браузера. Меню должно быть горизонтальным на десктопе, но на мобильной версии меню должно быть в виде таблице из двух колонок. Боковая панель (side-panel) должна на десктопе располагаться справа от главной (content) и быть 300 пикселей в ширину. На мобильной версии боковая панель должна быть под главной…”
Вообщем продолжать можно долго. Теперь каким образом выразить все это в Galen с точностью до пискелей? Сначала нужно перечислить тестовые объекты, с которыми мы будем работать в файле homepage.spec
==================================
header id header
menu id menu
content id content
side-panel id side-panel
footer id footer
==================================
Дальше можно начать тестирование с использованием тегов: all, desktop, tablet, mobile. Теги нужны для того чтобы привязать тестовые проверки к размеру браузера. В нашем случае тег “all” будет использоваться для всех размеров.
@ all
------------------------------------
header
width: 100% of screen/width
height: 100px
above: menu 0px
menu
width: 100% of screen/width
below: header 0px
above: content 0px
footer
width: 100% of screen/width
height: > 100px
content
inside: screen 0px left
below: menu 0px
@ desktop, tablet
-----------------------------------
side-panel
width: 300px
below: menu 0px
inside: screen 0px right
near: content 0px right
menu
height: 50px
footer
below: content 0px
@ mobile
-----------------------------------
side-panel
width: 100% of screen/width
below: content 5px
content
width: 100% of screen/width
above: side-panel 5px
footer
below: side-panel 0px
Теперь, чтобы запустить проверки под разные размеры браузера, нужно написать набор тестов в отдельном файле. Создадим файл tutorial.test и запишем следующее:
@@ Parameterized
| device | size | tags |
| desktop | 1024x768 | all,desktop |
| tablet | 600x800 | all,tablet |
| mobile | 400x600 | all,mobile |
Tutorial 1 Home page in ${device} device
http://samples.galenframework.com/tutorial1/tutorial1.html ${size}
check homepage.spec --include "${tags}"
Запускаются тесты такой коммандой:
galen test tutorial.test --htmlreport reports
После запуска Galen откроет браузер, изменит размер окна до указаного и проверит расположение всех тестовых элементов на страничке. И так три раза для трех разных размеров.
Пример сгенерированного отчета можете посмотреть тут http://samples.galenframework.com/tutorial1/reports/report.html
Т.к. Galen Framework основан на Selenium то тесты можно запускать и в Selenium Grid, чтобы проверять верстку в разных браузерах. Также, если вам интересно, есть другие примеры тестовых проектов Galen на GitHub - ishubin/galen-workshop
Официальный сайт проекта http://galenframework.com
Проект выложен на GitHub GitHub - galenframework/galen: Layout and functional testing framework for websites
Пока что проект находится на стадии beta, но его уже вполне можно использовать в бою. Буду рад любым отзывам и баг-репортам.
