Inspecting elements using UIAutomatorViewer

Before starting writing test scripts, we need to identify elements using attributes such as  id, name, class etc to perform actions. In order to identify elements, we use UIAutomatorViewer  and Appium inspector to capture a snapshot of the 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 the Android SDK “tools” folder with the file name 'uiautomatorviewer.bat' on Windows.

How to work with UIAutomatorviewer?

There are several ways by which we can launch the uiautomatorviewer.

1. From manually going to the path where uiautomatorviewer exists (android SDK folder) and run the batch file (for windows).
2. Manually to the location via terminal and run the uiautomatorviewer sh file (for mac). Note: Execution permission should be given to the file.
3. You can add alias to run directly via terminal. In Mac machine add it in bash_profile file.

Example:

alias inspector='$ANDROID_HOME/tools/bin/uiautomatorviewer'

For Windows

For Mac

How to access elements using UIAutomatorViewer?

1. Connect device to the PC via USB cable.
2. Ensure that you have enabled USB Debugging mode for the device connected.
3. Run adb devices command in command prompt/terminal to check if device is detected and online/available.
4.  If the device is not detected then below error would be shown.

5. The UiAutomatorviewer will be shown below screen.

            6. Open an application and click the device screenshot icon from right up corner.

7. 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 screenshot 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 ‘Enter your Name’ shows with a red outline and its details are shown in the bottom right section 'Node Detail'.

Note: UIAutomatorviewer works with Android native app elements only.

How to work with Appium inspector?

A default inspector available in standalone appium (not in the npm version)  is called appium inspector. Which can be used to inspect android and iOS elements. It simply mirrors the screen of the device and we can interact with it and get the details of the elements. Lets see how we can launch and work with it.

1. Launch appium for your application/programs menu.
2. Click to search icon from right up corner.

         3.Add correct desired capabilities as per your device/emulator and application. Then click on the start session button.

         4. It will open the App screen , App Source (the hierarchy of element) and Selected Element Pane (The attributes and associated values of the element).  You can use this to create locators which will uniquely identify the element.

          5. You can provide .apk or .app file in desired capabilities inside appium inspector which will install and launch the app. Refer to the screenshots below.

           6. Best thing about appium inspector is that you can verify your written locator on screen. Check below screenshots.

If your locator is correct then it will highlight the associated element.

Writing locators

How to capture screenshot

• Open the app on simulator.
• From terminal run below command

xrun simctl io booted screenshot <filename.jpg>

How to record iOS simulator screen from terminal

• Open the app on the simulator.
• From terminal run below command

xrun simctl io booted recordVideo <filename>.<file extension>

• Press ctrl+c to stop recording.

I hope you learned something new on inspecting elements using UIAutomatorViewer .