How to Inspect or Locate Element using UIAutomatorViewer in Appium: Tutorial
Tags: testing, ux, tutorial, uiweekly
Published: 2022-04-22 19:04:23

Appium is widely used for automated [mobile app testing](https://www.browserstack.com/app-live). It helps execute automated tests on native and hybrid apps for faster results. To fulfill the growing demand for apps that serve, delight, and retain users, the need for [automated app testing](https://www.browserstack.com/app-automate) continues to increase. That is why Appium is widely used to perform automation testing, which helps development and testing professionals deliver high-end apps within tight deadlines.

For any application, User Interface (UI) plays a major role. It is the UI elements that the end-user interacts with. Thus, it is very important to [test UI elements](https://www.browserstack.com/guide/ui-testing-guide) individually. These elements can be located using GUI (Graphic User Interface) tools like UIAutomatorViewer, and then tested with desired scenarios involving user interactions.

This article will discuss different ways to inspect or locate UI elements using UIAutomatorViewer in Appium.

Before we begin, let’s look at different ways used to define a UI Element.

## Ways of defining a UI Element

UI Elements can be defined by ID, ClassName, Name, Accessibility ID, XPath.

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](https://github.com/appium/appium-ios-device)
- [Install Android Studio and SDK Tools](https://developer.android.com/studio)
- [Install Java](https://java.com/en/download/) and set up the [environment variables](https://stackoverflow.com/questions/10687188/inno-setup-setting-java-environment-variable)
- [Install Eclipse IDE for Java](https://www.eclipse.org/downloads/packages/)
- Connect the Android device where the test application is to be tested. The system must have Appium Setup using USB

![Appium Server upon launch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ntlnnjijbqlrwjynfjn.png)
_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

## Locating Element using UIAutomatorViewer

This article will explore a test case demonstrating how to locate the + button on the Android Calculator App using Java and click it.

1. the UIAutomatorViewer is opened, open the target app that has to be tested – Android Calculator in this example.

2. Click on the Device Screenshot Icon to display the screen of the Android device in the window. It looks like the screenshot below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uytxg7cyvycmza5ki2xc.png)
_UIAutomatorViewer Window with Android Calculator App_ 

3. Move the cursor on the target element that has to be located – the + button.

4. Note down the values mentioned in the Node Detail Tab of the UIAutomatorViewer window.

5. 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. 

## 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;
}
}
```

## 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](https://www.browserstack.com/guide/android-app-automation-testing-tools).