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

Тестирование верстки сайта - довольно известная проблема и существуют разные методы ее решения. В этой статье я бы хотел представить еще один способ автоматизации с помощью 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, но его уже вполне можно использовать в бою. Буду рад любым отзывам и баг-репортам.

9 лайков

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

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

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

Один из примеров внедрения javascript перед тем как проверить верстку есть тут Mind engine -

Более подробно все возможные действия в Galen описаны тут Galen Test Suite Syntax | Galen Framework

1 лайк

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

Да, Galen поддерживает попиксельное сравнeние участков изображения, а также позволяет накладывать фильтры для обработки изображений (размытие, убирание шума и т.д.) - Galen Specs Language Guide | Galen Framework

Также можно нарезать скриншоты для отдельных объектов с помощью page dump фичи - Version 1.3.0. Image comparison in layout testing | Galen Framework

Добрый вечер.Я начала осваивать автоматизацию тестирования верстки и вот нашла Galen - хочу его освоить,нашла доку по нему,нашла ваш пример,хотела сделать свой пример для понимания,но никак не могу понять как писать спеку и как в фиче описать:как придумать сценарий.Для тестирования нашла сайт, сценарий конечно примитивный,может вы что то посоветуете какой сценарий можно теализовать для сайта https://www.грузпитерлайн.рф
И как описать локаторы ??Прочитала ,что можно без локаторов ,но тест падает.
Сценарий такой: Открывается страница
Проверяется наличие кнопки “Заказ он-лайн”
Проверяется его размеры
Проверяется его шрифт
Вот никак не могу реализовать используя Galen,помогите пожалуйста

Кто считал РОИ этого солюшена)))

Я пробовала и с тестовой страницей Galen , но тоже не выходит

Штука вроде интересная. Но с их github’а примеры тестов без напильника не работают. По крайней мере у меня они не завелись, и сборка тоже не собралась из-за юнитов.
Частота выхода версий у них тоже резко снизилась с 15-го года, но может это ничего не значит, как с релизами Java.

Оставлю тут ссылки на ролики про Galen, если кому интересно (сам может смогу когда посмотреть/пересмотреть тоже):
Тестирование верстки в декларативном стиле (Вячеслав Москаленко)
Автоматизация тестирования верстки, быть или не быть
TDD адаптивной верстки c применением Galen Framework – Павел Карев

Другие доклады про тестирование верстки (в основном через метод сравнения снимков с эталоном):
Людмила Мжачих — Найди 10 отличий, или Как и зачем тестировать верстку
Автоматизированное тестирование верстки веб сайтов
Антон Усманский — Особенности визуального тестирования интерфейсов
Практика внедрение тестирования вёрстки в проект Башинский

Ещё был доклад про сравнение снимков от ребят из Яндекса, но не нашёл его. Думаю там ещё с десяток подобных найдётся. Если не секрет, то для чего автоматизируете проверку вёрстки? Всё остальное уже автоматизировано и работает как часы? Не смотрели в сторону gemini, сравнивалок по скриншотам?

2 лайка