How to Locate Element using UIAutomatorViewer?
1) The very first step before locating any element on your device is to first connect your device with your computer. I am expecting that you are coming to this chapter by following the complete tutorial on Setting up Appium with Eclipse.
Follow the steps to check if the device is connected properly:
- Go to Run and type ‘cmd’ for opening the Command Prompt interface.
- Type ‘adb devices‘ in the window.
This will display all the list of android devices attached to your computer. Don’t worry about the name, as it displays the binary name of your device.
2) On the actual device, open the app to the page you want to automate. In our case, we are doing the demo on amazon app.
3) Browse your Android installation folder and go to the following directory to open UIAutomatorViewer:
Android -> android-sdk -> tools -> uiautomatorviewer.bat
On my machine, the default location of the Android folder is ‘C:\Users\lsharm\AppData\Local\Android\‘ which I followed in this tutorial.
4) In UIAutomatorViewer, click on Device screenshot (marked below second button).
Note: Make sure the application is opened before clicking on Device Screenshot, which means device screen should not be off and locked.
5) You will notice that a device image is displayed on the left side of the UIAutomator window with the detailed information of the tree nodes on the right side and the properties information on the bottom right side.
6) Click any element on the page and look at the right side of Node detail window. It displays the information of elements in tree structure.
Note: In the above image, class information is displayed, which can be used to identify the element using the script.
7) Click on the Main Menu button to display all of its properties.
Note: In this resource-id is populated, which can be used to identify element.
8) Click on Shop by Department text to display all of it’s properties.
Note: In the above screenshot, text value is displayed and that can be used to identify the element.
How to save the Screenshot and the UiX files
This is quite a handy functionality for saving different screens of your device. In the course of your mobile automation using UIAutomatorViewer, you will notice that you need to take the device screenshot again and again of the same page and that requires you to always connect with your device. With this feature of UIAutomator, one can save screenshots and UIX files and can be used later when the device is not attached.
1) Once the Screenshot of the device is taken and displayed on the window of UIAutomator, click on Save button. It will open up the small window which will look like the below image.
2) Now choose the best location to save the both files(Screenshot & UiX file).
3) Go to the same location and notice that two files have been saved under the selected location, one is your screenshot of the device screen and the other is the UiX files which contain the node structure and the properties of all the elements.
How to Open the UI Dump files
After saving all the screenshots of the different screens of your application, it is the time to see how to open the desired screenshot.
1) Click on the Open button of the UIAutomator window. A small window will open up.
2) Now browse the Screenshot and the UiX file and click on OK button.
A screenshot will display with all the node information and the property values of the selected screen. You can start using it for the automation now and no need to connect with the device to read the properties of the application.
