How to Add Visual Testing to Existing Selenium Tests

Selenium is a free, open-source testing tool that is used to automate testing. It is mostly used to test software on their functional aspects and isn’t optimized to include testing on their visual aspects. There exists a strong misconception within the industry on the ease of automating visual testing. These opinions are unfounded as the automation of visual testing isn’t extremely challenging. Therefore, while almost every aspect of testing today is automated, a lot of enterprises still employ the use of manual testing when it comes to visuals. This forms a bottleneck for these organizations when it comes to achieving continuous deployment. Automating visual testing is rather simplistic. Automation is also possible for both new and existing Selenium tests.

What is Visual Testing?

It is defined as the act of inspecting an application’s graphical user interface [GUI] and ensuring it is displayed as intended. It is also occasionally labelled as visual checking or visual regression testing. As the name suggests, the objective of visual testing is to find visual errors. Errors like misalignment of objects, font, layout, rendering issues, etc. It can also be implemented to verify the content on a page, which makes it lucrative for websites with high graphical functionality [charts, graphs, dashboards, etc.].

Visual Testing and Selenium:

Since Selenium isn’t designed to test visual appearance and/or the CSS-Code directly, other approaches have to be considered:

• By defining style guides
• Document Object Model [DOM] comparison
• By running a screenshot comparison
• By checking the syntax of CSS and HTML

The comparison using the screenshot method is the easiest to implement. With the use of a third-party software, such as Applitools Eyes, one can add testing checks even into existing Selenium tests. Add another program like Sauce Labs to the mix, and one can test across almost every browser, device, platform, and configured in any combination. The many variables involved magnify the operational complexity, but implementing the other existing open source/commercial solutions makes Visual Testing feasible. It adds tremendous value and is also becoming easier to implement with every passing day.

How does it work?

Let’s consider a single automated visual test. During the test a single page is looked at and every distinct element displayed on it is verified to render correctly. Therefore, even on a single page, hundreds of objects are checked for various characteristics [position, overlaps, incorrect rendering, etc.]. A single visual test directly translates into a hundred different verifications. This process repeats itself with each distinct visual test. It can then be scaled to each browser, operating system, device, screen resolution, etc. taking one a few steps closer to continuous delivery.

There are several tools that can be used along with Selenium to perform Visual Tests (for example, Applitools Eyes). Though they might be different from each other, all of them follow variations of the following workflow:

1. Run the Application Under Test [AUT] and take a screenshot
2. Compare the screenshot taken with a ‘baseline’ image. [A representative image for the intended GUI]
3. Report the differences, if any
4. Update the baseline image as required

Every time a script is run, a screenshot is taken. A screenshot taken initially becomes the baseline image used for comparisons in the future. Every subsequent run, the newer screenshot is verified to be within the mismatch tolerance limit specified for the baseline image. If the mismatch exceeds the tolerance limits, the script fails. Once the script fails enough times, the baseline image can be updated automatically to ensure it represents the newest version of the GUI, but only when instructed to do so. With this method, Visual Test automation can be easily incorporated into existing Selenium tests as well, and the shortened development cycle makes continuous development much easier.

On 1^st June, 2015, SeleniumHQ labeled Cigniti Technologies as an Aluminum Level Sponsor on their official website, www.seleniumhq.org. This recognition confirms Cigniti’s position as a specialized software testing service provider, committed to making sure clients get value from their QA investments.

Cigniti’s Selenium Test Automation Services cover a wide range of browser, OS, device combinations, and provide end-to-end cross-browser test automation solutions. Leverage the experience of top Selenium experts, IP-led testing frameworks with an assurance of world class quality. Contact Cigniti Technologies today.