Ultimate UI Testing Checklist

UI testing is a crucial part of software development that ensures the quality and usability of user interfaces. It verifies that the UI elements behave as expected and matches the design specifications. In this blog post, I will share a checklist of essential considerations for UI elements that can help you improve your test coverage, reliability, and efficiency.

Labels | Div | Para

Check for Spelling issues

Check for Grammatical issues

Check for Font Size, Color and Family

Should be left aligned

Not overlapping with any element

Page Headings and Page Text are distinguished properly

Disabled Text fields

Check for any prepopulated value

Disabled text fields should be grayed out

Disabled fields should not accept any text

Button

Default State: Enabled vs Disabled

Check Clickable and Working

Tab key and Enter key can select this button

Check with single and double click

Hovering the mouse should highlight the button

Spacebar key can click this button

Buttons across the webpage have similar font, color and shape.

Enter or Spacebar keys should select OK button in the alerts.

ESC keys should select Cancel button in the alerts.

Prompt Messages

Color of messages

Are correct error/warning/success messages displayed?

Proper field level error message should be displayed on validation failure

Disabled Text fields

Check for any prepopulated value

Disabled text fields should be grayed out

Disabled fields should not accept any text

Hyperlink

Clicking the hyperlink using mouse.

Hyperlink should take us to the correct place

No broken hyperlinks

Colors on hovering the hyperlink

Same & standard color and style across the website

Hyperlink should have the correct text

Image

Getting displayed

Good resolution images are used

Alignment

Size

Proportionate Scaling is maintained

Logo & Branding

Visible

Clear

Clickable

Text fields

Appropriate use of Textbox vs Text Area

Correct Labels are displayed for text fields

Label texts are aligned properly with text fields



Dropdown

Down arrow sign on the dropdown

Selecting the arrow sign should display the list

Default selected option in the dropdown list

Mandatory field should force to select a value

Pressing first letter key should select the top key option

Should not be empty

Scroll bar for large dropdown lists

After clicking or selecting an option,dropdown should be highlighted

Sorting order as per requirements

Checkbox

Check default states - Enabled,Disabled,Checked,Unchecked

Check tab key is able to highlight the checkbox

Check whether we can check or uncheck using Mouse,Spacebar

Disabled checkbox is not editable or selectable via tab key

Radio button

Check whether the default radio button is selected

One radio option from the group should be selected

Check selecting the radio option using mouse click

Checking Tab on the keyboard can highlight the radio button and navigate to other radio options and select using arrow keys.

Numerical Input Field

Invalid values

Valid values

Verify + and - options

Min and Max values

Min - 1 and Max + 1

Negative numbers

Zero

Decimal

General Checkpoints

Tab order should go on sequence in the page

Attractive UI

UI of the page should not look clumsy

Application should display and work correctly at reduced /different sizes

Accessible with Mouse and Keyboard

All pages and UI elements on the page should have proper color consistency

Zoomin and Zoomout