Testing your layout across browsers and mobile devices can be quite hard and is usually a job which requires a lot of manual testing time. Thinking about it makes it quite obvious why this is so hard to automate. But it is not entirely impossible and you can achieve a quite good automated layout test suite by using the Galen Framework.

To use the Galen Framework you’ll need to describe the layout of your page in a simple descriptive language. After that this description is interpreted by the framework and the results are compared in various different browsers. In this post I’ll run you through every step between downloading the tool and creating a first automated layout test. Lets go…

Setup Galen Framework

In this example I’ll install and run Galen on the Windows Operating system. You can find detailed instructions for Linux / OS X here.

To run Galen you’ll need at least Java 6 which can be downloaded for free on the Java page. After that you can simply download the current binary of Galen on their homepage. For Windows simply extract the zip file anywhere you like. Now add the path you just chose to the Windows PATH environment variable. It is advisable to pick a path which does not contain white spaces.

You can test your installation by opening a command prompt, switching to your Galen folder and executing

galen.bat --version

We can now create our first basic test case.

A simple test case

For this example I’ll take our homepage to test against. If you take a look at it you’ll be able to see that in the top left there is our logo. Our first basic test will validate that the logo is there and has a size of 70 x 49 pixel.

To do this I created a new empty text file called homepage.spec which will contain our description of the homepage to test against.

Please note that you cannot use tabs in this file. Create all indentation using spaces.

At the beginning of the spec file you’ll need to define every element you want to test in this test case. A definition contains of 3 different things:

[name] [type of identification] [value of identification]

For our first test we only need to identify the logo by the id “logoicon”. The first line of our spec file therefor is:

logo id logoicon

which could be spelled out to “you can find the element with the name logo by using the id logoicon”. Galen will use this to find our icon at runtime.

Now that Galen can find our element we’ll need to tell it how it should look like. For this first example we are going to validate the size of the icon itself but other, more complicated validations are possible as well.

Our full spec file now looks like this:

=================
logo id logoicon
=================
logo
 height: 49px
 width: 70px

Run a test case

Now we can finally execute the test case and see the full power of Galen. To do so change to the folder where you saved the spec file and execute the following command:

check homepage.spec --url https://www.browseemall.com --size 1024x768 --htmlreport .

This command will open Firefox and run our test. After test completion a HTML report will be generated to summarize the results.

Congratulations you just executed your very first automated layout test. 

A full page test

Of course this rather simple test is not that useful in practice. Below you will find a complete layout test for our the navigation of our homepage using many different Galen commands and validations. You will also find the necessary commands to execute this test in various different browsers.

# Demonstration test case for navigation at www.browseemall.com
========================================
# Here we'll define the objects we want to verify
# name identification-method identification-value
topbar css #navigation div.navbar-static-top div.header-upper
logo id logoicon
header css #navigation div.navbar-static-top div.header
title css #navigation div.navbar-static-top div.header a.navbar-brand h1
tagline css #navigation div.navbar-static-top div.header div.slogan
navigation css #navigation div.navbar-static-top div.header div.navbar
tryButton css #navigation div.navbar-static-top div.header div.navbar a.search-form-tigger
 
========================================

# Here we'll validate the different elements 

# How the page should be validated on desktop resolution
@desktop
-----------------------------------------

# The topbar should be at the very top of the page, 100% width 
topbar
 width: 100% of screen/width
 height: 36px
 above: header

# The header is below the topbar and again at 100% width
header
 width: 100% of screen/width
 below: topbar
 
# The logo should be 70 x 49 pixel and inside the header
logo
 width: 70px
 height: 49px
 inside: header

# The title "BrowseEmAll" should be displayed inside the header, near the tagline
title
 inside: header
 near: tagline 10 to 20px left
 text is: BrowseEmAll
 
# The tagline is displayed next to the title
tagline
 inside: header
 near: title 10 to 20px right
 text is: Cross Browser Testing
 
# Finally the navigation is to the right of the tagline
navigation
 inside: header
 contains: tryButton

To run this test using Firefox, Chrome and Internet Explorer save the above as browseemall.spec and create a new file browseemall.test with the below content:

Home page navigation test
 selenium ie https://www.browseemall.com 1024x768
 check browseemall.spec 
 selenium firefox https://www.browseemall.com 1024x768
 check browseemall.spec
 selenium chrome https://www.browseemall.com 1024x768
 check browseemall.spec

Now you will need to download the Selenium Chromedriver and IEDriver and extract them at a location of your choice. You might also need to modify your Internet Options as described here.

With just a simple command line you can now run your test in all 3 different browsers (replace the location of your chrome and IE driver of course):

galen test browseemall.test -Dwebdriver.chrome.driver="c:\Users\dherk_000\Downloads\chromedriver.exe" -Dwebdriver.ie.driver="c:\Users\dherk_000\Downloads\IEDriverServer.exe"

Beyond layout tests

As you can see it is possible to create very powerful layout tests. And even better: Galen can also perform actions in the browser prior to checking the layout (like logging in and performing a layout test for a Dashboard). Of course creating the spec files can be quite a lot of initial work but the time savings can easily outperform the initial setup time.