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 do cross-browser testing 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 us today to learn more.
