The What and How of GUI Testing
Graphical User Interface (GUI) is the most crucial part of any application which makes the application stand out from the million of similar apps. A well-designed interface allows the user to easily interact with the device and run tasks smoothly. It also allows a user to interact with the technologies using images rather than text.
Outlined blow are few elements that are used for interaction between a user and an application.
Validating the above-mentioned elements is known as GUI Testing.
What is GUI Testing?
GUI Testing is the process of testing the Graphical User Interface of the system/application. It involves testing of screens with various types of controls like menus, buttons, icons, and different types of bars including toolbar, menu bar, dialog boxes etc.
It is the actually the design which is visible to a user.For example, if you open
For example, if you open www.tothenew.com, the first thing that a user see is the homepage/design. No user goes to check out the source code which runs at the backend. And as per user perspective, the focus is on the design structure, images, links, logo and whether if all of these are working well or not.All this brings the clarity on
The look and feel of the application enable the users to further navigate the website and interact with the other web pages. In today’s highly competitive world, GUI is a matter of concern and a thorough testing is needed to make sure that the app is free of GUI bugs.
Key Consideration for GUI Testing
Some key considerations need to be kept in mind while testing the application/system for its effectiveness which includes visibility, accessibility, and compatibility.
A proper checklist should be maintained for detailed GUI testing:
- The GUI elements – it is important to check for the size, position, width, length and acceptance of characters or numbers. For instance, a user must be able to provide inputs in the input fields etc.
- Error Messages / Warning Messages – check if the error message is correctly written and is understandable.
- Clear demarcation of different sections on the screen.
- Font used in an application is readable or not.
- If the alignment of a text or image is proper according to the web page.
- Font color is aesthetically pleasing.
- If the images are clear and visible and are not pixelated.
- If the positioning of GUI elements for different screen resolution.
GUI Testing Approaches:
1. Manual Based Testing:
Under this approach, the screens of the application are checked manually by testers. They are being confirmed with the requirements that are stated in the business requirements. The UI is also matched with the designs that are provided during the documentation phase of the application.
For example, if a tester has to test the calculator app with this approach then, he will add 2 numbers manually on it and will view the UI of the app and look for the minute alignments, borders and other things in it.
2. Automation Based Testing:
The GUI testing can be performed even with the automation approach. This is performed in 2 steps i.e, record and play.
While doing this, the steps are captured/recorded with the help of the automation tool while performing the first round of testing. And during playback, that recorded steps script is run when the application is under test.
If the position of any button or image changes that during the playback, it does not get tracked and the test fails.
One of the tool, which is used to perform this record and playback feature is QTP.
Tools commonly used for GUI Testing:
- UI Automator
This is a tool that helps in getting the actual location/name and other information of any GUI element while writing an automation test script.
For example, if u want to write an automation test script for sign up flow, then how will you identify in the test script about which text box has to be used for name, email, password and other elements.
It is the UI automation tool that helps you to get the complete details of a particular text box, button, checkbox etc. Now all these properties of the elements will help you to identify the elements and complete your script. - Perfect Pixel
This is a sort of Plugin that matches the complete screens view with the designs provided.
For example: When you open your webpage feel like there is some minute difference in the spacing, text size or placement of the blocks, then you can use this tool to help you get the result.
Just follow these steps:
a) Open the tool/plugin
b) Add the design image of the page you want to test.
c) The image will appear as an overlay on your webpage.
d) Now, you can manage the opacity of the design as per your choice with the help of scroll provided on the tool.
e) In order to collapse/minimize the tool, just double click on the tool logo. And to hide the design overlay, click on the eye icon.
This is the easiest tool to work upon if you don’t have the knowledge of Photoshop for testing the pixels. - Toggle Device Toolbar
This toolbar is the one that every tester might have used. If not, then start using it. It is very useful and awesome tool in terms of its working.
Sometimes, there is a situation when every screen size device is not available for testing, in that case, we have a browser functionality which manages the virtual view of the devices. When you inspect any element on your webpage on the browser, you will find a toggle device in the toolbar (left top corner in Chrome, right top corner in Firefox). Clicking on it will redirect your webpage to the default selected device screen view.
You can add more virtual devices in this toggle as per your choice.
Note: It might give 100% accurate result for screen size and supplied user agent but for rendering engine (means the code, a browser uses to interpret HTML/CSS and create the UI), you will have to use the real device.
Challenges in GUI Testing
It is well known that during development and initial phases of application testing, the GUI changes very frequently. So during the regression testing, it becomes very difficult to test and identify if appearing GUI is an issue or an enhancement. And this problem can be overcome by keeping a proper track of the documents regarding any of the changes (minor or major) in GUI testing.
Conclusion
Quality of the application completely depends on the look and feel and its interaction ability with the user along with its feature. GUI Testing can be tedious but it is important for the success of the product/application. Focusing on GUI testing will help an organization to deliver high-quality application faster.
Note: (Image soource:
