So far we have seen how to connect our real device/Emulators using Appium. In this session we will focus on how to inspect an object/Element using Appium Inspector.
As I already mentioned in one of my previous blog that, the most important and powerful feature in Appium is Inspector. Because it will help us to find an element and its attributes in simple manner. The Inspector screen is simple and lightweight. One can easily inspect an element and the hierarchy model displayed for the screen will be quite interesting.
Salient features of Inspector:
- The hierarchy view of elements
- Just a click on preferred element to inspect
- You can easily find the element and swipe coordinates
- For instant recognition of element, we can use inbuilt buttons like “Tap” and “SendKeys” to click on any particular element and to pass value to any input field.
- Allows to save and modify the Desired Capabilities for future use
- On every successful element inspection, attributes like “Name”, “Value”, “Label”, “ID”, “XPath” etc… will be displayed separately in a tabular column
- Based on platform, there are lot of location strategy available to find an element like “ID”, “Xpath”, “Class Name”, “UIAutomator Selector”, “Class Chain”, “NSPredicate” etc…
There are list of locator strategy available in Appium based on platforms. Based on its priority level, easy approachability and performance we can select the appropriate locator strategy
|Locator strategies||Supported Platform|
|accessibility id or ID||Android and iOS|
|Name||Android and iOS|
|class Name||Android and iOS|
|Xpath||Android and iOS|
Remember: Few Selenium based Locator Strategies like “css selector”, Linktext, tagname, partiallinktext are not supported by Appium API’s because mobile page source (DOM) is not XML based.
One of the simplest and most commonly used location strategy. In fact every element has an own ID associated with it.
In Android, we can use attributes as ‘ID’ or ‘resource-id’
In XCUI, we can use name or label. [Preferred only for static field values]
This locator is commonly used for iOS based application. In android this locator is recognized as an attribute “content-desc”. This is one of the best strategy to use for both Android and iOS because it will be same in both the platforms if the app is designed using ReactNative or Xamarin.
Android: accessibilityid or “content-desc” is always a preferred choice due to its performance.
XCUI: accessibilityid should be used carefully, because for dynamic fields, id will change as per value of the field. So preferred only for static fields.
@iOSXCUITFindBy(accessibility = “selector”)
@AndroidFindBy(accessibility = “selector”)
This is one of a common locator strategy in Appium or selenium. Element will be identified using the name of the field.
As we already seen, the “Appsource” hierarchy in Inspector tags are nothing but a className.
For IOS it is the full name of the XCUI element and begins with XCUIElementType.
For Android it is the full name of the UIAutomator2 class and begins with android.widget.
Example: XCUIElementTypeButton and android.widget.Button
@iOSXCUITFindBy(className = “selector”)
@AndroidFindBy(className = “selector”)
UIAutomator API is an Android native way of finding element, it uses UISelector class to locate elements. In Appium you send the Java code, as a string, to the server, which executes it in the application’s environment, returning the element or elements.
driver.findElement(MobileBy.AndroidUIAutomator(“new UiScrollable(new UiSelector().scrollable(true).instance(0)).scrollIntoView(new UiSelector().textContains(\””+ find_text + “\”).instance(0))”));
Appium allows user to use some list of attributes with UiSelector(). Few listed below,
We can use UIautomator strategy with UiScrollable function for some complex operations like, auto scrolling and finding an element with the given conditions.
This locator strategy is in my favorite list when it comes to XCUI automation. This is a NativeJS search approach powered by Apple for its own SDK (XCode) and you can design it more like an XPath query.
There are lot of logical and comparative operators are available for Predicate sting. Please go throw the site
@iOSXCUITFindBy(iOSNsPredicate = “type == ‘XCUIElementTypeStaticText’ AND name BEGINSWITH[c] ‘Shipping Address:'”)
One of a best and powerful locator strategy designed to replace Xpath and for quick digging and finding the hierarchical elements. This is designed by Appium team. This locator strategy is in my favorite list when it comes to XCUI automation.
@iOSXCUITFindBy(iOSClassChain = “**/XCUIElementTypeTable/XCUIElementTypeStaticText”)
We all know XPath very well, a commonly used and powerful strategy especially for dynamic elements, no need to explain much as we all much use to it.
Web testing without XPath is unimaginable. Also xpath is considered to be the unreliable location strategy.
Appium allows user to use XPath for certain conditions but it is not recommended due to its performance also for some other good reasons like.
- Due to dynamic changing of elements in mobile, path hierarchy will not be same all the time
- XPath will take lot of time to find an element (depends on number of elements in the page)
- Mobile native is not having its DOM as XML. You can find that in Appium Inspector
- Leads to StaleElementException in many cases
In Android you can see some moderate performance using XPath, but in XCUI it is highly not recommended instead we can go for Predicate String or Class Chain strategy.
How to find an Element by navigating via AppSource?
Now let’s enter into the practical way of Inspecting Elements. Please follow the below steps,
Step 1: To inspect an element we need to know how to enter Desired Capabilities and how to launch the Appium session. If not then please refer to my previous blogs for details.
All set and connection is established successfully, once the mobile phone screen got captured on Appium Inspector you can start spying the elements.
For this tutorial I have selected “JetAudio” media player application for XCUI. You can select any of your preferred application. Come let’s see how to inspecting Elements for XCUI.
My Desired Capabilities are
I have selected “Start Session” and my connectivity established successfully. So that you can see my mobile phone screen on Inspector.
Take a look on how the “App Source” is getting displayed here. There are two entries in the name of “XCUIElementTypeWindow”. The 1st entry is the entire application frame and the second entry is for the footer section (the advertisement that is displaying in the footer). You can expand the 1st row to find out all the parent and child elements of the selected screen.
See the expanded view of App source, the splendor here is all the displaying in the App Sources are nothing but a Class name of an element/frame. Impressive right?
You can also see that, all element attributes are getting displayed in the right side view of Inspector for the selected element. This is why I have mentioned it is one a powerful feature of Appium.
Okay all fine. I can see all the attributes of the element… But my question is How to inspect an element? How can I do that?
Yes, let me clarify. Once you can see the app view in Inspector, All you need to do is just a click on the chosen element from the screenshot. For example in the below screen shot, I can see the home page of jetaudio player and I have simply clicked on the Hamburger menu (blue highlighted).
On click of the element, Appium will automatically detects and display’s all the attributes of the element including xpath. It will also display the hierarchical view in “App Source” like below.
Now we have all the attributes in hand, with the help of these attributes we can easily write location strategies in our code. For example the screen shows the “accessibility id” as “navi menu” so that I can write my location identification strategy using “ID”.
driver.find_element_by_id(‘navi menu’) or driver.findElementById(“navi menu”);
How to inspect an element using locator and Selector?
Okay now we will see how to find an element using locator? Finding an element using locator made simple in Appium. Clicking on the icon “Search for elements” will give you list of locators applicable to use with selenium.
locator strategy can be an ‘ID’ or ‘xpath’ or ‘Name’ and we have to enter the Selector value as per the locator selected.
Select the needed locator strategy and enter the Selector (value) in the screen and click on “Search”.
I have selected “ID” as a locator and entered the Selector as “navi menu”
On click of “Search” button the next screen will appear if the given selector is valid and found in the screen. Inspector will always shows the elementID as a search result.
On click of the elementID the searched element will get highlighted in the background screen so that we can recognize and confirm whether the highlighted element is what we are looking for.
We can use the same way for inspecting elements using other locator strategy like UIAutomator, xpath, classchain or Predicate.
One should know how to frame a UIAutomator selector, Predicate string queries. So that it will become easier to inspect element using Inspector.
Just showcasing how to find element using Predicate/ Class chain in the below screens,
For example, if you want to select a complete list of elements belongs to a single class name, then you can query without giving any selection criteria like
- **/XCUIElementTypeButton -> class chain
- Type == “XCUIElementTypeButton” -> PredicateString
So that this class chain query will fetch complete List of elements having the class name “XCUIElementTypeButton” and returns a List
This query returns a list of 17 MobileElements. And clicking on each elementID’s from search result will highlight the corresponding element in the background.
We will see how to capture these list of MobileElements using Java List and how to iterate/assert the values in upcoming sessions.
Hope it is clear now on how to inspect an element using Appium Inspector.
Ragav, having 10+ years of testing experience on which 7 years of rich experience in automation using UFT, Selenium (Java/Python). Expertise in Web and Mobile automation testing using Appium.
Reviewer: Naveen Khunteta