Before start writing test scripts, we need to identify elements like id, name, class etc to perform actions. In order to identify elements, we use UIAutomatorViewer to capture snapshot of current device screen which shows the hierarchy of the UI components arranged in the screen.

UI Automator Viewer is a GUI tool that comes with Android SDK which is used to inspect UI components of an Android Application and view the properties associated. We can find it in Android SDK “tools” folder with file name 'uiautomatorviewer.bat' on Windows.

How to launch uiautomatorviewer ?

We can execute command uiautomatorviewer from terminal window. Before that we should have set system variable in your PATH as %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools; We have discussed this earlier in Appium Installation

When we run the above command, uiautomatorviewer window should open with the default “UI Automator Viewer” window as below

We can also launch 'uiautomatorviewer' manually by double clicking on "Uiautomatorviewer.bat" file in Android SDK tools folder. We need to navigate to Android SDK installation folder. I have installed in this folder "F:\APPIUM\Android SDK\tools" where i can see uiautomatorviewer batch file.

How to access elements using UIAutomatorViewer?

To start using UIAutomatorViewer, we first need to Connect device to the PC via USB cable and also make sure you have enabled USB Debugging mode for the device connected. If the devices is not connected, it will throw an error as 'No Android devices were detected by adb."

Once we have connected the device to PC, open android application that we want to start with and just click on the “Device Screenshot” icon to capture device screen shot.

After clicking on 'Device Screenshot', an image of the current screen will be loaded in the UIAutomatorViewer and we can use the mouse to click on any element and see the details of that element. You can also use the hierarchical tree in the top right to browse to a particular element.

In the above image, the left side of the uiautomatorviewer shows captured screen shot and the right side panel is divided into two parts:

Part 1 - Upper part shows the UI XML snapshot shows the hierarchy of UI components arranged in the screen layout

Part 2 - The ‘Node Detail’ at the right bottom shows details of that element based on the UI components selected.

In the above screen shot, text area / resulted area '0' shows with a red outline and its details are shown in the bottom right section 'Node Detail'.

And now in the above screen shot, you can see text attribute and content-desc attribute shows value '5' and class as 'android.widget.EditText'. In the same way we can click on any of the node to view the detail node properties of UI element selected.