Introduction to Visual Testing

What is Visual Testing?

Visual testing is the automated process of detecting and reviewing visual UI changes. It can be viewed as the automated process of comparing visible output of an app or website against a baseline image.

Visual testing is a form of regression test that ensures that screens that were correct have not changed unexpectedly.

How Visual Testing works?

Implementing visual UI testing typically involves four basic steps:

· Write a test that exercises your Application UI by sending simulated mouse and keyboard events in order to enter various states, and capturing a screenshot in each of these states.

o Sending simulated mouse and keyboard events in order to enter various states

o Capturing a screenshot in each of these states.

· Compare the captured screenshots to previously captured baseline images.

· Review the resulting differences and:

o Identify cases where differences were caused by a new feature that does not appear in the baseline image and accept the new screenshot so that from this point forward it is used as the new baseline image for that checkpoint.

o Identify cases where differences indicate a bug that needs to be fixed, report the issue and reject the image - meaning that the baseline image is not updated and remains as is.

· Save the baseline updates, so that they are used for the next test run.

   The very first time a test is run, there are no baseline images, so the screenshots that are captured are adopted as the baseline images. On subsequent runs, the flow is as described above.

Below image shows the complete workflow of how the visual testing works: