What is Visual Testing?

Sauce Labs employee working with two screens

Visual testing, also known as user interface (UI) testing in software development is how developers ensure that a web or mobile application they are building appears to the end-user as it was originally intended.

If a developer wanted to verify that their app looks right, they would perform a visual inspection of the UI and make note if there were any changes — intended or not intended. It can be compared to a car dealership performing a multi-point inspection on cars coming in for maintenance checks, ensuring that the vehicle still runs, and all the parts still look good.

Visual Problems, Not Detected Functionally

There is a good reason why developers should visually test their applications, especially if they run automated functional tests. When running a functional test, testers are validating that the behavior (output) correlates to the action (input). In an automated fashion, this usually works out well. 

For example, in a check-out sequence to purchase a t-shirt. In the test, the t-shirt is added to the basket, payment information is entered, and the “Buy Now” button is clicked.

However, what is unknown visually is the placement of the “Buy Now” button. It could have shifted far off the screen or become obstructed by another component on the page. This would not be detected in a functional test since the test is able to ‘click’ the button regardless of where it is placed. Since the test is not testing the visual aspect of the UI, this test would pass.

Scenarios like this can be resolved quickly and prevented with running a visual test to check for any visual regressions. 

Having an application display properly on one browser doesn’t necessarily mean that it’ll render the same for another. With the growing number of combinations of operating systems, viewport sizes, and browsers, it’s a good idea to test across a variety to catch any visual differences. 

Why Use Visual Testing

There are existing puzzle games out there that put two images side by side and have the players spot the difference; on the left is an original image and on the right is almost an identical image. The player(s) need to spot all the differences as the clock ticks down to zero and if they fail to point out all the differences, they lose the round.

Fortunately, when developing an application, the clock isn’t ticking down to zero to lose. Instead, there are other factors to worry about such as how much time is spent manually reviewing each UI and the possibility of releasing visual bugs into production. All of which affect productivity, confidence, customer experience, and more.

Visual Testing Solution

Instead of wracking your brain to identify what has changed and where it occurred, there are solutions out there to help automate this process. It’s known as Visual Testing and each time a test runs against the UI, it takes an image snapshot and automatically detects if any visual regression took place.

There is a saying, “A picture is worth a thousand words”, the same could be said here “A snapshot is worth a thousand assertions.”

Interested in Visual Testing? Contact Sales today to learn more.

Other articles you may like:

Written by

Larry Ho

Topics

Visual Testing