UI Testing check list

Verify following scenarios for UI Testing

  1. Font styles - Font size, color, family
  2. CSS properties of an element
  3. Images if they are not breaking
  4. Elements are not breaking or distorted on different browsers and screen resolutions
  5. Text for labels is clearly readable
  6. Error and validation messages are displaying correctly
  7. No spelling mistakes for field labels, any headings on the web pages
  8. Links are visible and distinguished from other text
  9. Social networking icons are rightly placed on sites
  10. No broken links on the web page
  11. No unnecessary blank space between the elements on web page
  12. Horizontal and vertical scrollbars are appearing wherever necessary
  13. Site logo is visible and clickable
  14. Web elements are not overlapping anywhere on web page
  15. Privacy policy links are readable and clickable
  16. Elements in drop down are not overlapping with each other
  17. Menu or sub menu that is selected remains highlighted
  18. Country codes are displayed correctly
  19. If there are any maps on the site, check if the user is able to zoom in and zoom out the map without any UI distortion.
  20. For any reports or charts check if the figures are visible appropriately
3 Likes

Have you also considered the performance of the different web browsers in regards to Javascript performance?

I have found that poorly written applications will work correctly in Chrome but aren’t quick in other browsers due to the way the browser displays the DOM or pausing waiting for a response?

I would categorize that more of a performance test instead of UI. It should be done, but maybe it would require a different mentality?

  1. Comparability - different browsers, OS
  2. Responsive Web Design
  3. Different languages
  4. Many mobile related tests like rotation, touch screen accuracy, bright light etc.
  5. Tooltips seen well
  6. Restricted fields
  7. Tab pressing order is correct
  8. Keyboards are working when relevant, mouse when relevant.
  9. Shortcut keys
  10. Many Accessibility tests
    31, Standarts like link color
  11. When mouse are over an object that suppose to change (like when you hover a buton its color change).
1 Like