What is visual testing for your mobile app?

If you’ve already created a mobile app, then you or your team have at least some experience testing it for usability and functionality. At the bare minimum, you or your engineer ran scripts to check for bugs or blatant errors in your code.

But all too often, the buck stops there.

As a consumer, you’ve likely used an app that technically carried out its intended function but had a terrible user interface (UI). Perhaps you couldn’t find a button to move to the next page, images covered text, or form fields overlapped. You could use the app but the experience was subpar.

Visual testing is designed to prevent these types of errors with a goal of ensuring a pleasant and functional UI.

A few weeks ago, Square’s Android team shared that they look at quality assurance testing with lots of layers. Visual testing is just one layer we explore below.

What visual testing is and is not

Much like your other tests, visual testing is designed to catch bugs. Visual tests are different in that they focus specifically on visual components. They ensure things like buttons, text, images, etc. are the correct color, shape, size, and in the proper position. They also look for broken images, overlapping pieces that shouldn’t overlap, translations breaking the UI, etc.

Visual testing reviews responsive content at various screen sizes to ensure changes made on one screen won’t break in the next—that your app is responsive across mobile phones and tablets.

Visual testing becomes increasingly important with the more changes you make to your app. With every little tweak, more room for error (or side effects) is created within your UI. Although functional tests will check the usability of each of these components, they won’t test for their placement or physical appearance on the screen. Functional tests won’t tell you if everything looks nice.  

Visual testing vs. functional testing

While visual testing confirms whether or not the visual components of your app are placed the way they’re supposed to be, functional tests examine the usability of these items. For example, a visual test will ensure a button is in its proper place, and a functional test will ensure that button works and leads the user where they’re intended to go.

Taking another example, a passing functional test confirms if a form works properly—that each box allows for enough characters without breaking, every field is present, and users can submit their form without error. Whereas a passing visual test confirms that the field boxes don’t overlap, the entire form is displayed, and the submit button is in its proper place.

How visual testing works

Essentially, when a developer creates a functional and visual test, they write code that simulates real user actions. Examples include clicking a button or swiping to the next screen.

At relevant points in the user flow, you take a screenshot of what the screen looks like when a user takes a specific action. The scripted test uses the screenshots from the first test-run as a baseline to compare against a screenshot taken of that same screen or function with every change made to the code.

When a change is detected (i.e. someone has made a change to the code), another screenshot image is captured. The test then compares this image to the baseline screenshot to identify any visual changes, subtle or obvious. If differences are detected, the test fails.

When all the code has been tested, a report is automatically generated. Most automated testing tools will highlight any changes detected between the tests. The developer reviews all the new screenshots against the baseline and develops a hypothesis of what caused the difference.

If they think it was a bug, they’ll fix it then re-run the same tests. If the difference was caused by an intended change in the UI (i.e. you swapped out one screen for another), they’ll rewrite the test with a new baseline screenshot to compare against.

As you may have guessed, this process is a tedious one. Especially because maintaining these tests is crucial and just as time-consuming as setting them up. That’s why software companies have created automated visual testing” tools to manage and automate the visual testing process for you. Find how you can save yourself time and frustration with these tools below.

How to automate visual testing for your mobile app

There are dozens of tools available for automating your visual tests. Popular ones include Applitools, DPXDT, and Percy.

If you’re looking for a 360-view of how your mobile app is functioning and displaying to users, give Waldo a try. We’re an all-in-one mobile app QA tool. Waldo tests the functionality and visual components of your app without needing SDKs or any scripts coded.

Record your app’s flow on your browser by uploading your app file (.ipa/.apk) and you’re ready to go. Anyone can do it! Also, there are no limits to how many tests you run or time spent on manual QA.  

‍