Intuitive UI is key to user engagement and retention, and so is UI testing. To test UI elements effectively, tools like UIAutomatorViewer help locate components within Android apps.
UIAutomatorViewer lets testers inspect UI elements visually before automating tests with tools like Appium, which aids automated UI testing for native and hybrid apps.
This article discusses the ways to inspect or locate UI elements in an Android App using UIAutomatorViewer in Appium.
What is UI Automator Viewer?
UI Automator Viewer is a tool provided by the Android SDK that lets developers inspect the user interface (UI) of an Android application by capturing snapshots of the device screen and displaying its layout hierarchy and properties.
UI Automator Viewer is mainly used during test automation to identify the properties of UI elements like buttons, text fields, or images. It helps testers and developers understand how elements are structured and interact on the screen. By analyzing the layout and getting details such as resource IDs, text, class names, and bounds, it becomes easier to write reliable UI automation scripts. This tool is especially helpful when using frameworks like UI Automator or Appium to test Android apps.
Read More: How to report bugs in Appium UI Testing?
How to Install and Use UI Automator Viewer
Here is a step-by-step guide to get started with the UI Automator Viewer:
Step 1: Set Up the Environment
- Install Android Studio or ensure Android SDK is available.
- Confirm the platform-tools and tools/bin directories are included in the system path.
Step 2: Enable Developer Options on the Device
- Go to the Android device settings -> About Phone -> Tap “Build Number” multiple times to enable Developer Options.
- In Developer Options, turn on USB Debugging.
Step 3: Connect the Device
- Use a USB cable to connect the Android device to the system.
- Use the command adb devices in the terminal to confirm the successful connection.
Step 4: Launch UI Automator Viewer
Navigate to the Android SDK’s tools/bin directory.
Run the command:
uiautomatorviewer
Step 5: Capture the Current Screen
Click on the camera icon in the toolbar to take a screenshot of the current screen on the connected device.
Step 6: Explore the Interface
- Use the Screenshot Panel to view the device’s captured screen.
- Use the Hierarchy Tree to explore layout structure.
- Use the Node Detail Panel to view selected element properties like resource-id, class, text, and bounds.
Read More: Flutter vs Android Studio: Core Differences
Ways of defining a UI Element
UI Elements can be defined by ID, ClassName, Name, Accessibility ID, XPath in Appium.
To understand how to inspect or locate a UI element with UIAutomatorViewer, this article will use the example of the Android Calculator. The aim is to locate the element that is the + button with the help of UIAutomator View and Click on it.
Setting up UIAutomatorViewer
Before creating the script to inspect the desired element, let’s look at setting up UIAutomatorViewer.
Prerequisites for setting up UIAutomatorViewer
- Install Appium
- Install Android Studio and SDK Tools
- Install Java and set up the environment variables
- Install Eclipse IDE for Java
- Connect the Android device where the test application is to be tested. The system must have Appium Setup using USB
Once the Appium Server is launched
Open UIAutomatorViewer
This can be done by either of the following methods:
- entering uiautomatorviewer in the command prompt
- opening uiautomatorviewer.bat file in the Android installation folder with the following command: Android >> Android-SDK >> Tools >> UIAutomatorViewer.bat
How to Use UI Automator Viewer to Find Objects in an Application
Locating and inspecting UI elements is essential for creating reliable automated tests. This section explains how to use the viewer to identify object properties effectively.
Step 1: Capture App Screen
Open the target application on the connected Android device. In UI Automator Viewer, click the screenshot icon to capture the current screen.
Step 2: Select the desired UI Element
Click directly on any UI component in the captured screenshot. The selected element will be visually highlighted, and its corresponding node will be outlined in the layout hierarchy tree.
Step 3: View Element Attributes
Upon selection, the properties of the element are displayed in the Node Detail Panel on the right side.
Key attributes include:
- resource-id: for unique identification.
- class: to identify the type of UI widget.
- text: if the element includes any visible label.
- content-desc: used for accessibility. Helpful for locating non-textual elements.
Source: UI Testing Academy
Step 4: Record Required Properties
Note down the most stable and unique properties. These are used later in writing automated test scripts.
Step 5: Refresh if Needed
If the app’s state changes (e.g., a dialog appears), click the screenshot icon again to refresh and inspect the new layout.
Step 6: Use in Automation Scripts
The displayed attributes can be used directly in test scripts created with UI Automator, Appium, or other automation frameworks. This enables reliable interaction with UI elements and improves the accuracy of the tests.
Locating Element using UIAutomatorViewer [Example]
This article will explore a test case demonstrating how to locate the + button on the Android Calculator App using Java and click it.
- Once the UIAutomatorViewer is opened, open the target app that has to be tested – Android Calculator in this example.
- Click on the Device Screenshot Icon to display the screen of the Android device in the window. It looks like the screenshot below.
UIAutomatorViewer Window with Android Calculator App
- Move the cursor on the target element that has to be located – the + button.
- Note down the values mentioned in the Node Detail Tab of the UIAutomatorViewer window.
- Note the values of Text, ResourceID, Class, Package, and Content Desc. These values will be used when writing the test script to locate the element.
Run Appium Tests on Real Device Cloud for Free
Script to Identify the + Button in the Android Calculator App
1. Find the + Button using ID and click it
driver.findElement(By.id("com.android.calculator2:id/plus")).click();Or
driver.findElementById("com.android.calculator2:id/plus").click();2. Find the + Button using Accessibility ID Property and click it
driver.findElementByAccessibilityId("plus").click();3. Find the + Button using XPath and click it
driver.findElement(By.xpath("//android.widget.Button[@content-desc = 'plus']")).click();Or
driver.findElement(By.xpath("//*[@content-desc = 'plus']")).click();4. Find the + Button using ClassName and findElements() method and click it
List<MobileElement> elements = driver.findElements(By.className("android.widget.Button"));
for(MobileElement element : elements) {
if(element.getAttribute("contentDescription").equals("plus")) {
element.click();
break;
}
}Errors that can occur while using Uiautomatorviewer
Here are some errors that can occur while using UI Automator Viewer:
- “No device connected” error: Occurs when the device is not properly connected or USB debugging is disabled.
- Blank or black screenshot: Happens if the screen is locked, the app is minimized or the device is not ready when the screenshot is taken.
- Permission denied error: Triggered by a lack of proper access to ADB or SDK folders, especially on restricted systems.
- uiautomatorviewer command not found: Indicates the tool path is not set in the system environment variables.
- Failure to capture screenshot: Can be caused by device incompatibility, outdated SDK tools, or system UI issues.
- Stale or outdated UI tree: Happens if the app’s UI changes after the screenshot is taken and the view is not refreshed.
- Device not authorized: The device may not be trusted by the connected machine; authorization must be granted on the phone.
- Missing dependencies or broken SDK: The SDK installation may be incomplete or corrupted, preventing the tool from running correctly.
Read More: What is SDK Testing
Conclusion
As demonstrated, inspecting a desired element from the target Android App under test is easy enough using UIAutomatorViewer in Appium. This can be used to test the functionality of UI elements while performing Android App Automation testing.
It is important to run the Appium automation tests on real Android devices. BrowserStack offers a real device cloud of thousands of real mobile devices installed with real operating systems for testing purposes. Simply Sign up for Free, choose the required device-OS combination, and start testing apps for free in real user conditions using BrowserStack App Automate.
Run Appium Tests on Real Devices
Appium Useful Resources
Tutorials
- How to perform Parallel Test Execution in Appium?
- Appium Visual Testing: The Essential Guide
- How to run Appium iOS Tests on Real Devices?
- How to perform Debugging in Appium
- How to Run Your First Appium Test Script
- How to report bugs in Appium UI Testing?
- How to run Appium Tests on macOS?
- XPath in Appium: Tutorial
- How to Analyze Appium Logs
- How to perform Drag and Drop using Appium
- How to test mobile app in Landscape or Portrait mode using Appium
- How to Run Same Script in Multiple Devices using Appium
- How to change Time Zones for Mobile App Testing using Appium
- How to Perform Localization of Mobile Apps using Appium
- What is Appium Inspector? (Benefits & How to Use it?)
- How to run Appium tests on Android devices
- How to scroll down to an element in Appium
- How to Download and Install Appium
- How to set up your Appium Grid
- How to test Biometric authentication using Appium?
- How to use touch actions in Appium?
- How to Automate a Real E2E User Flow involving App and Browser with Appium
- How to Inspect Element using UIAutomatorViewer in Appium
- How to Test Flutter Apps Using Appium Automation
- Understanding Appium Desktop: Tutorial
- Appium Tutorial for Mobile Application Testing
- React Native and Appium Tutorial
- Understanding FindElements in Appium
Best Practices, Tips, and Tricks
- Appium Best Practices Every Developer Must Know
- Effective Locator Strategies in Appium
- Top Appium Commands every Developer must know
- Desired Capabilities in Appium
- Overcoming Top Challenges faced in Appium Automation
Getting Started with
- Getting Started with Appium and NUnit framework
- WebdriverIO Tutorial: Getting started with Test Automation using Selenium and Appium
- Appium with Python: Getting Started with App Automation Testing
- Appium with Java: Getting Started to Run Automated Tests
- Test Windows Desktop App using Appium-Compatible WinAppDriver
Differences and Comparisons
Featured Article
