With the wide expansion of internet access on myriads of devices, it has become crucial to build mobile-friendly products that can be used by non-desktop users, as well as to improve the ranking in search results.
TravelTriangle is India’s leading online travel marketplace bringing both the travelers, and trusted & expert travel agents on a common platform, and with that much user base and with multiple platform support, it is crucial for us to understand key device characteristics from a development and testing standpoint. Whether it’s a native app, hybrid apps, or responsive web apps; (RWD) screen size, screen resolution, and PPI (pixel per inch – pixel density) need to be taken into consideration. As technology is evolving, new device models are being released and screen sizes become more variant and testing the layouts of different clients with different screen sizes become more challenging for the QA teams.
In this article, we will be discussing how we can automate the visual layout testing so that QA cycle can be more efficient and reliable.
Concept:
There are many tools that can interact with web objects over web page like Selenium Webdriver, with the use of such tools we can extract the layout properties like DOM, colors, font size, relative location and so on automatically of any web object. And simultaneously we can have expected layout properties already stored for each screen sizes or devices to be compared with extracted properties. You can also refer the presentation on web consistency with RedGlass and DOM Reactor(link), which I presented over NCR meetup in 2013 which highlight the same concept.
There is an open source framework called Galen Framework, which works on same concept, it’s a framework that uses selenium at the backend and validates the layout properties of web objects against the specs written in page specific specs file. Framework is open source so you can make any customization based on your requirement. I will NOT be discussing here in detail, the various customization we have done in the framework at our end to cope up with different challenges, but will give the idea of galen API’s.
Galen API’s give the power of validating the layout properties against the expected ones. The idea is to open the web page over a desktop browser or mobile device or tablet and resize it to specified screen size, and the layout of the web object on web page would be verified against the specs written in a file. You can easily override the createDriver() to have support of remote execution and mobile emulation for different devices and tablets.
Check the code snippet below to understand how to use chromium apis for mobile and tablet emulation
Map<String, String> mobileEmulation = new HashMap<>();
mobileEmulation.put(“deviceName”, “Nexus 5”);
ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setExperimentalOption(“mobileEmulation”, mobileEmulation);
WebDriver driver = new ChromeDriver(chromeOptions);
There is a tag and screen size attached to every Test Device class, you can customize this behaviour to support your custom tags which can be used later in specs and in reports and these inputs can be pulled into configuration files.
If you are using maven to build the project, then use following dependency in your POM file for the framework API’s.
<dependency>
<groupId>com.galenframework</groupId>
<artifactId>galen-java-support</artifactId>
<version>2.0.3</version>
</dependency>
Simple tests can be written in the following format:
@Test
public void welcomePage_shouldLookGood_onMobileDevice() {
load(“http://example.com”, 1024, 768);
checkLayout(“/specs/welcomePage.spec”, asList(“mobile”));
}
Above test will load the url and check the layout against the specs written in file /specs/welcomePage.spec.You can always override the methods like load(), checkLayout(), createDriver() and so on to add your custom code.
Specs File
Specs Language is quite flexible and gives you the opportunity to express exactly how you want your website to behave on different devices. It is quite powerful which enables QA to test layouts in every possible way. There are two main sections in page specs file: object definitions and object specs. A simple specs file look like below.
To understand the specs fully refer the details here.
Reporting
The framework generates Html reports where you can see all your test objects on the page where it automatically highlights the misaligned elements. It gives the ability to perform visual check and shows you the mismatching area. To have automatic report generation for maven projects you can use following properties to add listener to maven-surefire plugin.
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.17</version>
<configuration>
<properties>
<property>
<name>usedefaultlisteners</name>
<value>false</value>
</property>
<property>
<name>listener</name>
<value>com.galenframework.testng.GalenTestNgReportsListener</value>
</property>
</properties>
</configuration>
</plugin>
To have a view of reports following are some sample reports of our test execution —
This is one of the implementation of visual layout framework, you can incorporate any custom implementation based on your requirements, but the fact is, the concept of validation of visual layouts in QA cycle is the need of an hour.
Hope this helps! 🙂
Comments