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
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.
Using Galen to test eXo platform login page
We followed the documentation in http://galenframework.com/docs/getting-started-install-galen/ for installing Galen on Ubuntu. You can find there how to install Galen in your Operating System.
- 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
Galen provides test reports in different formats (HTML, JSON, TestNG and JUnit).
The report include a summary of all executed tests, with details about their duration and the number of failed/succeeded tests.
Results summary report
When clicking on each test, we can have details about the results and the causes of failures.
The Heat Map will display the HTML elements that were used in the executed tests.
What is next ?
In the next article, we will work to automate the execution and report generation of test reports, thanks to the integration of Galen framework with Maven and Selenium.
This will help integrate those tests with Continuous Integration servers (Jenkins).