UI Testing: top QA tools and practical checklist

Typically, Quality Assurance and testing have been associated with testing the functionality of an application, but it is equally important to ensure that applications match the design provided and meet the client’s expectations. 

The first thing that users notice when they open an application is its appearance. They will always begin with exploring its design, senses, as well as the ease of interaction with every element on the page. Who would be interested in a product that has a homepage section overlapping or has spelling mistakes in the content? If the interface doesn’t look good and the user feels discomfort with it, this won’t promote the future use of your software product. 

UI testing is extremely important due to the fact that an untested interface can be a complete waste of the project budget. In order to avoid these problems, it is necessary to provide a thorough UI testing on your project.

In simple words, UI testing consists of providing two conditions:

    • How an application works with user actions performed by mouse, keyboard and other input devices

    • Whether visual elements (buttons, links, text fields, images, etc.) are displayed correctly and function as supposed.

The design of the User Interface determines not only how clients interact with the application or website, but also the level of experience they receive. Therefore, UI testing should be an integral part of QA Engineers work. 

They prevent interface failure by ensuring that all elements work together. For better results, our QA Engineers create a checklist of all possible tests to make sure that every case has been covered.

Typical UI testing checklist encompasses the following activities:

    1. Check font (font type and font size)

    2. Check for consistency (colors and visual elements)

    3. Check behavior of interactive elements (do the buttons, clicks, hovers, drag-and-drops, etc. work as intended?)

    4. Check spaces (paddings, borders, margins)

    5. Check page content is as per design (readable font, color, proper text alignment)

    6. Check the page in all standard resolutions (all page layouts are consistent and flawless across devices, ensuring that the UI elements adapt and are displayed correctly in  different sizes)

    7. Check layout (ensure that sections don’t overlap each other)

    8. Check images displayed are not blurry

Of course, complete testing is impossible without the use of special tools. 

There are many applications and methods to increase UI testing quality. 

Our QA Engineers recommend utilizing the following UI testing tools:

    1. PixelPerfect (a very useful tool by  Google Chrome that allows comparing the current version with the provided design)

    2. Dimensions (check interval between contents)

    3. Dev Tools (irreplaceable helper: colors, font (size, type), padding and many others)

    4. Color picker (allows defining the color of the item that you depend on)

    5. Light Snapshot (Quick Screen Preview)

    6. Material. Io Color Tool ( allows selecting the desired color among a large number of shades, and helps you determine the percentage ratio of the background-color combination within it)

It would be a great misconception to think that we don’t need to create test documentation for UI testing. At Axon, we utilize checklists for smoke testing and separate test cases: check and specify what to pay attention to (e.g., table: border radius 6px, pad 20px, field shadow). 

The source of comparison is in the form of sketches from the Invision application where we can test elements by using the Inspect function.

Once a mismatch is found in the user interface, the QA Engineer then creates an issue report. In this case, all corrections related to a particular page should be grouped in one release. For example: change the color of the information icon to #666, resize the text font to 14px, etc) This is due to the project plan becoming a mess, if a separate assignment is created for each correction.

What test documentation QA Engineers create on projects?

The most common problems identified in User Interface testing are:

    1. Browser bugs

If the application is tested only in the Chrome browser, this can lead to user error detection in browsers (Safari,Firefox, etc).

    2. Broken user elements

Buttons or links that don’t work.

    3. Font size mismatches

Incorrect upper/lower case, inconsistency of words/letters, spelling and grammar errors, textual errors in images - all these problems could potentially confuse end-users. 

    4. Interface errors

Poor image quality, inconsistency or incompatibility with mobile devices also remain typical interface errors.

    5. Usability errors

Users have difficulty accessing critical application functions. 

Useful Trick for UI Testing

If you need to check the color changes of the button or the link in different states - DevTools provides a great opportunity. Open the Elements tab and choose Toggle element state. Thus, it becomes possible to force different states of such elements like :active, :hover, :focus, and:visited.  

Detailed testing of the User Interface ensures that every element works and presents as they should be. Being sure that interface works right, looks good and it’s easy to use and navigate is primarily. Most users will not worry about how well your code works or how clean it is. But they’ll worry about your app's appearance. Make sure that User Interface testing is a part of your testing strategy. End-users will be grateful.