How to Use Visual Testing as an Aid to Functional Testing?

How to Use Visual Testing as an Aid to Functional Testing?

We all must have played that IQ game in childhood that involved spotting differences in two similar-looking images. The basic idea of the game was to consider two exactly same images and identify differences that could be spotted only on close observation. Visual testing works on very similar baselines. The idea is for a tester to match visual elements shared by the client with the application in hand to spot any abnormalities and share a constructive report for the same.

ImpactQA - Spot differences: example for visual testing

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 utilising 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 analyse 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, a functional test 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:

ImpactQA - Shopping cart

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

ImpactQA- Shopping cart

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 meanwhile 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 being 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.

ImpactQA- Shopping cart

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.

Visual Testing with ImpactQA

We at ImpactQA ensure that both the functional and user interface set up of your application is tested pixel by pixel to ensure that the end product matches with the requirements set by the client. We use various automation tools that help speed up the testing process along with increasing efficiency. Our comprehensive software testing services ensure the stability and reliability of your product well before it enters the production phase.

Schedule a call and leverage industry-standard automation testing techniques to ensure functional requirements and specifications of your software with accelerated time-to-market and better customer satisfaction.


Subscribe to our newsletter

Get the latest industry news, case studies, blogs and updates directly to your inbox

3+5 =