October 28, 2018 Jonny Steiner

Take Cross Browser Testing to the next level with Visual Testing

Take Cross Browser Testing to the next level with Visual Testing

Share this knowledge!

The Need for Speed

In our demanding age of digital, customer expectations for new and better experiences are constantly on the rise – and the competition to launch new and better mobile sites has never been fiercer. Indeed, innovation, quality, and speed are of the essence. Without them – brand loyalty, competitive positioning, and revenues are all at risk.

That’s why launching new website features and capabilities faster than ever is critical for every organization, and the standard in web-based application development is approaching continuous delivery.

To address the need for speed without compromising quality, continuous testing is performed, automating tests as part of the software delivery pipeline.

Why Current Visual Testing Doesn’t Deliver

To compensate for when something goes wrong with how a web page is displayed, for whatever reason, visual testing is mandatory. Visual testing today, however, is mostly done manually, making for very labor and time-intensive process, which frequently results in errors.

Current automated visual testing methods mainly rely on image capture and comparison. Limitations of this method are that test reuse for common elements is impossible, and extensive overhead for maintaining baseline images. These factors limit the effectiveness of image comparison in large scale continuous testing.

Consequently, organizations are faced with an impossible decision between long testing processes or releasing versions that were not tested visually.

How Layout Testing Bridges the Gap

Luckily, layout testing provides a solution. Layout testing validates the way objects are laid out on a web page, i.e. their position, size, alignment, ordering, visibility, etc. Since the layout of objects can be defined in code, a test can be written and results can be calculated using the code, and not images.

This approach lends itself to unprecedented automation. Basically, as you write the code for the site, you can also write the test and validate the code. Moreover, you can trigger automated tests, that are both visual and functional – running them both as part of your continuous testing process.

Layout Testing and the Galen Framework

To effectively automate visual testing, it is important to make sure that in “real life” situations, the layout of the page appears on devices and browsers as intended. This can’t be done by using images. Rather, effective automation can only be done with programming that interfaces with the logical layer.

One tool that does exactly that is the Galen Framework, which is an open-source framework for layout testing. It tests the location of objects relative to each other on a page. Using a special syntax and comprehensive rules testers can describe any layout imaginably.

The Galen framework relies on the Document Object Model (DOM) for layout testing. DOM is an interface for HTML and XML documents. It represents the page as it is rendered by the CSS – using nodes and objects. By using the DOM nodes and objects, programming languages and automation tools can interface with the page.

In layout testing, Galen looks at how an object – for example the menu bar – is actually represented on the page under specific device and browser conditions using the DOM. Thus, through layout testing, we can arrive at a code-driven understanding of how the object was supposed to appear vs. how it actually appears on the page.

While Galen is very effective for testing object layout and visibility, at the end of the day it is a framework, not a tool. Thus, using the Galen framework for test development as well as for maintenance requires coding expertise.

The Key Capabilities Required for Overcoming the Challenges of Visual Testing

The key to overcoming the above-noted challenges is to have a tool that enables testers to leverage the benefits of layout testing but is easy to use. Specifically, such a testing tool would require the following elements:

  • Layout-based testing using Galen, for a robust test automation approach that requires very little test maintenance;
  • A GUI-based interface for easy test creation;
  • High maintainability and reusability of tests;
  • Integration with common cross browser automation frameworks such as Selenium; » Integration with CI/CD tools, enabling a continuous testing process.

The Automated Visual Testing Tool from Experitest

Experitest introduces a revolution to visual testing, with our automated visual testing tool. Now you can easily validate that all buttons, text, and images are in the right position, proportion, and size.

Our solution enables you to easily develop layout tests and make visual testing a part of your CI/CD pipeline. You can verify UI responsiveness across different resolution screens and windows during automated cross browser testing, to ensure a consistently great user experience on any device or screen size.

Solution Highlights

Automate Visual Tests with Ease – A GUI based web application testing interface enables you to create and run automated visual testing with ease, based on the Galen open-source framework. Moreover, the tool functions as a Chrome extension to enable easy real-time interaction with your web page.

A Visual Test Editor – The drag-and-drop Visual Test Editor enables you to easily pick and add any UI element to your responsive web testing. It also allows you to easily define specs, where each layout testing spec defines the rules regarding size, position, and proportion of UI elements.

Large Scale Cross Browser Execution – Get instant feedback by executing your visual tests across 1000+ of devices and browser versions as part of CI pipeline with the SeeTest Digital Assurance Lab.

To download the full whitepaper click here.

Guy Arieli, CTO, Experitest

Share this knowledge!