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 customer

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:

Functionality testing

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.

UI Testing

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.

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:

1. Availability of various components in a UI
2. Various states of the UI component

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.

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:

1. Unfilled State
2. Filled State and On Focus
3. Normal State and Default State
4. Hover State
5. Disabled State
6. Masked State

Unfilled 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.

Filled State:

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

Normal State:

The display of a component with the value already entered by the user in the screen is described the normal state.

Default State:

A component which displays auto-populated value from the server/backend. This value can also be edited by the user in some scenarios.

Hover State:

Mouse hover over the component highlights the component indicating the hover action.

Before Hover:

On Hover:

Disabled State:

The component is disabled and the user cannot edit the fields.

Enabled State

Disabled State

Masked State:

Sensitive data like the password can be hidden using this component.

The key USABILITY testing requirements of the web application are:

1. Font family
2. Font Size
3. Color
4. Letter spacing
5. Line height
6. Background validation
7. Fill/Opacity
8. Measurements of the components like length, breadth, and width
9. 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

Name	Usage Details	Compatibility
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
Fire Bug	Firebug is an open source add on for monitoring the web page’s CSS, HTML, DOM, XHR and JavaScript. This is an alternative of inspect element, compatible to Firefox.	Firefox
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
• Colorzilla

GUI Testing Tools

Several tools are available in the technology world that would help testers in UI testing. Below are the names of some of them.

• Selenium
• HP Unified Functional Testing
• Cucumber
• Coded UI
• Sahi

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

Conclusion

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.