GUI Testing

GUI testing, full form of GUI testing Graphical User Interface. Main focus of GUI testing to test the appearance of the software instead of functional requirements.UI of application a comes first when someone browse to our application the first impression will be based on UI. If it is attractive interactive and easy to use then the visitor stay in our site for longer period. But if our applications UI is poor, miss-aligned, images are broken, buttons links are grayed out, application not conveying anything then visitors feel uncomfortable as soon as possible. UI help a lot to attract the visitors and keep visitor on site for longer period.

The Question is how to perform GUI testing and what do we need to test while performing GUI testing.the following things need to be tested while performing GUI testing.

• Page content
• Buttons
• Menus
• Icons present on page
• Pop ups
• Color
• Images   

Lets discuss each points.

PAGE CONTENT :

Page content is a content written on page.here we need to check many things like as few test cases mentioned below.

• Check the content font size is correct.
• Check the content alignment is correct.
• Check the font type/ style is proper.
• Check the position of the font is correct.
• Check the content.
• Check the for spelling mistakes/ grammatical mistakes.

You many think of what is proper size, font etc. Not need to worry. We need to check whether font size, alignment, font style etc. Are as per the Software Requirement Specialization or not. If not then mark and report that issue as a UI bug.

E.g see below attached images.

This is example of mis-aligned content. Red marked area shows mis-aligned 

Below image is the correct version of above image. Above image should be as show below.

BUTTONS :

Buttons are integral part of any application, it should look good and should placed at right position.it should have proper tool tips to guild the user and content written on it should be correct. Few test cases for buttons are mentioned below.

• Check button position is proper.
• Check button color is proper.
• Check content written on button is proper.
• Check button size is proper.
• Check all button have same style.
• Check all button show meaningful tool tips
• Check content written on button is proper.
• Check the font and font style of a content written on button is proper.

 You can make more test cases bases on SRS. See the image.

The left is shows proper alignment of button but the alignment of button is wrong on right image.

Icons present on page :

Icons make application look good if used properly. If not it may spoil your whole application see the images you will get the idea. See below images if it used properly then it will look great and attractive on site.

But if it does not used properly it will spoil the page. See the same image but with little issues.

Compare both images you will notice the huge difference.

To test icons we need to check:

• Check the icon position is proper.
• Check all icon have same height.
• Check all icon have correct images.
• Check all the icon have correct color.
• Check all the icons are clickable.
• if site is responsive the you may check it for different resolution also.

Pop ups and literal messages : 

To make attractive application pop up are necessary. And if you don’t know what is literal message then literal means alert messages, confirmation messages.

• Check all the alert message are correct.
• Check position of alert messages.
• Check success alert message is in green color.
• Check warning message is in red color.
• Check alerts messages are going automatically after the specified period.
• Check alert messages are having option to dismiss it.

You may check many things here also based on requirements.

See below images: these is the literal message.

Color :

Color combination used in application also plays an important role. If it combined properly then application looks good if not used properly then it make a mess. Check few test cases written below to check:

• Check the color are correct.
• Check the link color is blue.
• Check the text box color.
• Check background color is correct.
• Check content color.
• Check buttons color is correct.

These are few.

Images:

Images are also an important part of UI. Below are few test cases to check images.

• Check images are correct.
• Check images height and width.
• Check images pixel.
• Check images are visible.
• Check images positions are proper.
• Check images loads quickly or in specified time.

You may write many more, these are just a samples.

I hope this article help you to perform UI testing.

<< PREVIOUS || NEXT >>