User interface testing is more important than ever before thanks to a global uptake in websites and applications, and the trend of hyperautomation (coined by Gartner to state that everything that can be automated will be automated). If you’re rolling out a new piece of software or web page, it is crucial that you get the user interface (UI) right to balance functionality and aesthetics.
There’s a lot that goes into creating a compelling UI, with UI testing acting as a litmus test to determine whether or not the interface hits all of the marks.
In this article, we’re going to go over all of the key areas related to UI testing, from defining what a UI is to the best ways to test your UI.
UI vs. GUI: Clearing up the confusion
To start off, let’s try to clear up any confusion surrounding the terms UI and GUI. Below is a breakdown of what these two terms mean and where they differ:
1. What is user interface testing?
The user interface, or UI, is the platform you use to interact with a certain piece of software. The UI is the place where you might enter instructions, input data or view information from a screen or monitor.
There are many different types of UI, including graphical user interfaces (GUI) and command-line interfaces that just show code and text.
2. What is a graphical user interface (GUI)?
The graphical user interface (GUI) is a type of UI that most people are familiar with. It is a type of interface that uses visuals to help us interact with features in the system.
For example, you might use menus or toolbars that include icons to help you navigate through a system. Even text works well in GUIs as a way to guide the user through a function, such as clicking ‘file’ when you want to open or save a document.
3. UI vs. GUI
To help you better understand these two forms of computer interaction, take a look at the direct comparison between UI vs. GUI below:
UI:
• An abbreviation of user interface
• It is a type of platform that allows users to interact with devices
• It is a form of human-machine interaction
• It is used by everyone and often works in the background, so you don’t know you’re using it
• Common examples include MS-DOS or Unix
GUI:
• An abbreviation of graphical user interface
• It is a type of platform that uses graphics to help users navigate the functions of a device
• It is a subclass of UI
• It is typically used by average, everyday users such as consumers
• Common examples include Windows 10, iOS and Android
What is User Interface (UI) Testing?
User interface (UI) testing, sometimes known as GUI testing depending on the context, is a series of actions used to measure the performance and overall functionality of an application’s visual elements. It looks to verify and validate various functions of the UI and ensures there aren’t any unexpected outcomes, defects or bugs.
UI testing using tools like ZAPTEST is primarily used to check things like usability, functionality and performance of the UI to make sure that it is fit for purpose.
In some cases, it also checks for things like compliance or visual unity with the overall design concepts of the system.
When & Why do you need User Interface tests?
UI testing is usually most effective prior to the release of the application for production. This is to ensure the end-user has the best experience, with as few bugs and defects as possible.
End users don’t make the best software testers, so ironing out any issues before it reaches them is important.
UI testing is a useful way to assess how the application deals with certain actions, like using a keyboard and mouse to interact with menus. It helps check the visual elements of the application to ensure they’re displayed correctly.
UI testing is also a great way to gauge performance and make sure there aren’t any bugs or problems with the functionality of the application.
Types of UI tests
There are a variety of different UI tests to consider depending on the application being tested.
UI tests have the potential to verify many functions across applications, so choosing the right test type can help identify specific issues.
In other words, there are different UI testing methods to consider, and tools like ZAPTEST’s RPA software and automated UI testing tools, depending on what you intend to test for.
Some of the most common functional and non-functional testing approaching methodologies include the following:
1. Regression testing
Regression testing is a type of UI testing that looks at any changes to the coding of the application or website.
It ensures that all of the functionality of the application is as intended after making changes to parts of the code.
It doesn’t need to do any fancy tests, it just runs the code to make sure all of the dependencies and functions work the same way as they did before changes were made.
2. Functional testing
Functional testing looks to validate the application to make sure that it meets all of the functional requirements.
It tests all of the individual functions of the application then verifies the result to make sure it runs as expected.
This type of UI testing usually focuses on black box testing, which doesn’t look at any of the source code. Functional testing tends to check on things like the user interface, any associated APIs, client and server communication or security.
3. Acceptance testing
Acceptance testing, sometimes known as User Acceptance Testing (UAT) is a form of UI testing that is performed by the end user of the application to verify the system before transitioning to production.
This type of UI testing is most often found in the final phases of testing once the other areas have been verified.
Acceptance testing is used to validate the overall flow of the application from start to finish. It doesn’t look into surface-level issues like spelling mistakes or aesthetic issues. It uses a separate testing environment to mimic the production environment, ensuring it is ready to move on to the next phase.
4. Unit testing
Unit testing looks to inspect individual components of an application to validate that it works as intended.
It is usually performed during the coding phase, so it typically falls on developers and their UI testing tools to perform this type of UI test.
Unit testing works by separating a piece of code to make sure that it works as expected. This individual piece of code might be a specific module, a function, an object or any other individual part of the application.
5. Performance testing
Performance testing and load tests look to assess the optimisation of the application, looking into things like the speed, stability, responsiveness and scalability of the application when in use.
This type of UI testing aims to find any areas of concern in the application or bottlenecks in the data flow. The three main areas performance testing tools look at are speed, scalability and stability of the application.
6. GUI testing
GUI testing tools look to inspect the graphical user interface of an application to make sure that all of the functionality works as expected.
This includes looking at the graphical assets and controls of the application, such as buttons, toolbars and icons. The GUI is what the end user interacts with and sees when using an application.
What are the benefits of UI testing?
There are a number of benefits associated with UI testing and using tools like ZAPTEST’s UI testing suite, both for the developer and the end user.
Below are some of the key benefits associated with UI testing:
1. It improves functionality
It is important to test applications to ensure they work as expected, so that if there are any glitches, bugs or other issues they can be addressed before release.
If an application makes its way to end users and it is buggy, full of errors or broken then it won’t do the job that’s expected of it. This, in turn, creates too many problems for end users and they are likely to stop using it.
2. It makes it easier to use
UI testing automation tools are also a helpful way to optimise and streamline the application.
Even if all of the coding works as it should, a poorly designed interface can confuse end users and quickly turn them off, dropping the adoption rates of the application. UI testing is a great way to iron out any of the elements or design choices so that it is easier to use.
3. It strengthens the reputation of the application
Taking the time to properly perform UI testing and bringing in tools like ZAPTEST’s testing automation software are great ways to polish the application and make it as user-friendly as possible.
When done correctly, it makes the application a great brand ambassador, which boosts its overall reputation of it. If the application runs bug-free and does all that it is supposed to do, then users will appreciate this and use the application.
What are the main challenges of UI testing?
Although UI testing is an important part of application development, it isn’t necessarily an easy part of the process.
There are a number of issues and challenges associated with free UI test automation software that makes it a difficult job.
Below are some of the main challenges associated with UI testing when using inadequate UI test tools:
1. UI updates
Application development is typically an iterative process that brings in new features and functions throughout the development cycle and beyond.
All of these sporadic changes can make it quite difficult to effectively perform UI tests as other dependencies and code interactions change what is being tested.
2. Testing that grows in complexity
Applications and websites are much more sophisticated now than even a few years ago. With all of this additional functionality, UI testing tools and UI automation software have to look into more elements and processes.
As a result, many of the tools in UI testing have to be adjusted to accommodate all of these complex additions.
3. Time constraints
As applications grow in complexity, so too do the tools used for testing. UI testing scripts are becoming much more time-consuming due to the sheer volume of code that has to be tested. This problem is compounded when the right UI testing tools aren’t available.
4. Keeping UI scripts up to date
As the user interface changes and new functionality is brought in, test scripts have to be adjusted to test the new processes. This becomes more challenging with every new addition, as test scripts are constantly being updated and tweaked to accommodate the new functionality.
Should you automate UI testing?
When it comes to deciding on the best approach to mobile application or web UI testing, there are two different paths to consider – manual testing or automated UI testing using automated tools. Both manual testing and UI automation have their own benefits and drawbacks, so it is wise to consider both to see which one best suits the application.
What is Manual UI Testing?
Manual testing, unlike UI automation, involves using a tester to manually interact with and inspect all features found in an application or website.
Their primary purpose is to look out for any issues, irregularities or problems in the overall application. This is a particularly useful option for smaller applications with limited elements, such as those found on early versions of applications.
1. Benefits of UI Manual Testing
There are many benefits of opting to choose UI manual testing, depending on the application and its design.
Below are some of the benefits associated with UI manual testing:
• Manual UI testing incorporates human intelligence into testing to look for errors or issues. There are things that automated UI testing simply can’t accomplish and it takes human interaction, critical thinking and the human element to find all application deficiencies.
• Automated tests can be quite time-consuming, as they recreate multiple scenarios for different features which have to be verified by a human tester. Manual UI testing lets human testers focus on finding faults rather than setting up emulations.
• Human testers tend to have intimate knowledge of the application, often spending countless hours getting used to the interface. It is because of this that they understand what to look out for in terms of errors while helping them stay updated about the current state of the application.
• There are issues that might not be flagged by automated UI testing as it doesn’t impact the code. Things like server response times might be lagging, but they could be easily overlooked by an automated test. Manual UI testing removes this issue because the human user notices these issues immediately.
• Manual UI testing is the most accurate emulation of the user experience, as you are setting up a situation that mirrors how the end user will interact with the application. This creates a real-world context to find issues that are commonly found by end users, but perhaps missed by automated UI testing.
2. Limitations of manual UI testing
There are also limitations to manual UI testing that should be considered before making a decision on the best testing approach for your application.
Some of the limitations of manual UI tests include the following:
• It takes much longer to perform manual testing than automated UI testing, particularly when using modern tools like hyperautomation. Scripts for automated testing can run much faster than any type of human input, so opting for manual web UI testing adds additional hours to the schedule.
• As it is ultimately a human process, manual web UI testing is prone to human error. Missed bugs due to a lack of focus or a distraction can happen with manual UI testing, which may lead to problems. Comparatively, automated UI testing removes the human element from the process, making it much less prone to these types of issues. This is particularly true for the latest types of UI automated testing, such as robotic process automation.
• The actual process of logging any found errors takes a lot longer, which can make it difficult to track any changes as they are made. Automated UI testing is a better approach here as it only requires an update if a new feature is implemented.
• Manual UI testing requires intimate knowledge of the application to competently test for issues. As a result of this, there’s a certain level of knowledge required by human testers before they can effectively test. Automated testing and RPA doesn’t require this level of knowledge.
3. Record & replay testing
Record & replay testing is a form of codeless UI testing that allows you to run tests without any deep programming knowledge. It uses functionality and often computer vision technology to record manual actions performed in the application before saving it as a test pattern.
This allows the UI test to be run over and over again with no human involvement.
4. Manual vs. record & replay vs. automation testing
When deciding between these three types of UI testing, it is important to consider the scope and scale of the application and the available resources.
Manual UI testing is the easiest to set up and use, but it has a lot of requirements such as good tester knowledge of the application. It is also difficult to continue manual UI testing if you’re constantly updating an application.
UI test automation tools like those offered by ZAPTEST are a great option if you’re going to be performing regular updates on the application, and in time it does pay off as they embrace agility principles.
Record & replay comes into play to bridge the gap between the two types of UI testing. It offers a basic level of UI automation but still requires human input to set it off.
What do you test when carrying out UI tests?
What you test for when carrying out UI tests using tools such as ZAPTEST’s UI testing software is going to vary depending on what the application contains.
It tends to follow the functionality of the application though. For example, if the application has a checkout page, UI testing would include things like testing the ‘buy now’ button.
Although the actual processes to test for vary from application to application, there are a number of general UI things to test, such as:
1. Errors in data types
This UI test ensures the right type of data works in appropriate fields. For example, text for names with no option to use numbers. If the UI tester can input numerical values under the name field, then something is wrong.
2. Field width issues
This is used to limit the character count for certain fields, such as postal codes. If the application doesn’t limit the character counts of these fields, it could result in invalid inputs from the end user.
3. Buttons
These UI tests make sure that buttons function correctly, so for example a next page button directs the end user to the next page. There are lots of different button types with different purposes, so it is important that they do the job they’re supposed to in order to create a functional application.
4.Table scrolling
If there are any tables with data present in the application, table scrolling ensures that you can scroll through data while keeping the headers visible.
If this isn’t working, it makes the data confusing for the end user.
5. Error logs
In the event of an application crash or error, it is important to test the error logs to make sure they provide accurate output for bug reports.
Without accurate bug reporting and error logs, there’s no good way to determine what’s causing the problem or how to fix it.
How do you carry out a UI (GUI) Test?
To give you a good idea of how to carry out a UI – or GUI – test, we’ll create an example for you to look at.
Let’s say we’re going to test a form page in an application for registering an account. There are multiple UI elements to test for on this page, which are labelled TC-X (where TC stands for test case and the X denotes the element number).
Below is a list of the available TC’s to test for:
TC-1: Brand logo at the top of the screen
• This should be tested to check that it displays the right position, font type and page label.
TC-2: Register your account
• This should test that the page header is accurate.
• It should also check that the correct font is displayed.
TC-3: First name field
• This should test for the right text box alignment and position.
• It should also test the field labels and check that it accepts valid and refuses invalid entries.
TC-4: Surname field
• This should test for the right text box alignment and position.
• It should also test the field labels and check that it accepts valid and refuses invalid entries.
TC-5: Username field
• This should test what error message is displayed when inputting restricted characters.
• It should also check that the error message is valid and accurate.
TC-6: Password field
• This should test the field labels to make sure it accepts valid characters and rejects invalid ones.
• It should also test the alignment and position of the text box.
TC-7: Next page button
• This should test that the form submission works as intended.
• It should also inspect the button positioning and make sure it is readable to the user.
UI Test Plan – What is it?
A UI test plan is a document that is a part of the testing process for applications.
The UI test plan breaks down key information about the application and any testing activities associated with it.
Creating a test plan is normally one of the first steps you take when testing applications, as it lays the groundwork for the testing methodologies and intended outcomes.
It is a useful document that gives those outside of the testing team a better idea of what is going on in the process. Every serious TCOE (Testing Center of Excellence) will have one.
How to write a UI test plan
UI test plans offer excellent guidance and instruction for UI testers, so getting it right really helps with testing and inspecting applications.
Take a look at the steps below to learn how to write a UI test plan:
1. Include key information about for the UI testing
A UI test plan includes all of the key information required to carry out testing for an application. Some of this information includes the following:
• The professionals required for testing, their roles and skills.
• The total amount of time required to test the application.
• The testing techniques being applied to the test, and test data management processes.
• Any resources required for testing, such as specific hardware, documentation or tools.
• A breakdown of the target test environments, such as mobile devices, a specific operating system or browsers.
• The overall goals of the testing process.
2. Smoke testing
Next, you can use smoke testing to help create a UI test plan. Smoke testing is a useful way to identify basic issues and bugs in the application, but it doesn’t look too deeply for problems.
It is a technique that’s best suited for UI testing the upper layer of the application, so it can catch glaring issues quite easily.
3. Sanity testing
To dig deeper into the application to find less apparent bugs and faults, sanity testing is a great technique to roll out for UI testing.
Sanity testing looks to inspect any new or changed coding to verify that it aligns with the application requirements.
It differs from smoke testing by being much more comprehensive with UI testing, which allows for a deeper look into the functionality of the application.
After an application passes a smoke test, the sanity test adds an extra level of inspection.
UI Test Scenarios
To ensure the application runs as intended across multiple areas and interactions, it is important to perform various UI test scenarios.
Below is a breakdown of what UI test scenarios are, with an example.
1. What are UI test scenarios?
A UI test scenario is a way to establish documentation for multiple use cases in an application.
A UI test scenario is used to describe the specific actions that a user may take while using the application.
In some cases, it also describes a scenario that a user might experience while using the application.
UI test scenarios are useful as they verify that functionality within an application works as expected. It takes an intimate understanding of the application, and input from clients and developers, to generate useful scenarios.
2. Example of UI Test Scenarios
As an example, consider a testing scenario for the login page of an application. A UI test scenario for this will seek to answer the following questions:
• Can users log in to the platform using the correct credentials?
• What is the result of using incorrect credentials to log in?
• What happens when you use a valid username, but an invalid password?
• What happens when you leave the fields blank and try to log in?
• If there is a ‘forgot password’ button, what happens when you click it?
• Do all of the links on the page work as intended?
Answering these questions helps UI testers identify any areas of the application that aren’t working as they should.
It also checks that all of the available actions provide an expected result, such as logging in using the right credentials.
UI Test Cases
To look at individual aspects of a UI testing scenario, test cases are used to break down individual features of pieces of functionality in an application.
Below is a summary of what UI test cases are with examples.
1. What are UI Test Cases?
A UI test case is a series of actions that are performed to verify a specific feature or piece of functionality within an application.
UI test cases break down test steps, data, precondition and postcondition for specific scenarios and they check requirements too.
An UI test case tends to include very specific variables to allow for in-depth testing on a singular level. UI Testers then compare the actual results with the expected result to ensure that the application is functioning to requirements.
2. Examples of UI & GUI Test Cases
To help you better understand UI and GUI test cases, take a look at the examples below which are test cases for the test scenario that looks at the functionality of a login screen:
• Check the behaviour of the system when inputting valid credentials.
• Check the behaviour of the system when an invalid email but a valid password is used.
• Check the behaviour of the system when a valid email but an invalid password is used.
• Check the behaviour of the system when an invalid email and password are used.
• Check the behaviour of the system when the fields are left blank.
• Check the ‘forgot password’ link to see if it behaves as expected.
• Check the behaviour of the system when the ‘keep me signed in’ button is checked.
• Check the behaviour of the system when an invalid phone number is input.
So, all of these examples are individual UI test cases.
Unlike the testing scenario, which covers the entire process, test cases look at the individual functions. In other words, each example above is a UI test case, with the entire list being classed as a testing scenario.
UI Test Scripts
To get an even more detailed breakdown of application testing, UI test scripts are created to give more information to testers about test cases and scenarios.
Below is a summary of what UI test scripts are and how to write them.
1. What are UI Test Scripts?
UI test scripts are highly detailed descriptions of tests being performed on an application, usually in a line-by-line fashion.
They are very specific in nature with lots of detail in terms of the test cases used, data and expected functionality of the application.
Any results from test cases are also included in test scripts to add to the richness of information.
2. How to write UI Test scripts
UI test scripts are straightforward as it simply details the test cases.
As long as you include the following information in them, you should be able to get lots of value out of your UI test scripts:
• Test script ID: This is the unique identifier for the test script.
• Title: The title of the test script.
• Test case ID: This is the ID of the test case that you’re creating a script for.
• Requirements: These are the specifications of the application of hardware necessary to run the test cases.
• Procedure: These are the steps taken to move forward with the testing.
• Result: This is the output and final result of the testing.
• Status: This is an indication of the success of the test script – did it pass or fail?
• Error code: If a problem occurred, the error code details what the issue was.
Checklist for your UI tests
Now that you’re ready to get started with UI testing, use the checklist below to create your own tests:
1. Check basic functionality
Functional testing is a great way to find things like visual bugs or glitches on the platform.
Be sure to include things like biometrics, any messages and application memory information at this stage.
2. Check cross-platform compatibility
To avoid issues like device fragmentation that blocks certain users from the application, it is helpful to perform cross-platform compatibility checks.
This includes checking the application across different screen resolutions.
It is a good idea to look into both native and hybrid application compatibility on mobile devices such as Android and iOS.
3. Check compatibility across different screen sizes
There are many different screen sizes that end users might try to use with the application, so it is important to test UI for those.
UI responsiveness testing is best implemented on the most recent devices to address potential issues. Also, remember to test in both landscape and portrait mode.
4. Check performance and scalability
When an application has scalability, it is able to deliver excellent performance across different platforms.
Test different load levels, traffic and other end-user scenarios to assess the performance and scalability of the application.
This can be done using parallel testing, which uses automated UI testing like robotic process automation across multiple environments.
5. Check application accessibility
Accessibility testing ensures that specific features geared towards helping end users work as expected. Look to check things like font size, screen reader mode and zooming options here.
6. Check colours and text
Applications should display colours in a specific way, so it is important to verify this by testing colour schemes.
This includes things like the colour of a hyperlink or other font types. It is also useful to check the text for issues in spelling, font size and alignment.
7. Assess navigation speed
Make sure to test that the application’s UI runs smoothly, without any glitches. Things like the loading screen for headers are a good place to look for lag.
