A Complete Guide to GUI Testing: User Interface Testing Tutorial
What is GUI Testing?
GUI Testing is a process of testing the application’s graphical user interface to ensure proper functionality as per the specifications. It involves checking the application components like buttons, icons, checkboxes, color, menu, windows etc.
Visual dynamics of a web application play a pivotal role in the acceptance of an application with the user.
Consequently, this acceptance yields in bringing a long time bondage of customers with the client’s application. In this era of digitization, User Interface is fast changing and holds a key fortress in attracting the new crowd of possible customers.
What You Will Learn:
User Interface Testing
To ensure visual aesthetic of web application is well accepted, UI and Usability testing become a key aspect of the overall QA practice. Any application which can be accessed through an URL is a Web-based application. In such applications, we mainly test the front end of the application which is to be used by the end user.
Each browser displays web pages differently, so it is important that page should look same on different browsers. If a webpage is displayed distorted and unmanaged then it will lead viewers to exit the webpage. So a website should undergo UI testing for better results.
Browser testing comprises of below two types:
Testing of different functions throughout the application. It involves validating all the navigations as well as all field values which are present in the front end pages using all positive as well as negative scenarios.
Testing the look and feel factor of the web page. Look and feel factor includes display type, font, alignment, radio button, checkbox etc.
- Areas covered in UI testing are Usability, Look & feel, Navigation controls/navigation bars, instructions, and technical information style, images, tables, accessibility etc.
- For testing for accessibility, we have to check with W3C-Web content accessibility guidelines.
Click here to get the W3C guideline.
Approach for UI testing
We select a subset of test cases from functional test cases which covers all functionalities of the application.
The second step is to modify those test cases according to UI testing requirements.
Next step will be executing those test cases; comparing the result with expected results, and if there is any difference then raising the issue for the same. It is not feasible to test in all browsers. Normally the client decides in which browser there is the requirement to test.
As we know each browser display web page differently, so we cannot expect all browsers to display web page exactly similar.
For example, drop-down in windows-firefox will be different that mac-firefox. Such issues are acceptable, as these are operating system utilities and we need to accept them as such.
Base Browser: Normally application is developed targeting a browser which is expected to be used mostly by end users, it is termed as the base browser.
Commonly Occurring UI Defects
- Button alignment issues
- Inconsistent space between labels or text boxes
- Broken labels i.e. single line label getting displayed in two lines
- Misalignment among text boxes, info icons, labels or dropdowns
- Overlapping of fields
- Incomplete fields
- Data on the page is misaligned; some time-shifted upwards or downwards
- In any browser, while selecting some action, the corresponding action is not happening
- Resizing not working as expected
- Session expiry time either very short or very long for some browsers
- Browser specific issues – Few fields are not editable after entering data in one browser but editable in another browser
Key UI and Usability Test Requirements
The key UI testing requirements of the web application are:
- Availability of various components in a UI
- Various states of the UI component
A component is a building block, which can be used with the combination of several other components to form an application. The Components can be reused across the application.
Examples of a component include Button, Text Field, Autosuggest, Checkbox, Dropdown etc.
Some basic components
Checkbox: One or more options can be selected from the checkbox component
Radio Buttons: When only one option needs to be selected radio buttons are useful
Some Advanced Components
1. Accordion: Multiple items can be stacked vertically using this component. Each item can be expanded to view the contents in it. More than one item can be expanded too.
2. Breadcrumbs: This is a very useful component that aids in website navigation. The user can identify his current location within the website from this component.
3. Carousel: Multiple sets of information items can be incorporated into a carousel component. Way finders at the bottom indicate more items are present. Arrows help in navigation within the carousel. Usually, carousel navigation is configured as a continuous loop.
Click here to get more useful information on UI components
States of UI components
Availability of components is purely based on the project requirement guidelines. It will vary from one project to another.
The various UI states for a basic component are:
- Unfilled State
- Filled State and On Focus
- Normal State and Default State
- Hover State
- Disabled State
- Masked State
Before keying in any value in a component, it is said to be an unfilled state. The Unfilled state displays the placeholder text if any. The below is a text field component.
A component with a value keyed in by the user is filled state.
On Focus State:
The user revisits a component which is already filled. The component should display the cursor, indicating that the specific component in being focused
The display of a component with the value already entered by the user in the screen is described the normal state.
A component which displays auto-populated value from the server/backend. This value can also be edited by the user in some scenarios.
Mouse hover over the component highlights the component indicating the hover action.
The component is disabled and the user cannot edit the fields.
Sensitive data like the password can be hidden using this component.
The key USABILITY testing requirements of the web application are:
- Font family
- Font Size
- Letter spacing
- Line height
- Background validation
- Measurements of the components like length, breadth, and width
- Location/Spacing between the components in a screen
The above Usability features can be tested in the code or using the inspect element in the application. Another easier way is to use add-ons. The Add-ons may vary based on the browser in which the application should be tested.
Details of various Browser Add-ons
|Page Ruler||This add-on assists in testing width and height of the components. The top, left, right and bottom positions of the components can also be figured out||Chrome and Firefox|
|Web Inspector||Web inspector displays the font, text color and background color of the just by clicking on the web inspector icon and hovering it over the section which is to be tested||Chrome and Safari|
|ColorZilla||It is a color picker add-on used to analyze the color of the webpage||Chrome and Firefox|
|Measure it||It is used to test the width, height and alignment of elements in pixels.||Chrome, Safari and Firefox|
Advantages of Add-Ons:
- Saves time
- Easy to use
- It is cost effective
Limitation of Add-Ons:
- Parallax error while using measuring
- Compatible across applications
- Compatible with multiple browsers
References for Add-Ons:
- Web Inspector: Apple Dev Tools
- Firebug: Firebug Wiki
- Measure IT
GUI Testing Tools
Several tools are available in the technology world that would help testers in UI testing.
- HP Unified Functional Testing
- Coded UI
A detailed list of GUI tools is available in softwaretestinghelp.com itself! Please click here.
Sample GUI Test Cases
1) Verify the working of carousel arrows and way finders
2) Verify that the password field is accepting values only in a masked state
3) Verify that the ‘save’ button remains inactive until all required fields are entered
4) Verify that the user is allowed to navigate to the top of the page using ‘Top’ bar
5) Verify that proper message is displayed when the applied filters do not retrieve any results
6) Verify the navigation from links available in Headers and footers
7) Verify the alignment of radio buttons is accurate
8) Verify that multiple options in checkboxes can be selected at a time
9) Verify that the title of each section is in bold letters
10) Verify the color change of hyperlinks on clicking
A website is the soul of many businesses. It is very necessary to make sure that it looks fine and functions similarly on different browsers & platforms. Thus UI testing is very important and it will ensure a large customer base and addition in business value.