Locating Android App Elements Using UI Automator Viewer

In previous post we learnt how to enable developer option and USB debugging mode in android device to connect android device with PC. So next steps is to learn element locators for android software app. Before learning about UI Automator Viewer, You must knows why we need it. To automate android software app using appium, You should aware about how to locate elements of android app to use them in webdriver automation software test scripts. Let’s try to understand how can we locate elements of android app.

As you knows, We are going to automate native android apps so it is not possible to inspect them using fire-bug and fire-path which we can use to locate elements of software web application as described in THIS POST. So here we need to use some other tool which can locate elements of android app.

What Is UI Automator Viewer?
UI Automator Viewer is a tool provided by android SDK. You can view THIS POST to know how to download and install android SDK in windows. UI Automator Viewer will provide you an user interface to scan and analyse UI components of android software application. Using UI Automator Viewer, We can inspect the android app component hierarchy, Inspect properties of android app components and then we can use those element’s properties to create xpath of element and use them in automation test scripts.

You will find uiautomatorviewer.bat file in tools folder of SDK. e.g. E:SDKtools.

PREREQUISITES : All PREVIOUS 8 STEPS of android environment configuration should be performed.

Inspecting App’s UI Element Using UI Automator Viewer
We will use default and simple calculator app of android phone to learn how to inspect its’s UI elements using UI Automator Viewer tool. Follow the steps given bellow.

• Connect your android device with PC (USB debugging mode should be enabled) as described in THIS POST.
• Run command “adb devices” in command prompt to verify device is connected properly with PC.
• Run uiautomatorviewer.bat file from E:SDKtools folder. View THIS POST to know more about SDK folder. It will open UI Automator Viewer tool’s UI as bellow.

• In UI Automator Viewer software tool, Click on Device Screenshot image button as shown in bellow image. (Before clicking on button please make sure Calculator app is open in your android phone and it is in active mode. Means phone is unlocked and you are able to see Calculator app on screen).

• It will process to capture device screenshot.

• After capturing screenshot of android phone screen, It will show your android phone’s calculator’s UI in UI Automator Viewer as bellow. 

1. On left site it will show you calculator app’s screenshot which is open in android device.
2. Right side top part will show calculator app’s UI element’s hierarchy view. It will display node structure to explain how elements are arranged.
3. Right side bottom part will show property detail of selected element.

• In calculator screenshot (which is display in UI Automator Viewer), Select button 5 to view it’s different properties as shown in bellow image.

• It is showing different properties of button 5 in right side node detail section which we can use to locate it using different element locating strategy.