Cross-Browser Layout Testing With Galen Framework And Sauce Labs

Every web developer faces this problem once the website is implemented: cross-browser layout testing. This is a very annoying task as you have to look at your website on a lot of different browsers. We used to perform a manual check on all these browsers at the end of website development, and as a result we get some layout issues and have to find hacks to fix these deffects. But what if we could automate layout testing of the website and perform it always in all major browsers? Imagine you follow a TDD technique in your front-end development and you want to have an early feedback on layout issues. To solve this problem you could have a look at Galen Framework. In short Galen Framework is a layout and functional testing framework that has its own language for describing the layout. The way you test layout using this approach is by declaring a set of elements on the page and rules describing where each element is expected to be. The elements are being tested relatively to each other. This way you can make your tests very flexible and run them on different browsers and even mobile devices in case your website is responsive. In this article I would like to show you how to write a basic layout test and run it in the SauceLabs cloud. SauceLabs offers various platforms and browsers and even allows you to choose browser versions. Lets take the major browsers like: Internet Explorer 11, Firefox, Chrome, Opera and Safari on Mac. The website under test will be http://testapp.galenframework.com.

Download the latest Galen Framework version and install it. Once you have Galen installed just create an empty test folder anywhere on your file system. Go to that folder and create two files: homepage.spec and crossbrowser.test . The first one will have the specifications of the layout for home page. The website under test is responsive so normally you should also write layout specifications for different sizes. But in this article we will only cover the desktop layout so our tests will be simpler. And also one very important part - use spaces instead of tabs for indentation. Tabs are ignored so you will get an error if you indent with tabs.

Put the following code in homepage.spec

file:

=============================================== header css #header .middle-wrapper header-icon css #header-logo header-text css #header h1 menu css #menu .middle-wrapper content css #content =============================================== header width: 900px height: ~ 69px centered horizontally inside: screen 1px header-icon width: 48px height: 48px inside: header 0px left, 5 to 15px top bottom header-text inside: header 5 to 22px top bottom near: header-icon 15 to 30px right menu aligned vertically all: header below: header 0 to 1px height: ~ 64px content aligned vertically all: menu below: menu 0 to 1px

>In the code above we described the location of only 5 elements but that is enough for the demonstration for now. Galen Framework has a very comprehensive syntax which allows to describe any complex layout. If you would like to learn more about it you can read this article: Galen Specs language guide. In short what we have described in the test code above is the following:

You don't have to learn the galen syntax to understand what is checked in it as the code is quite readable. Of course for more complex examples like repetitive components you will have to have a basic understanding of the syntax to be able to read the spec, but that is something for another tutorial. In this post, we will focus on Sauce Labs' integration.

>Now how shall we run all these checks on all major browsers? Lets put this code in the crossbrowser.test file:>

@@ set sauceKey 325325-1515-235325325-2353253325 sauceUser ishubin gridLogin ${sauceUser}:${sauceKey} gridUrl http://${gridLogin}@ondemand.saucelabs.com:80/wd/hub website http://testapp.galenframework.com @@ table browsers | browserName | gridArgs | | Safari on Mac | --browser "safari" --version 6 --dc.platform "OS X 10.8" | | Opera | --browser "opera" --version 12 --dc.platform "Linux" | | Firefox | --browser "firefox" --version 34 --dc.platform "Linux" | | Chrome | --browser "chrome" --version 39 --dc.platform "Linux" | | IE 11 | --browser "internet explorer" --version 11 --dc.platform "Windows 8.1" | @@ parameterized using browsers Home page on ${browserName} browser selenium grid ${gridUrl} --page ${website}${gridArgs} check homepage.spec

As you can see you will have to be registered at SauceLabs and obtain the key from it. Just replace the sauceKeyand sauceUserproperties with your own credentials. Now you can run the tests with this command: "galen test crossbrowser.test --htmlreport reports". Galen will run tests on all declared browsers and in the end of the test run it will create a folder with html reports. Just open the reports/report.html> file in your browser and you should get something like this:

The website that we used for our tests looks ok on all those browsers. Now lets see how Galen can highlight the errors in case of broken layout. I have prepared a broken version of the website that is not showing well on Internet Explorer. Lets replace the website parameter in our test suite with the url http://testapp.galenframework.com/cross-browser-bug and rerun all the tests again. As you can see on the report below we have a lot of failures in Internet Explorer 11.

Lets take a closer look at the failures. Just click the test link in the report overview and you should get this page with detailed errors:  

If you scroll down you will see the error message "header-text is -98px right which is not in range of 15 to 30px". If you click the red spec above this error message you will get a screenshot with highlighted elements on the page:  

As you can see on the screenshot the header text is misplaced and that is why in our test report we get a message saying that it is located -98px to the right. It's actually not located to the right at all and that is why Galen gives us negative value. In the test we have specified that we expect the header text to be located from the right side of an icon with 15 to 30 pixel margin. The layout problem is quite clear and as you can see Galen was capable of catching this layout defect. And with help of SauceLabs Galen was capable of catching the layout issue in Internet Explorer. But SauceLabs offers not only cross-browser testing but it gives you a variety of mobile platforms with tablets and phones and with an ability to choose the device orientation. That means you can build a reliable test automation even for your responsive website and make sure it looks great on all mobile and desktop browsers. If you are curious about layout testing you can read more articles about Galen Framework on MindEngine.net website.