Just like in Selenium there are few locators to identify elements in mobile apps. Generally, to find the elements we use UIautomator for native and hybrid apps. This article helps you to know about UIautomator and other various locators. As you know how to create a new AVD from my previous article, we will use an Emulator and Calculator app to identify elements in the calculator app. Within no time you’ll learn how to use UIautomator and locating the mobile app elements. Just hold tight and follow the below steps:
What Is UIAutomator Viewer?
UiAutomator is a tool that comes with Android SDK (>= API 16) which is helpful to automate the UI. It’s a good GUI tool to scan and analyze the UI components of an Android application. For ease, it captures screenshot of our device where we can identify the elements. This works for only Android. As I’m focusing only on Automating Android Apps here. This UIAutomator would be a .bat file in windows OS and it would be a script file in Unix systems. This comes with Android SDK itself. This tool works only when you’re connected to a device (Maybe real/ emulator). UIAutomator Viewer does not support WebView.
For Windows operating system:
To launch UIAutomatorviewer, go to the path where you’ve installed SDK and find uiautomatorviewer.bat. Double click on it to launch.
For Unix based operating system:
Go to the path where you’ve installed SDK and find uiautomatorviewer script to open it. Make sure that you’re connected with a device
Once it’s launched, then click on calculator app in your device. Now in UIAutomatorViewer tool, Click on Device Screenshot image button present in the toolbar. Now this will capture a screenshot of the app which was launched.
On the Right top. it displays calculator app’s UI element’s hierarchy view. And the bottom part will display the properties in detail of selected element. This is how you can inspect any element of android native app using UIAutomatorViewer tool. You just need to click on element and it displays element’s properties in detail. It’s good to save the screenshots captured by that tool for our use at later point of time.
You may wonder, this UIAutomator works only for native and hybrid apps but what about mobile web apps. Yeah, this will not work for web apps. We can follow Selenium approach to inspect elements in web apps. Just like in Selenium, we need to invoke a browser and open dev-tools to inspect elements. But we need to add a plugin called ‘Chrome ADB plugin’ to your desktop chrome browser. Recently I came across two chrome extensions. Chrome ADB, ADB – Chrome. You can try either of them.
Once you set up your device for debugging, then the chrome://inspect/#devices page
will be displayed with all the connected devices along with the open tabs and web views. Make sure Discover USB devices is checked. There will be link ‘inspect‘. Click on that link to open developer tools. Now its just same as in Selenium, Identify the element by mouse hovering the element.
We will see different locators to identify elements in next article.