In childhood, we must have all played the IQ game of identifying distinctions in two similar-looking photographs. The goal of the game was to compare two identical photographs and find changes that could only be seen with careful inspection. The foundations for visual testing are essentially similar. The goal is for a tester to compare visual components provided by the customer with the application in order to detect any anomalies and provide constructive feedback.
Often any software testing company will talk about various attributes of testing like functional, backend, database user interface, etc. Out of these, visual testing services test the interface of the application or website at hand. It checks the following items:
- Physical position and rendering of UI elements
- Compatibility with cross browsers and operation systems
- Final look and feel of the application’s UI
The end goal is to have a product that matches the requirements shared by the client. Which method to use is the choice of the tester that gives maximum results by utilizing minimum resources. The question here is why do we need visual testing in the first place when everything we test here can be rendered in functional testing? Let’s dig a little deeper for the same.
Development teams are always under pressure to deliver fast without compromising the quality of the end product. That is precisely why companies spend a lot of time performing functional tests to analyze the quality, reliability, and performance of an application. Manually testing these apps can be time-consuming, which is why companies opt for automation tools like selenium that help speed up the process.
Visual Testing vs Functional Testing: Why We Need Visual Testing?
Visual testing is used to test the visual aspects of your application. But visual testing tools can also be used for functional testing. So that’s the point. Visual testing can help write functional tests better. These are tests that typically tell us how an application behaves when in action. To understand let’s dig deeper into how visual and functional testing of an application takes place.
Functional Testing
In the most basic terms, functional testing is supposed to start an application in a certain state, perform a set of actions and ensure that the application remains stable post the action is complete.
Here are the steps of a functional test:
Step 1: Load application data
Step 2: Launch the application
Step 3: Execute some actions on the interface
Step 4: Check the application is performing as per the criteria given by the client
So, the idea behind a test looks something like this:
Action — Assertion — Action — Assertion
Let’s take an example of an e-commerce website:
One functional test would be:
- Action: Check products selected in the cart
- Assertion: all products in the cart are selected before proceeding
- Assertion: all discounts if applicable are applied
- Assertion: the total price of all products is reflected at the end
How do we implement functional assertions?
Now let’s see how one will go about checking if the application is implementing all our assertions-
Say it’s a web application and a browser application library like Selenium WebDriver is being used then the tester will need to ensure that all products in the cart are selected before check out and none are missing. Then he/she must also ensure that other additional charges that include shipping charges and discounts are reflected in the shopping bag window.
So, for every other assertion, there is a set of actions he/she will have to repeat. An additional step is to determine the ID of their test which includes a lot of to and fro with the development team.
Note: this step is ideally repeated across hundreds of tests and thousands of actions and assertions. It’s practically impossible. So, in a real-life testing scenario, the developer will choose a subset of assertions and test just them while forgoing the others.
Now let’s see how visual tests are performed and how they can solve this problem.
Visual Testing
A visual test is a functional test that is supposed to start an application in a certain state, perform a set of actions and ensure that the application looks good to post the action is complete.
No, that’s not a posting error… a visual test looks exactly the same as a functional test with almost similar execution steps.
So here are the steps of a visual test:
Step 1: Load application data
Step 2: Launch the application
Step 3: Execute some actions on the interface
Step 4: Check the application looks as per the criteria given by the client
Visual testing steps are exactly like those of functional testing, except the assertions are slightly different.
Let’s have a look at how these assertions are performed in case of a visual test to ensure that the application looks good.
How do we implement visual assertions?
Step 1: Take a screenshot of the window, most often called the baseline screenshot
Step 2: Run a test Wireframes provided
Step 3: Take another screenshot
Step 4: Compare it with the baseline screenshot taken at step 1
If the algorithm states the screenshots are the same: Assertion passed!
If not: Assertion failed!
Generating these screenshots is a two-phase process. The tester ideally checks these baseline screenshots manually. Every time the assertion fails, it could be because of a bug in the software or some minor changes implemented in the software. In the latter scenario, the new screenshot becomes the baseline screenshot that’s referred for further transactions.
How does Visual Comparison Work?
As easy it may seem, visually comparing two screenshots is not a cakewalk. That’s because different OS, browsers, or versions of the same browser generate minutely different images.
How do we use visual assertions in functional testing?
After closely understanding the technical difference between how functional and visual testing operates, we can conclude that the only difference lies in their assertions and the steps of how they implement the assertions.
- Functional assertions check all possible variables on an application’s UI to ensure it has the correct value
- Visual assertions compare a screenshot image of the same UI against a manually verified baseline screenshot
Compared to the functional testing process, visual testing seems pretty easy to execute. The steps to look for an ID, check each control, or touch base with developers are skipped here. Visual testing frameworks like WebDriverCSS can be easily used to compare these images and share detailed reports with differences.
So here’s how we can use visual assertions for functional testing:
Step 1: Load application data
Step 2: Launch the application
Step 3: Execute some actions on the interface
Step 4: Take a screenshot for verification. Check if the data is correct
Think of the E-Commerce application cart we mentioned above.
With one screenshot we can verify if the products are correctly selected in the cart, sum totals are in place along with all other assertions we made before moving forward with the test.
Many developers use a similar concept of testing against a baseline where they check the HTML component of the application and not the image’s visual aspect. It’s just easier this way.
