Appium Tip #13: Use Inspector or uiautomatorviewer for UI Element Inspection

This is the 13th tip in our Things You Should Know About Appium blog series, and we’ll take a look what types of tools are used with Appium and what are the most important ones for you as well. Naturally, the right tools can make your life so much easier and enable you to get the best out of test automation and Appium. For example, Appium Inspector and some other tools are very handy when identifying some visual elements in your app. These tools have their limitations so we’ll also discuss how to tackle those.

Appium Inspector for Visual Element Identification

Appium Inspector is a handy tool for element discovery and even script recording. I use this tool a lot whenever I’m introduced to a new app that I want to automate. This tool is being maintained for OS X and Windows, and the latest version can be downloaded from the front page of appium.io. To verify if your Appium environment is ready, download our free Appium beginner’s guide and follow the instructions there.

In general, Appium Inspector is handy for the following things (and people use it for this purpose):

• To identify and understand the element hierarchy (for developers this may be trivial but for testers it is definitely useful information on how certain UI elements are aligned with each other and what other layers/fragments/etc the app may have)
• To find the name, description, value and other attributes of the element/object (objects have certain characteristics that can be identified through this tool and then used for XPath command. In case you are not familiar with XPath, we’ll come back to this topic with all details later in this blog series)
• To record your manual actions with the app (in order to record your actions, you need either Appium Inspector or some other tool that can access those elements, hierarchy of those, as well as record those for clear and continuous test steps for your script)

Appium inspector is a combination of the Appium server itself and the inspector, which is designed to help you discover all the visible elements of your app while developing your test scripts. The fellows at Appium have mentioned that while the inspector works well for iOS, there are some problem areas with it in Android on Appium at the moment. To that end, the Appium team encourages the use of uiautomatorviewer (which is an inspector tool provided by Google that provides similar functionality to the Appium inspector tool).

To get started, first download and install Appium Inspector. There are both OS X and Windows version available (.app and .exe).

When you click the app to open, it will start the Appium server with the default IP address set to 0.0.0.0. and the port to be used in 4723.

Appium Tip!

You can also launch another session of Appium server through command line and then use the Appium app only to launch the Inspector. How to do it? Take a look at this one.

The next thing to do is to specify the application and device which you want to open in Appium Inspector. Use App Path and Choose to locate your app and for iOS also copy the device UDID via Xcode Devices window, as follows:

Once the settings are correctly placed, it’s time to first launch the Appium server and then launch the inspector. First press Launch and then press the magnifying glass icon to launch the inspector. We use our Bitbar iOS App as an example and the hierarchy looks as follows:

In this picture, you can see certain UI elements identified and details of those UI elements. The viewer on the right-hand side shows what element has been identified and by selecting other elements on views on the left-hand side will reflect changes both in details and viewer. From this (under Details) you can also fetch XPath for any UI element nice and easily. The server’s logs can be viewed from the background while you interact with your app:

Next, let’s take a look at how recording works. Open the Appium Inspector main view and click on the ‘Record’ button at the top. Now, when you browse through your application, the actual interactions with your app will be recorded.

You can also get the XPath from those visual elements which you’ve interacted with. For example, with our Bitbar iOS App example the click would be performed through the script as follows:

wd.findElement(By.xpath("//UIAApplication[1]/UIAWindow[1]/UIAButton[1]")).click();

This works really well for iOS applications and in most cases for Android, but if you’re looking for a more native tool to be used with Android, take a look at uiautomatorviewer.

Using uiautomatorviewer for XPath, name and other attributes

The uiautomatorviewer is a standard UI tool shipped as part of Android Studio for analyzing those UI components of your Android application. Using it you can inspect the UI, find hierarchies the same way you would use Appium Inspector and view different properties/attributes of those UI elements. For example, id, name, class, descriptions, visual sizes etc. can be all identified with uiautomatorviewer.

Here is our video about how to use it:

Allright! This was the first intro on tools to be used with Appium, next week we’ll continue with some new tips and tricks for Appium!

Happy Testing!