Есть отличная удаленная работа для php+codeception+jenkins+allure+docker спецов. 100% remote! Присоединиться к проекту

Тестируем верстку для адаптивного сайта с помощью Galen Framework


(Ivan Shubin) #1

Тестирование верстки сайта - довольно известная проблема и существуют разные методы ее решения. В этой статье я бы хотел представить еще один способ автоматизации с помощью 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 на https://github.com/ishubin/galen-workshop/

Официальный сайт проекта http://galenframework.com

Проект выложен на GitHub https://github.com/galenframework/galen

Пока что проект находится на стадии beta, но его уже вполне можно использовать в бою. Буду рад любым отзывам и баг-репортам.


Дайджест полезных ссылок для тестировщиков-автоматизаторов #015
(Andrey Kim) #2

Интересный tool. @ishubin Подскажите, есть ли в Galen проверка popup iframe элементов? Если есть как это реализовано? К примеру, нужно открыть страницу сразу с открытым popup элементом или есть возможность кликнуть по кнопке и подождать открытие вспывающего окошка?


(Ivan Shubin) #3

Да, конечно. Galen изначально создавался с возможностью функционального тестирования. Перед тем как проверять верстку, вы можете произвести кое-какие действия над страничкой:

  • cookie: внедряет указаные cookie и перезагружает страницу
  • inject: внедряет javascript в страницу
  • run: запускает javascript в тесте позволяя тем самым кликать по странице с помощью WebDriver
  • properties: загружает property файл
  • wait: ожидает либо указаное кол-во времени, либо до определенного элемента на странице

Один из примеров внедрения javascript перед тем как проверить верстку есть тут http://mindengine.net/post/2014-01-14-testing-colors-on-your-website-with-galen-framework/

Более подробно все возможные действия в Galen описаны тут http://galenframework.com/docs/reference-galen-test-suite-syntax/#PageActions


(Kosmos) #4

@ishubin, можно ли тестировать верстку с помощью наложения отдельных заранее нарезанных изображений компонентов на сайт?


(Ivan Shubin) #5

Да, Galen поддерживает попиксельное сравнeние участков изображения, а также позволяет накладывать фильтры для обработки изображений (размытие, убирание шума и т.д.) - http://galenframework.com/docs/reference-galen-spec-language-guide/#Image

Также можно нарезать скриншоты для отдельных объектов с помощью page dump фичи - http://galenframework.com/post/2014-09-28-version-1.3.0-image-comparison-in-layout-testing/#PageDump