Galen

Testing Responsive Design Is Easy

What is it?

Galen is a tool for testing html layout in a real browser.

Galen Features

Human readable syntax
Runs in Selenium Grid
Complete page interaction with Selenium
Advanced test suite syntax with data-providers

How Can I Use It?

You can start using Galen even before you start working on your html. You can think of the page design, write tests and then implement the website

Step 1. Initial Idea

Identify devices for which you will write your Galen tests and prepare drafts of your website for these devices

Step 2. Galen Specs

@ desktop
----------------------------------
side-panel
    width: 280 to 300px
    near: main 10px right

menu
    near: main 20px top 
    contains: menu-item-home, menu-item-categories, menu-item-blog

@ mobile 
----------------------------------
side-panel
    width: 100% of screen/width
    near: main 10px bottom

main
    width: 100% of screen/width
    near: menu 10px bottom

Galen offers various constraints in human readable format. Use them to describe the page layout on different devices

Step 3. HTML

Implement html for your website

Step 4. Object References

Once the html is finished you can define the references to all your objects in spec using one of the locators: id, css, xpath

=========================================================

# Here are all object definitions                 
header              id          header-container
header-text         css         #header-container h1
menu                xpath       //ul[@data-name='menu']

=========================================================

These references are used by Selenium to locate objects on page

Step 5. Run Galen tests


$ galen check home-page.spec 
    --url "http://example.com/home" 
    --size 1024x800 
    --include desktop 
    --htmlreport report.html

Step 6. Galen reports

How does it work?

Constraints

The best way to test responsive design is to tell Galen how elements are located relatively to each other on page

Example 1

search-textfield
    near: search-button 20px left

Example 2

search-button
    inside: header 20px top right

Example 3

menu-item-home
    aligned hotizontally all: menu-item-categories, menu-item-about, menu-item-rss

Example 4

menu-item-home
    aligned vertically right: menu-item-categories, menu-item-about, menu-item-rss

All constraints

absent
near
inside
aligned
above
below
centered
on
image

text is
text starts
text ends
text matches
text contains
width
height
contains
component

Advanced Specs

============================================================
# You can specify multiple references in one line
# Galen will fetch all elements and replace * with numbers starting from 1
menu-item-*             css     #menu li
============================================================

# Now you can parameterize object specs
# The following syntax will create object specs
# for all menu items from 1 to 7
[ 1 - 7 ]
menu-item-@
    width: 150px
    height: 40px

Any questions

?

For more information visit Galen project page