The Era of “GUI Testing”

In today’s world where users have umpteen number of choices in terms of apps or application, moving from one application to other or from one app to the other is just a click away. The first time when a user land on a page or the app, its the user experience that matters, or shall I say, the graphical user interface(GUI) i.e the UI. Any application or app is firstly governed by its UI and then its functionality when the user hits it, so testing the GUI is as important as its functionality.

So, What is GUI testing?

Graphical user interface testing is the process of testing the visual appearance of the application/app in terms of its font, colour, images and look and feel to ensure those meet the user requirements. The consistency of GUI throughout the application is of keen importance, to help user familiarize with the application across pages. The GUI components may differ in both web and mobile based applications and need to be tested accordingly due to their different way of usage and visual appearance.

So, What should one look out while testing for GUI testing?

First and foremost, before one kick-start testing the GUI components, the baseline for expected behaviour is the approved designs. Of course user requirements also plays the role but eventually, the designs are created from those requirements itself. Keeping both of them hand-in-hand can help backtrack testing more efficiently.

Apart from meeting the design requirements, it’s important to look out for the below parameters also across all applications:

  • Consistency across the type and size of font and colour.

Font type and size plays an important role in the consistency of the application. Size may differ depending upon the title, heading and body, where the font is used, but across pages, in title, heading and body the font size should be consistent. Playing too much with the font type and sizes on a single page can distract the user. Font readability is also an important parameter. So one should ensure the readability of the font type is good. As far as the usage of colour is concerned, it should be as per the theme of the application and should be eye soothing. Again too much of different colour can ruin the visual appearance and take away the main aesthetics of the application

For example, Label name in forms sometimes happens to be in different font sizes, creating inconsistency in the form look and feel. Marking labels or placeholders in different colours also creates non-uniformity across the page

Heading types

Font type and size

Few of the chrome extensions like Font Finder or What Font, helps to speed up the testing task, making it more efficient while performing UI testing.

  • Alignment of text, buttons, dropdowns, labels and images
Static pages, homepage or any content related pages across application should have aligned text(left or centre). Non align text, kills the visual look. Similarly goes out to the buttons of the application. I have come across application wherein ‘save’ button appears to be in different dimensions across pages. We may need not expect all buttons to be of similar dimensions due to the length of text inside each and hence can vary accordingly because the clarity of title on an actionable button is as important as its dimensions. Also, alignment of buttons is important across the application. If in a form we designed to keep the ‘save’ and ‘cancel’ button in the bottom of the page in the centre, the same should be expected across pages because that’s what user would start expecting. 
Similarly goes out to the labels and the images, the alignment of labels in a form should be left aligned(though not necessary, I have seen labels right-aligned, I somehow don’t like the idea of the same.). Alignment of images is a contextual term and depends majorly on the approved designs. But having said so multiple images in a single row or column should be alignment, an example is like a simple category listing page with multiple images.

         

Text and Button Alignment

Aligned Images

A perfect example of non-alignment

 

Even alignment, width and height dimensions can be tested quickly and efficiently via chrome extension tools like PageRuler 

  • The blurring, pixelation of image and image clarity

Images rule application today, be it the banner images, the images in the carousel, images in listings, promotional banner images or even the logo. It’s important we as testers, test the images from the clarity perspective. Their clarity when fit to the frame, the cropped image and the zoom view. You would have come across banner images that would have been pixelated or cropped so much that the essence of it is lost. As a user, images are the first view their eye catch on an application and maybe a bigger turn off if not presented well. Hence testing images of different dimensions is also important for there visual appearance that they provide to the end user.

  • Overlapping of text, checkboxes, radio button, labels with input fields and buttons.
Ensure overlapping of text, radio button, labels and buttons should not be there. Clarity in terms of text or GUI components is important.
Overlapping of text and checkboxes
  • Grammer and spelling mistakes
These are crucial aspects, grammatical issues and spelling mistakes can turn off a customer/client and can lead to the amateur representation of the application. Make sure you utilize all those online grammatical and spell checkers available as extensions to your application to help to test these more efficiently. My personal go-getter is grammarly 

  • Error messages/Sucess messages display, clarity and  message retainment
Error messages or success messages on user action are important from UI perspective also, as it helps to let the user know the next action steps to be taken. They should be clear as what is expected from the user and there impact. Be it warnings, alerts, error messages or success messages, they should be represented accordingly. I have seen multiple application where error messages go off in a glimpse of a second where the user is not aware off or the message does not goes off and retains there on the screen. Such user experience adds on to the non-clarity to the user.
Clear error message
Error Message

  • Drop down list and multiple select options should have wrappable text and aligned
Drop down’s and multiple select options with longer option values should be wrappable and should not overflow or be hidden. All values or text should be aligned. As a standard approach, all drop-down should have default text as ‘select’ 
Select category list for dropdown values

With intuitive web designing and multiple GUI components adding with a quick pace of time, the list of parameters to look out for can go on and on, important is to understand there visual impact on the end user and test it accordinlgy as QA’s . As I said UI testing is as crucial as the functionality of the application because that’s the first thing that user interacts with. A consistent, standard layout across pages provide the best UX(user experience) even if it does not adds to the complexity of the design. With UI testing been pushed back to be tested at the later stages, results not just in a unhappy customer but falling end users also
Closing the quotes, with John Maeda, Designer and Technologist, who beautifully summarises the importance of design nowadays 

 “Design used to be the seasoning you’d sprinkle on for taste; now it’s the flour you need at the start of the recipe.”

Author: Sadhvi Singh

Linkedin: https://www.linkedin.com/in/sadhvi-singh-86a85b65
  •  
  •  
  •  
  •  
  •  

12 Thoughts to “The Era of “GUI Testing””

  1. Prateek shrivastava

    Nice article

  2. Hey I checked both articles Risk based testing and GUI testing…Both are helpful for me…Appreciated…keep posting! 🙂

  3. Nice one mate! Much Appreciated! 🙂

  4. Amar

    Good write up and you have covered all the aspects of GUI testing. Keep writing 🙂

  5. Very Nice and usefull article.

Leave a Comment