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
Great Work Raghav and Team,
There articles are very informative and extremely easy to understand.
Thanks for reading 🙂 Glad that its helping you..
Appium is not finding elements when 1000’s of elements are present and yet the element which i need to find is at top – ios
May I know, Which location strategy you are using to fetch the element details?
Predicate string , I also tried id. The problem is when tryin g to refresh the appium desktop, it’s not at all refreshing. But for other pages, it’s refreshing properly. When I navigate to Lookup page where I have 1000’s of elements present, I have to find a “Search” button, which is at the top of the page. It is not finding. I have to click on the search , But the appium desktop itself is not refreshing
If elements are more, Appium will take some time to load the DOM, especially for iOS. Try providing “useFirstMatch” as true in DesiredCapabilities. Please let me know if you see any improvement after adding this capability.
sure will check now
No, It’s already there, no improvement. Appium , is not at all refreshing because of many elements present, Couldn’t even get the view of the page in the appium desktop
Some other settings or way to resolve this issue?
Is there any other way?
No, It’s not helping
There is an open thread for a long time regarding performance issue for WDA in ios. So for time being we have to inspect the element by clicking on the field using selector. I will let you know if I get any positive solution around this
What is a selector
Is the page with 1000 elements loading in appium inspector window or it shows blank screen?
It is not showing. Actually it is not refreshing, but when when it comes to elements with limited numbers, the refresh happens, only when refreshing for the lookup, where it has around 10000(ten thousand) records, the refresh is not happening. Your help is much needed. Thank you
There is a small trick to make the page load happen in appium desktop
1. Try to refresh the page in appium having 1000+ elements, immediately click on the ios Home button from your device
2. Appium desktop will load the home page of the device with some app icons
3. Now take recent apps and try to open the AUT, it will load your page with 1000+ elements,
4. Now refresh the appium desktop, your page will load for sure.
How to do that in scripting. While running, it throws, NOSUCHELEMENT exception, Had tried to resolve that issue for around 5 hrs. Still couldn’t resolve