UI Testing: A Comprehensive Guide

User interface testing is arguably the most impactful type of testing, certainly so for B2C companies. It’s the UI that your customers interact with to pay you some money and/or paid some money to interact with. Now, how do you keep them happy?

UI Testing A Comprehensive Guide

As for definition, user interface testing indeed covers the graphic interface of software presented to customers. This is what they see when trying to get things done with your software, and they won’t truly appreciate the effort you put into a solid back-end if the UI is lagging behind. UI tests are a natural extension of the UX quality assurance done by a user acceptance testing tool

Importance of UI Testing

Testing interface ultimately comes down to preserving value or generating value. Let’s look at a couple of examples from food delivery apps. 

Glovo’s Android app infamously doesn’t handle item translation properly. Category names can be translated into the language of your interface, but item names stay in the local language. Yes, pictures are usually enough to pick your restaurant meal and even groceries. But these last-minute upsell options in the cart? The odds of getting extra money are slim when a foreigner can’t understand what product or bump in quality they are offered to add. 

Glovo Android menu translation issue

Glovo Android ingredient translation issue

Another delivery service, Wolt, requires you to swipe across the screen as the final step of making an order. This is quite a robust option to avoid accidental touches, especially when Wolt doesn’t let you cancel an order at any stage. Proper test cases for UI are pretty big in Wolt’s case: the revenue goes to 0 if the app doesn’t register the swipe gesture properly. 

Wolt slide to confirm

Companies with multiple sales channels are in an even safer position when it comes to potentially expensive QA blunders. Even if a costly mistake slipped past website UI testing, users could still buy your product or service via phone or app. Some endeavours are in the position to take this diversification to the next level: 

arrow

“You'll notice in certain images that there still exist some hardware buttons in the capsule right below the displays; this is also to ensure that in case the displays are unusable for whatever reason, the astronauts can still use hardware buttons to initiate critical actions, such as responding to a fire in the cabin.”

arrow
- Wendy Shimata, manager of the SpaceX Dragon software team

UI tests types

There are no vast groups of manual UI testing types: they simply refer to potential issues that you’re trying to prevent. It’s pretty much the same if you look at the UI automated testing side of things. 

  • Data errors: check if clients can enter the requested data in the right format and what happens if they deviate from it
  • Navigational elements: verify that users can switch between the screens and go around them correctly
  • Menu items: make sure that only relevant menu items are displayed to the user
  • Progress: validate that all lengthy actions communicate the time it would take to complete them (via timer, bar, or anything else that your UI designer picked)
  • Filters: verify that public or hidden labels are indeed used to make filters show the right items only
  • Element alignment: positioning matches what the designer intended to have
  • Error messages: user get clear error responses if they made a mistake when submitting something and/or if there is an issue with the service

Speed up your web UI testing with a Chrome extension test recorder

Try for free

Benefits of UI testing

UI testing has different goals than let’s say unit testing, so the benefits are somewhat unique as well.

  • Ensures that your designer’s vision is implemented correctly. Design in software development is after all about getting (extra) revenue from customers, not just looks. It is unfair to draw any conclusion if the engineering team did not fully implement what the designer intended
  • Preserves your solution’s value proposition. Depending on the software, UI quirks can make a huge dent in your revenue if things are not working properly. Imagine how much money a ride hailing app loses if the “confirm address” button stops working
  • Supports the regression testing effort. Should some changes to the code break existing functionality, going over existing functionality is a nice way to spot any new issues
  • Provides extra perspective. QA specialists may not have the same business goals or aesthetics in mind when going over a new build. This is good: your designer(s) will get extra feedback from people who may have more experience with the specific software niche and/or view general concepts differently

Best practices for UI testing

Here are some ideas to make your UI testing a smooth and beneficial time.

  • Get the naming convention right. Even if random names for UI tests are a smaller issue than it is for other tests, web UI automation testing needs a structure to work off. 
  • Unleash nitpicking. While some small QA issues go untouched because they are not worth the hassle, UI testing is where you can’t let that slide. If the logo is one pixel off the intended placement, your dev has to fix that.
  • Don’t brush off edge cases. It is tempting to ignore rare configurations, but they may still be relevant for your industry and/or line of software
  • Use the latest tech available. A growing trend is using a browser extension for testing website UI. Even if your company runs manual tests only, you will benefit a lot from keeping the test steps and the tested website in the same browser tab. This is how our Chrome extension speeds up manual UI testing by 42%.

How not to name your test cases

Steps of user interface testing

UI testing follows general QA fundamentals of creating test cases, running them, and reporting spotted defects with some documentation. Instead, let’s talk about three primary UI testing techniques, from simple to the most complex one.

Manual testing

Manual testing implies hand execution of all the test cases. You will usually have a bug reporting tool to store bugs and report defects, but all inputs will be done manually. This is the easiest path but also quite time-consuming.

Record-and-playback

Record-and-playback testing takes your manual tests to a scale beyond what one QA tester and even the entire team can do manually. An automation tool automatically walks through different parts of your software, records all steps, and automatically verifies whether these tests yielded the expected outcome. The implementation effort is well worth the extra time and money that you save compared to manual testing.

Model-based testing

The model-based testing actually adds a layer of abstraction to UI testing. Your engineers will be making a simplified version of your solution to generate test cases that target it. This approach works best for digging into fundamentals of how the UI functions rather than user-facing bits.

Steps of UI Testing

Conclusion

UI testing is very important for preserving and increasing the revenue of your business. Advanced user interface testing techniques add complexity early but ultimately give you a much easier and cheaper QA workflow. Good UI testing also makes your product better through extra insight into how users interact with the software.

Make your UI pixel-perfect with aqua ALM

Try free for 30 days
Related Articles

Are you struggling to make your QA match the pace and workflows of your development?…

photo
Denis Matusovskiy
15 mins read

In the fast-paced age we live in, slow or crumbling websites and applications often mean…

photo
Denis Matusovskiy
9 mins read

In modern business, 91% of companies with 10 or more employees use Customer Relationship Management…

photo
Kirill Chabanov
7 mins read