Mobile UI Testing Tutorial (GUI Testing of iOS and Android Apps)

Mobile App UI Testing Guide: Learn how to perform iOS and Android UI Testing

With the flourishing market for mobiles, testing of mobile applications has become exciting day by day.

Just by running functional tests on a mobile application you cannot sign off the app. There are few other testing types like field testing, network testing, UI testing, battery life testing etc., that needs to be done.

UI testing is one of the important tests in mobile application testing and it should not be taken lightly.

UI Testing for mobile apps

Graphical User Interface creates a lot of difference in how interesting & interactive a user finds your application. The importance of a decent and attractive GUI can be felt more significantly in smart devices environment where screen size is far smaller as compared to a laptop or desktop screen.

Mobile App UI Testing Importance

As a user will you feel like using an app that lacks user interaction and makes it difficult to understand how to use it?

When the users use a mobile application for the first time, it’s not just the performance that steals the attention but also the appealing UI. A UI friendly application sells more when compared to an app which is best developed but with a nasty UI.

If an application has a perfect and a splendid UI on one device but on the other device it is completely twisted just because it has a different size or a different OS, then it will leave a very bad impression. The commercial success of the application will be badly affected.

Will you promote an app where the button is too small to click blocking the whole set of functionality?

Annoyance

Aren’t these unpleasant experiences for the users? Due to the above-mentioned cases, it becomes very important to test the UI of an application. The two major verification that needs to be done for mobile applications is user friendliness and appearance across different models and OS versions.

Following is an Example of how the UI should be perfect across different screen sizes:

UI Variation with phone size

How to Decide on how much UI Testing is Required?

The following chart denotes the various verticals in which mobile apps can be categorized:

Mobile App Verticals

[image source]

From the above chart, you can make out that Gaming apps take the majority of the market share of about 24.43%, and then followed by business and education apps.

  • Apps developed as gaming apps need thorough testing at each and every aspect as the UI is the biggest contributor to gain success no matter if it’s a Native or Hybrid app
  • A business app may not completely rely on the UI for its success because in most cases the target audiences are trained to use the app. Hence, such apps may have a simple UI.
  • Apps developed for educational purposes need thorough UI testing.
  • Commercial apps like shopping, travel etc also need complete UI testing across devices and various OS versions.

In short, depending on the purpose of the app, the depth of UI testing can be decided but UI testing should always be done on at least 3 different OS versions.

*******************************

Recommended Tool:

#1) Experitest

Experitest makes it easy for you to verify UI responsiveness across different browser window sizes with automated visual testing. Enhance your layout testing by making sure all buttons, text, and images are in the right position, proportion, and size to eliminate visual bugs that affect functionality.

experitest new

*******************************

Guidelines: What to Test in Mobile App UI Testing

While testing UI on a mobile application, there are various characteristics that need to be verified.

Following are some of the characteristics that should be tested for every app:

#1) Screen Resolution

Following are some of the common screen resolutions that are considered while creating testbeds:

  • 640 × 480
  • 800 × 600
  • 1024 × 768
  • 1280 × 800
  • 1366 × 768
  • 1400 × 900
  • 1680 × 1050

All of these resolutions are a must for testing when you have a multi-column layout in your app.

Hence verification needs to be done starting from the smallest to the biggest resolution. Apart from this, if your app has a long list of cards with information then those also need to be tested on a different resolution for their information wrapping.

UI multi column layout

UI card travel

[image source]

#2) Screen Size

There are too many variations in screen sizes and available resolutions. In smart devices especially, controls sizes are not static, they have relation to the available screen size.

While testing, make sure that controls size looks esthetically good and control is completely visible on the screen without any scrolling. Test the GUI on different devices with different screen sizes and resolutions.

Emulators are good for this purpose but nothing matches the real device. So make sure that you test on at least two or three real devices. Also, don’t forget to test on landscape and portrait orientations if the device supports it.

You must test the application under commonly used resolutions to ensure its usability.


Few things that you must understand here are:

The difference between screen size and resolution: The screen size is the length of the screen in inches measured diagonally or from one corner to another corner of the screen. The screen resolution is the width and height, Example 640w × 480h that represents the number of pixels going across the screen multiplied by a number of pixels going down.

#3) Different UI Elements

The UI elements like buttons, headings, icons, images, selection fields, text fields, checkboxes etc., are some of the different elements that need to be verified for their appearance and size on the screen.

Specifically for text fields, if the soft keyboard shows up on tap in the text field should be tested and verified.

Most importantly thorough testing of button sizes is required because I remember in our app while testing on Galaxy S phone, we found a blocker where a button had blocked the entire app just because the button appeared too tiny to click on.

The position of the UI elements should also be verified against the requirement i.e. if all are to be center-aligned or left-aligned etc.

#4) Style: Color and Theme Scheme of the Device

The app UI and color scheme should be consistent with different colors and theme schemes of the phone. The color and theme of a Samsung phone are very different from that of Nokia or the MI phone.

Hence you need to verify if the app is looking consistent across such phones.

Definitely, your application has a specific design. And the style of the controls should match with that design. You might have seen many applications where some controls e.g. panels have round edges and other controls e.g. text boxes have sharp edges.

Although these type of issues doesn’t affect the usability or functionality of the app, still a consistent look of the application helps to build a friendly relation between the application and the user.

One of the most important thing in style is the font of the different pages. The font should be tested well in order to avoid any inconsistency in the look and feel of the application.

Most of the times, we focus the text that is visible in normal situations and ignore the text that appears in specific situations. Success and Failure messages are an example of such type of text.

Another factor which important in style is a relation between the font color and the situation in which text is displayed.

For example, Red color is used for Error messages, Green for success, Yellow for warnings and Blue for hyperlinks.

#5) Multi-touch or Single touch

If your app is supporting the multi-touch feature like pinch to zoom or pinch to shrink etc., then you need to thoroughly test this feature and create a lot of test cases for this for all the applicable screens.

#6) Long or Short Press

A long press on an icon shows the context menu while a short touch performs the very first action of the menu. If this feature is provided in your app, then you need to verify this functionality and all the functionalities around it.

#7) Location

Location and position are the two words that are used alternatively and it is interesting that they are further used to convey two different concepts that are explained below:

1) Sometimes it is the area on the screen where a control appears.

For example, Header is located on Top of the page, Labels are Left Aligned, and Text boxes are Right Aligned etc. Here, ‘top’, ‘left Aligned’ and ‘Right Aligned’ are relative positions of the controls.

2) Sometimes it is the order of control among the other controls.

For example, while getting personal info, First Name is followed by the last name. Or, the format of controls to ask for a US address should be in order– ZIP, City, State.

For both these situations, we are talking about the location of the controls.

While testing for location and position of controls, make sure that everything is logically placed on the screen and shows a good aesthetic sense.

There are situations where one or more controls appear on more than one screen. In this situation, you must make sure that they appear in the same location and in the same relative order on all the pages.

How to Test UI Variations across different OS Versions?

The UI varies with the OS version and with the launch of a new version, enhancements are made in the UI.

Let us observe the UI of the 3 latest OS that are currently available and understands how these variations affect a mobile application.

They are:

  1. Lollipop
  2. Marshmallow
  3. Nougat

UI variations

Looking at the above list of new UI or functionality features, as a QA you need to design test cases around this.

1) Lollipop:

  • Create test cases for the effect of the new design on your app.
  • Not necessarily for all the screens but create test cases for accessing the new shortcuts on your app.

2) Marshmallow:

  • If your app deals with emojis, create test cases to verify the new emojis. Apps which allow the users to write reviews or to chat are the ones which use emojis frequently.
  • When your app is published and installed for the first time, it may need to ask for permission hence the need for UI testing of the new permission screen needs to be done. And create test cases for the same.
  • If your app is using Google Now then you need to create test cases to test the updated Google Now feature’s UI.

3) Nougat:

  • Thorough testing of your app needs to be done for the daydream reality mode and hence create test cases accordingly.
  • Create test cases to verify the menu options for your app.
  • If your app deals with emojis and GIFs, then create test cases to verify the new emojis and the option to send GIFs.

Real Devices or Emulators: What to Choose for UI Testing?

When you have to test a mobile application you may think about what the test bed should be?

Whether to test on a real device or emulator or both? There’s no firm answer to this because the choice depends on what you want to test.

For testing the functionality, performance, network response, field test etc., you should always prefer a real device. But for things like UI you should choose emulators along with some real devices.

Pros

The pros of using emulators for UI testing are:

1) It is not practically possible to collect the devices of all resolutions and that would also cost an enormous amount of money. But emulators cost nothing.
2) With an emulator, you can create all screen resolution and OS combinations.
3) If you have only one set of real devices but the QA team is of more than 1 person, then it is not possible that all QAs can test for the same test bed in parallel. With an emulator, every QA can create the same combination on their machine and test in parallel.
4) Testing on an emulator is less time consuming and is faster when compared to a real device.
5) Common bugs related to the UI like alignment etc can be easily caught on emulators.

Cons

Cons include:

1) Gestures can’t be tested on emulators. Only one gesture can be emulated at a time.
2) Physical inputs of GPS, dropping or weak network etc also can’t be tested.
3) There is no way that you can create an emulator for Sony, LG, Nexus, etc phones.
4) It is not possible to create a real environment with a low battery or low memory etc., on the emulator.

Hence the decision should be made depending on your app and the testing requirement.

Manual or Automation UI Testing?

No product whether it a desktop app or web app or mobile app can be released without testing. As a QA we struggle to find and report each and every defect but still, they are reported by customers.

Do you know why?

Because lengthy tests that are often avoided or missed thus leaving undetected bugs. Also 100% coverage, in-depth execution is not possible with manual testing.

UI testing is pretty simple and straightforward and you just have to look at how it is appearing to your eye. Now if this is done manually it is very time-consuming. Also, most of the times we need to create a huge data for UI testing like a scroll will appear only if the rows or cards cross a particular count.

Creating big data is very time-consuming. Having an automated suite can solve both the problems.

On the contrary, if the functionalities or UI of the app are still in a changing phase then it doesn’t make sense to invest in automation. Similarly, if the functionalities of the app are vital, then it is better to test manually.

Hence depending on the following pointers, you should decide whether to test manually or to automate:

  • The nature of your app.
  • The stability of your app.
  • The resources available like manpower to study the tools and compare them.
  • How much time is invested study and ramp up of an automation tool that is required?
  • Is the client ready to invest time in the ramp-up and study?

Mobile App UI Testing Tools

Following is a list of 5 tools that can be used for UI testing of a mobile application for Android and/or iOS.

(For functionality testing tools you can refer to the list of automation tools on our automation tools for testing Android applications page).

#1) Selendroid

Selendroid is one of the best and most recommended tools for mobile application automation for UI testing.

It can be used for both Native and Hybrid apps. It can be used only for Android apps and the client API tests are written using Selendroid 2. It can also be used with more than one device and is fully compatible with JSON.

#2) Testdroid

This is a cloud-based tool and can be used for a variety of devices, different screen resolutions and OS versions of both Android and iOS. Parallel device testing is a big advantage of this tool and is a good tool for UI testing. It helps the developers to improve the time-to-market.

#3) SeeTest

It is a paid tool and can be used for Android, iOS, Windows, Symbian etc.

It is a cross-platform tool and hence the advantage is that same test can be run on all platforms. It can be used for all mobile applications and the tests can be run in parallel on more than one device.

#4) UI Automation

This is the official UI testing tool of Apple and is the best tool for automating iOS applications. Although it is hard to learn, it offers a great advantage with libraries, performance, UI testing etc.

#5) Calabash

It can be used for both Android and iOS testing for native or hybrid apps. It is a cross-platform tool and it is best used for automating gestures, screenshots, assertions etc. It can be used on real touchscreen devices. It also has support for cucumber.

When developers are unit testing the app, they can also do UI testing using Android Studio but it can only be used for Android applications, you can study more about it on developer.android.com.

Checklist for Testing Mobile App UI

Below is the checklist for testers to ensure that the GUI is tested completely well on smart devices:

Test overall color scheme and theme of the app on the device.
Check the style and color of icons.
Test the look and feel of the web content across a variety of devices and network conditions.
Test for multi-column layout – check if columns are aligned correctly and viewable even on a lower resolution.
Test if progress indicators are visible when pages are loading.
Check the Menus and how they are invoked.
Check the Items contained in the Menu.
Screen Orientation is tested in both portrait and landscape mode.
Check the use of virtual keyboard while changing the screen mode.
Check the pinch-to-zoom effect through touch screens and trackballs – details should not be distorted on the zooming.
Test the sliding effect – should work in a single stroke; next screen must into the screen resolution without distortion
Test the buttons sensitivity – should be clickable with any kind of touch (a large fingertip or stylus).
Virtual keyboard opens up automatically when the user wants to enter text in any text field.
Test if the application is integrated well with the mobile hard keys- start, home, menu, back buttons.
Check if the page navigation and scrolling are working fine through the trackball.
Test the overall responsiveness of the application on the device.

Tip: Before beginning the UI testing, get sound knowledge about the flow and functionalities of the device in the application is going to be tested. And keep these functionalities in mind while doing the testing.

Conclusion

A Bad GUI is an unpleasant experience for the user. The GUI testing is highly recommended and important especially when it comes to smart devices because here the screen size is comparatively small and a lot of variations of the devices are available in the market.

Your application may look and behave differently on different devices. So, it is important to test the app on at least some standard sizes and variations of devices.

All the mobile applications need UI testing but the deepness of testing required is defined by the category or purpose of the application. You should do a complete analysis of the application’s UI features against the phone's model or OS versions before you finalize your test bed.

Based on this analysis, you should create your test cases for testing. Use automation wherever possible to save time.

Keep an open eye while testing the UI because it is simple yet it has a big effect on the selling of your app.

Take a look at our upcoming tutorial for detailed information on Mobile Responsive Test.