Approaches to UI Testing

What is UI Testing?

As defined in previous articles, the User Interface (UI) is the part, side or layer of a system through which the user interacts with it, making the system effectively usable. In the case of computer systems and, concretely, web applications, the UI will consist of all the elements –buttons, menus, text fields, checkboxes, etc.– implemented which will let the user interact with and operate the web app.

If we bear in mind that the UI is what ultimately makes a system usable, then we should think in terms of usability. Usability is understood as ‘a system’s capacity to allow users to carry out their tasks safely, effectively, efficiently, and enjoyably’ [1]. In the software industry, usability will mean the level of efficiency, effectiveness and satisfaction the target consumer will experience when using a software application system to achieve the desired objectives.

Disciplines such as psychology, ergonomics and aesthetics are usually involved in the design of system interfaces in order to make them more intuitive, less error-inducing (fool-proof), more productive, more enjoyable, safer, etc., and this is no less true about web app UIs. So, in sum, what we want to test in a UI is exactly all these capacities, from the end user’s perspective, thus making the UI tests nowadays a key part of a test plan, since detecting issues at UI level –and detecting them early– contributes to a more satisfying user experience. Statistically, it is today known that optimizing UI performance improves the overall app performance up to 4 times as much as optimizing the back end.

The Practice of UI Testing

Testing a web app UI implies a special approach and a set of strategies.

When we talk about usability, we don’t only talk about the UI of an application performing well at a mere functional level. We want to produce satisfaction in the user by creating a comfortable, stimulating experience –that is, that the user keeps choosing our product. And this is sure a tricky stuff.

It’s a difficult balance to achieve sometimes, between a stable, robust and reliable back end, and a stable, intuitive and attractive UI. Budget and time constraints are often in the middle.

We must first go through the known, effective and time-tested approaches and methods:

Smoke tests will give us an immediate cue on the actual overall state of the system and if further testing can be done.

Since the visual component is key, visual testing –a method for comparing states through  screen captures which will tell us about regressions at a graphical level– will be central in our test plan.

Modern tools also offer us the possibility of recording and playing back scenarios and use case executions. Recording GUIs are a great aid in writing automated test scripts.

Then there are the automated test scripts themselves, which are a way of manually parameterizing user actions by locating elements of the application UI in order to create a real world case scenario to be iterated automatically. Results will tell us about the state and functionality of such UI elements.

Cross-browser and parallel testing will help us deal with compatibility issues at browser and platform levels, as well as testing the responsiveness of our apps.

Responsiveness testing is highly important if we plan our apps to run in several types of devices. Our app UI must respond accordingly to the platform/screen size in which it’s being viewed.

Most of these approaches –except maybe for visual testing– should be, at some level, based on a model which describes the behavior (determined inputs and expected outputs) of our system which will give us a deeper understanding of it, and let us generate better –more efficient– test cases, especially when we are to automate our tests.

There are however other approaches to testing an application UI.

Taking into account the set of practices known as information architecture, we can design other kinds of tests, like for example, User Experience (UX) and A/B tests.

User Experience testing, as the concept notes, is the process of testing the multiple aspects concerning the perceptions a user may have about our product, in order to determine the best way for our application UI and its functional/visual elements to interact with the target consumer. This will require considering the visual aspects of the UI (colors, typography, layout, icons, pictures, tabulation, etc.), in order to check for intuitiveness factors, like navigation clarity, easiness of information access, visual strain reduction, pleasant aesthetic design, among others.

A/B tests on the other hand, are a more statistical way of testing our application. Known also as split testing, in A/B testing we compare two versions of our application –being version B the one which will experience changes, and then, through statistical methods, we analyze quantifiable aspects like traffic, user actions (views, clicks, etc.) in order to come to a conclusion as to which of both versions yields a higher conversion rate –conversion is ‘the process of a potential customer becoming an actual customer’, the moment when a user responds to a call to action.

In the end, this will help us determine which of both versions performs better and which will be the most suitable candidate to be online.

Brickstones in the way

We always find ourselves with challenges along the way when performing UI tests.

Constant changes at UI level, the –inevitable– increasing complexity of our tests, the need to handle a plethora of errors, the tedious task of maintaining our tests, all without forgetting to consider the costs and ROI, are absolutely time and energy consuming activities.

This puts us in the situation to search for a better tool –or set of those– to assist us in getting our job done and meet our defined goals.

To free up our personal resources and empower us as creative workers is today more than ever, an urgent necessity.

Artificial Intelligence. An Intelligent Change

AI and Machine Learning (ML) based platforms are not the future. They are the present.

The hassle of maintaining tests has, after all these years, received an answer. Automation testing tools are constantly making use of those technological advances, integrating their application into creating more complete and ever evolving tools.

Instead of having to go through all the preparation phase, how about autonomously identifying and locating elements in a user interface? Instead of having to modify certain classes for the testware to adapt to changes in the application code, how about our tool being able to register those changes and immediately adapt the test cases, and so we get rid of many boring, time-consuming maintenance chores? It will no doubt sound good to any reasonable user.

Autify rids the maintenance inconvenience by using AI to learn the changes and adapt to them; hence, no more juggling with script maintenance, as it is based on a no code platform.

Autify’s comes packed with its Visual Testing Engine, which, by implementing a semantic segmentation model, it classifies different regions of a UI based on comparing their appearance between two screenshots of the UI. This creates meaningful representations of which can be used to parse components out and make comparisons across versions, something which makes for an absolutely intelligent visual testing. A top feature, for sure.

Apart from increasing the coverage of our automation tests, Autify will help increase the overall test coverage. By eliminating the test phase –automating tests at the initial stage of the development process, times and costs are dramatically reduced.

Autify’s powerful features include:

• A SaaS delivery model.
• A no code platform –no coding required.
• A GUI for recording and playing back test scenarios.
• Test script maintenance by AI.
• AI algorithms which learn the UI changes, adapt to them and alert the QA team.
• Cross-browser compatibility, including mobile devices.
• Visual Testing engine.
• Visual Self Healing.
• Integration with Slack, Jenkins, TestRail, etc.
• Built-in reporting –no third party tools.
• An exceptional tech customer support.

Customer support is a pillar in the set of values our company and our products have, so we procure to provide the most humane level of attention possible, considering real human beings and real human needs.

You can see our client’s success stories here: GA technologies reduced test authoring time by 95%

Autify is positioned to become the leader in Automation Testing Tools.

• We got 10M in Series A in Oct 2021, and are growing super fast.

We have different pricing options available in our plans: https://autify.com/pricing

• Small (Free Trial). Offers 400~ test runs per month, 30 days of monthly test runs on 1 workspace.
• Advance. Offers 1000~ test runs per month, 90~ days of monthly test runs on 1~ workspace.
• Enterprise. Offers Custom test runs per month, custom days of monthly test runs and 2~ workspaces.

All plans invariably offer unlimited testing of apps and number of users.

We sincerely encourage you to request for our Free Trial and our Demo for both Web and Mobile products.

1. Preece, J. (1994). Y. Rogers H., Sharp D., Benyon D., Holland S. and Carey T. Human-Computer Interaction.