Delivering Results with Responsive UI Layout Test Automation

What is a Responsive User Interface

Responsive web pages are more user friendly than a single page which can be run only on a 1024 x 768 screen. A Responsive User Interface (UI) needs to self-adjust, or ‘respond’, according to various screen dimensions. This issue has raised the competition among various companies that need to represent their content in every way possible to deliver an optimal user experience no matter which devise is used.

Responsive web pages adjust themselves according to the device size, orientation, browsers and OS. Responsive design concepts reduce the struggle of how the user interacts with the content being delivered on the screen irrespective of the make of the device. Different frameworks use different dimensional methodologies to create responsive web pages. Hence, there is a need to create a generic set of automated layout tests which verify the layout of the page irrespective of the framework employed.

Indeed, the use of Responsive UI design has brought in the need to validate the UI layout on various viewports so that end user experience is properly tested before releasing the application.

Responsive UI Layout Testing Case Study

A perfect example of this need for Responsive UI Layout Testing comes from a recent project with one of our large enterprise customers in the Media sector. The customer was facing problems where its end users were unable to easily navigate to get access to content in the e-newspaper application due to its responsive nature. Users were experiencing issues with the content displaying properly on various viewports.

Challenges of Responsive UI Design and Testing

There were multiple challenges that needed to be addressed in order to provide a flawless user experience, including :

• The daily e-newspaper was to be published with the UI showing news updates from various parts of North America, including content such as images and videos.
• Advertisements needed to be properly visible in every dimension so that they could be clearly visible to the user, and the user should be able to click on the ads, enabling more ad revenue generation.
• Menu Navigation for every page needed to be displayed properly on each device and orientation to enable accessibility.
• Breaking news for the hour needed to be displayed as a footer.
• Top news from every section needed to be visible with proper clicks to read the whole story.
• Text needed to be fixed so as not to overlap at the edges with the decreasing size of the device.
• Ability to flash correct error messages in case of any issues with good colors used to display the messages.
• Images displayed needed to be of good quality and clearly visible.
• Adjust alignment of text and images with change in orientation and screen size.
• Change colors on hovering the mouse over necessary buttons and links.
• Needed a good content consumption environment which followed the rule “follow users not devices.”
• All the above mentioned criteria needed to be tested for every page along with the regression testing in case of some changes as there needed to be innovation and creativity in the design.

Ultimately, the customer needed a solution that could help make its product more optimized to enrich the end user experience, as well as make its content easily visible with varying screen sizes over different devices with optimum accessibility. This also meant that advertisements placed on the content needed to be properly validated so that there is no loss of revenue leading to stakeholder dissatisfaction.

Automated Responsive UI Layout Testing Solution

The Bitwise QA Center of Excellence took up the challenge by first chalking out the Layout Testing Automation solution. The team’s approach included the following steps, and the solution delivered was aligned with best practices :

• Analyzing the pages with the most critical content.
• Defining the viewports (Browser / Device) on which the UI needs to be validated.
• Using open source API (Galen) and creation of various gspec files, which essentially include layout tests, ensuring best practices are followed.
• Writing user interactions using Selenium WebDriver in the tests.
• Use of single tests for both Browser and Mobile devices (Android and iOS).
• Executing these tests on Cloud Devices (Android and iOS) and Browsers.
• Reporting automated test results through emails to stakeholders.

The approach ensured that CB (Cross-Browser) and CD (Cross-Device) Testing was aided using a cloud solution coupled with an open source API to ensure optimum test coverage. These tests were then executed periodically during regression.

This resulted in ensuring that the content and elements on the pages are displayed flawlessly over various viewports. As a result, the test suite created added value to regression testing by optimally validating the UI on various layouts after changes were done to the applications.

Increased Customer Satisfaction

Bitwise provided a complete automated responsive UI test solution that received enormously positive feedback from its users, leading to a 40% increase in ad revenues. In addition, the subscription rate increased due to the efficacious automated testing provided by our test suite design.

With our expertise in delivering solutions around Responsive UI Layout Test Automation, we set up a framework using open source tools and APIs. As a result of using our test suite to identify issues on various viewports and OS, the customer achieved ROI in terms of better quality and content leading to increased customer satisfaction. The test suites created were generic and easily maintainable, which also reduced maintenance costs and served as a cost saver during the long run.

What challenges are you facing in designing and testing your Responsive UI Layout? Leave a comment below or contact Bitwise…we’d love to help.