Dec 20, 2013

Cross-browser layout testing with Galen Framework

In the previous post TDD for Responsive Design I have introduced you the Galen Framework - the tool which is very useful when it comes to automating layout testing for responsive website. In this post I would like to show you how to use Galen Framework for testing cross-browser compatibility. We all know when it comes to a website development it is a hell to support it in different browsers. With every little change on the website there is always a chance of breaking the layout in some other browser. And the sooner you find it – the better. Lets see how to automate that using Galen Framework together with Selenium Grid.

Set up a Selenium Grid

If you already have an experience with Selenium Grid you can skip this paragraph and go to the next step: Writting Galen tests

Download Selenium Server standalone from official website. At the moment of writting this article the latest version was 2.38.0. Start the server using the following command:

java -jar selenium-server-standalone-2.38.0.jar -role hub -port 4444

Now on a separate machine (preferably Windows so you could run Internet Explorer) lets run a selenium node. But first lets make node config and define our browsers there. Put the following in the nodeconfig.json file

{ "capabilities": [ { "browserName": "firefox", "platform":MAC, "maxInstances":4, "acceptSslCerts":true, "javascriptEnabled":true, "takesScreenshot":true, "firefox_profile":"" }, { "browserName": "chrome", "platform":MAC, "maxInstances":4 }, { "browserName": "internet explorer", "version": "8", "platform": "XP", "maxInstances": 1 } ], "configuration": { "cleanUpCycle":2000, "timeout":30000, "proxy":"org.openqa.grid.selenium.proxy.WebDriverRemoteProxy", "maxSession":5, "port": 5556, "host": "172.16.0.1", "register" : true, "hubHost" : "localhost", "hubPort" : 4444 } }

We also need to download chromedriver.exe file and place in selenium node folder. Now lets run a selenium node with the following command.

java -jar selenium-server-standalone-2.38.0.jar -role webdriver -Dwebdriver.chrome.driver="c:\selenium-grid-node\chromedriver.exe" -Dwebdriver.ie.driver="c:\selenium-grid-node\IEDriver.exe" -nodeConfig nodeconfig.json

Lets see if everything is correct. Open http://localhost:4444/grid/console in your browser. You should see something like this:

As you see on the picture we have one node with 3 browsers so now we can proceed doing Galen tests.

Writting Galen tests

Lets try to perform layout tests for Galen Framework Website. We are going for the simplest thing – testing the header on our website. Lest create a file homepage.spec and write down the following:

===================================== header-container id header header css #header .wrapper header-logo css #header a img header-caption css #header span.header-text header-twitter-button id twitter-header-button ===================================== @ Header | ----------------------------------- header-container inside: screen 0px top width: 90 to 100% of screen/width height: ~ 103px header inside: header-container 20px top centered horizontally inside: header-container width: < 1001 px header-logo inside: header 0 px top left width: 68px height: 68px header-caption near: header-logo 10 to 15 px right inside: header 0 px top header-twitter-button width: 200 to 210 px height: ~32px inside: header-container 40 px top, 20 px right

Now we need to parameterize our home page test in a test suite. For this we are going to create a file cross-browser.test and put the following:

@@ Set domain galenframework.com size 1200x768 gridUrl http://localhost:4444/wd/hub @@ Table browsers | browser | browserName | | internet explorer | Internet Explore 8 | | firefox | Firefox | | chrome | Chrome | @@ Parameterized using browsers Home page in ${browserName} browser selenium grid ${gridUrl} --browser "${browser}" --page "http://${domain}" --size ${size} check homepage.spec

That’s it! Now we can run it against our Selenium Grid and see how it performs tests in different browsers.

galen test cross-browser.test --htmlreport reports

This is the report you should get in the end: Cross-Browser Report
For more information on Galen Framework please visit the official website

There is a also a video demonstration of cross-browser testing using Galen Framework

Posted in Web, Automation, Galen, Selenium
comments powered by Disqus