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
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 http://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 http://www.browseemall.com 1024x768 check browseemall.spec selenium firefox http://www.browseemall.com 1024x768 check browseemall.spec selenium chrome http://www.browseemall.com 1024x768 check browseemall.spec
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.