Automating the layout testing for websites is always a challenging. But is very important in the current industry as the Responsive Web Design has become more popular than ever in the Front End Development. Testing these responsive web application manually is a herculean task as the testing spans across multiple resolutions,devices and browsers. Huge amount of manual effort and infrastructure support is required in order to cover the above scenarios.
In the quest of finding out sophisticated tool I had two things in mind. First thing was, tool should be able to integratable with any Selenium based automation frameworks by considering its usage in the industry. Second thing was, tool should be Open source. I was able to find out a very good tool which can be integrated with Selenium named Applitools. But applitools is a Paid tool. I have already shared a post that explains how applitools can be used with selenium framework. You can find the post here.
This time I am going to share a Open source tool which can be used for RWD Layout tests.
Galen Framework is built on top of selenium. This checks each individual component of the page with another element.The fundamental testing concept in Galen Framework centers on checking the location and size of all page elements relative to each other. This way, you can describe the layout for any browser window’s size and you don’t have to use absolute positioning. Selenium offers functionality for getting location and dimension of element in all browsers. When it comes to testing a responsive layout it works in a following way:
1. Open a page in browser
2. Resize it to specified size
3. Test the layout according to user-defined specs
Galen allows you to express your expectations towards website layout and then uses selenium to retrieve the information about the page elements. These expectations should be written in a special laguage called GalenSpec language. The Galen Specs language was designed to resemble natural English as closely as possible and has been implemented in a semi-Markdown way. The below link gives you more details about Galen Spec Language.
Once your test is completed Galen provides very comprehensive reporting. Galen provides good explanations using Object Definition names in reports when a test failed or passed. You can also have a nice screenshot in a popup after clicking on the failed test.It highlights the failed object on the screenshot. It will show you what's wrong at a glance. These reports would automatically generated under "target/galen-html-reports". But these can also be saved into user specific HTML Reports.
Once you click on any report, it opens the below view with hierarchical details.
The initial version of Galen Framework was in JavaScript. But now it is supporting Java as well. Here is the sample project with Galen Java API.
You can download this project and add your own pages with the Galen Spec Language. This can also be integrated with the existing java and selenium based automation frameworks by its Maven dependency.
Below are some other features of Galen:
1. We can use it for image comsprison as well with percentage of tolerance
2. This can be iintegrated with saucelabs for cloud based devices
3. This can be used for internatiolization
4. Galen also tests the Colors of your website
5. Galen is very good for cross browser testing
6. This will fit into the behavior testing processes such as BDD,TDD etc.
Conclusion:
In my personal opinion, this is a very good open source tool for RWD automation. But if you are looking for only layout testing, I would use it for the main lines of a project like the global layout of a given page or when a feature really needs a particular layout. I would recommend using Galen aside your daily tests, it's just another security before going in production. This can also be used by the front end developers before they push code changes to QA.
