Based on our internet browsing habits and the available statistics, no one is wondering that mobile devices have become the main gear for internet traffic. Thus, Web Responsiveness has become an important requirement when building any web application. Any product that wants to reach efficiently its users needs to consider all the possible devices that those users may be using.

To properly maintain those responsive web applications, application makers allow a considerable time to run tests with every new release.

Some challenges arise from this need:

We need all the screen sizes of all devices on each testing, and add new resolution when new devices are available on the market

We need to be able to detect regressions as soon as they are introduced in the application

The application has a single source code but it should be able to render differently on each screen resolution, it should automatically decide what components to show and what other components to hide

Galen Framework

Some frameworks were built to help succeed the challenge of checking the adaptativity of the layout with different device sizes.

In this article, we will use Galen which is a layout and functional testing framework that has its own programmatic language.

This framework tests the position of elements in the web page based on a specification file and the set of screen sizes to test. When the tests are run, Galen opens the browser, then resizes it with the defined screen size, then opens the URL. The tests will succeed if all the rules that were specified in the specification file are respected; otherwise the tests will fail.

Galen Installation

Executing tests

Create Galen spec file

The Galen specification file will be used to define the rules for each web component in the tested page. It provides a specific syntax. This syntax is flexible and allows the definition of all web elements in the page using selection by HTML id attribute, CSS classes or XPath. Then it allows to specify how all those web elements will be rendered in different browser types and screen sizes.

Here is a sample Galen specification file used to test the eXo platform login page:

We defined three objects in this spec file:

loginUI: the box that includes the login form

usernameInput: text field for the username

passwordInput: text field for the password

Then, we specified how those elements will behave in mobile, tablet and desktop. For a simple example, we defined the following rules for each of the 3 screen sizes:

The value of the width of the loginUI and the usernameInput elements

The position of the passwordInput compared to the usernameInput

2- Create Galen test suit

In the test case, we define the set of browsers and screen sizes to test. We choose to test with Chrome and Firefox with the screens of Mobile (320×600), Tablet (640×480) and Desktop (1024×800).

Then we have the test name and the script that will be executed for all those tests. Our Galen test file looks like:3- Reading results