Automated responsive website testing

Content is several years old and will probably no longer be up-to-date.

Automated responsive website testing with Galen Framework


In this post I outline how to implement automated responsive website testing.

But from my point of view it is also important to test a website with real devices, to feel the behavior and whether it looks good on the devices. This can be conducted as part of a bug hunt, where different tester with various devices like smart phones, tablets, or desktop browser tested the website.

This said, I will focus now on the automated responsive website testing. These were the reasons why I looked for a tool:

  • For this project we wanted to implement Continuous Delivery (CD) – therefore we needed something to get fast feedback after every deployment on the different stages.
  • The pages of the website consist of multiple fragments, e.g. the header and footer are provided by other services. We needed also a test to verify whether all fragments are loaded and displayed.

After some research we found the Galen Framework ( With Galen Framework it is possible to test the location of objects relatively to each other and you can also check whether certain elements are displayed (or not) on different browser sizes. Furthermore with Galen Framework it is possible to check texts on the website or to compare screenshots. I will have a look at the compare screenshot feature sometime and probably update my post Compare Screenshots with Selenium WebDriver.


Most of all with the Galen Framework it is very easy to implement automated tests. First of all you only need a little html/css know how and the Galen Framework provides a good documentation on their website.

The website I had to test had different layouts depending on the browser size. I wanted to test each layout and I wanted to test the different pages of this website. I organized the tests with following files:

Test Files

Different tests can be stored in a test file with the suffix .gspec. It starts with the object definition where you give the html elements needed for the test a name and you specify the locator (id, css, or xpath) of each object. This section starts with the @objects keyword. The examples below refer to this website and are stored in the file taw.gspec.

	header     	div.header-image
	content    	div.entry-content
	headline	//h1
	sub-headline	//h2
	menu		#menu-toggle

It is also possible to import the object definitions in case you need them more than once.

To keep the tests clear, they can be divided into different sections (each starting and ending with a =). In a section you can check the position of html elements to each other (as in section ‘site set-up’), check whether a certain text is displayed or not (‘content’), check whether an element is present or not (‘menu’), check the height or width of an element, and so on.

= site set-up =
		below header
		below headline
= content =
		text is "Software Testing"
		text is "About us"
= menu =
	@on desktop
	@on mobile
			below menu
= failing =
	@on desktop
			below headline

In case a certain check should only be executed on a certain condition (e.g. browser size), the keyword @on with the name of the condition can be used.

In addition I have added in the section ‘failing’ a test which shoud fail because I would like to demonstrate the report feature.

Furthermore there are a lot more options and functions in Galen Framework, please refer to the online documentation.

With the following command the test can be started.

galen.bat check taw.gspec --url "" --size "1024x800" --include "desktop"

Test Suites

Another good feature in the Galen Framework is to define test suites. In a test suite the pages to be checked can specified and also the options for the check. The example below shows a test suite, stored in the file taw.test. In this example the website is tested with two different browser sizes.

@@ parameterized
    | viewport 	| size     |
    | mobile	| 360x640  |
    | desktop	| 1024x800 |
TestAndWin on ${viewport} viewport ${size}
    	check taw.gspec --include "${viewport}"

A test suite can be started with the following command:

galen.bat test taw.test --htmlreport "."

Add the command line argument htmlreport to store an html report of the test in the specified directory.

There are also more command line arguments available, e.g. to specify the number of threads to run the tests in parallel.


Galen Framework also provides different reports. When running in a Continuous Integration/Delivery environment JUnit or TestNG reports could be helpful to visualize the test result directly in the CI/CD environment or the let the build fail. Galen Framework also provides an HTML report giving a good overview about the test and test failures.

Automated responsive website testing - Galen Test Report

For each test the executed checks are displayed and the difference in case of a failing test.

Automated responsive website testing - Galen Test Report


Finally the Heat Map shows the misaligned elements.

Automated responsive website testing - Galen Heat Map


As a result I can say that using the Galen Framework is a good tool to do automated responsive website testing. It is very easy developing tests to check the structure of the website. For example, whether certain elements are displayed in a view port or not, how the elements are positioned to each other, and what content these elements have. Also I found it optimal for testing a static website. For functional tests, I would rather use other tools like Selenium / WebDriver.

Another plus in Galen is that you need very little programming knowledge for the development of tests, only some HTML / CSS knowledge.

Nevertheless in addition to the automated responsive website testing, it is also important to me to test a website with real devices to experience the look and feel. However, Galen Framework can help automate regression tests, which is very important in the context of CD.