Best Mobile Application Design Strategies in 2024
Brittney Lawrence
In the realm of automation testing, mastering the art of Appium Element Locators is paramount for building effective automation scripts. These locators serve as the compass, guiding testers to precisely locate and control UI elements within mobile apps or websites. The automation journey typically comprises two fundamental steps: identifying these UI elements and executing actions upon them.
In this article, we’ll dive unto understanding how to properly use Appium Element Locators. This is key to building your automation scripts. After all, if you’re unable to “find” the UI element, you cannot control it (such as clicking a button).
In Mobile (or Web) Automation Testing automating any scenario follows these 2 steps:

What is an Element Locator?
An Element Locator is nothing but an address that identifies a UI Element on a Mobile App (or Website). As there are many UI elements present on a single mobile application screen, there can be a chance that same (generic) address can refer to more than one element. This means that we need to find a unique address for the element. As you will see, sometimes this is easy, and other times you have to do some further exploration to uniquely identify your UI element. The way you uniquely identify the element is called an element locator strategy. Appium makes many different strategies available.
Our previous Appium Android example used the following code for identifying the Textview:
|
1 |
[crayon-694968f415f91250277310 inline="true" ]<span class="line"><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElement</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">By</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">id</span><span style="color: #E1EFFF">(</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">Login Screen</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">)).</span><span style="color: #FAD000">click</span><span style="color: #E1EFFF">();</span></span> |
|
1 |
Here id is the Locator strategy and Login Screen is the unique id(address). Think of reading it as “Finding the element by <locator strategy> <element unique id>”. So in this example we’re telling Appium to use the “id” strategy (used for finding elements by unique ID) and the ID we’re using is “Login Screen”.
The below image describes how can you find the Textview element for any android application (in Java).

Figure-1:Locator Strategy(Java Example).
As you may expect, there are many different element locator strategies available to you, including:
Learning which type of Locator Strategy in Appium to use is part of the learning process of becoming comfortable with Appium. We will go through all Element Locator Strategies and discuss them in detail. Don’t worry about memorizing all of them. At this stage in your journey, you just need to become familiar with them and eventually, you’ll understand which are best to use in which scenarios. In fact, there are some tricks coming up later that will automatically suggest which strategy to use! Often during your script development, you’ll wrestle with trying to identify a UI element. When that happens, refer back to these different locator strategies to see which might best fit your needs.
NOTE: All of the above Locator Strategies can be inspected using the Appium Inspector Tool (for Android and iOS both). We will learn about that tool in the next article. The screenshots that follow are using this Inspector to illustrate the locator. The mobile app is depicted in the leftmost pane and when clicking an element we see the attributes in the rightmost pane.

Figure-2:Locator Type: Accessibility Id on Android Sample Application.
Appium example usage in different programming languages:
|
1 2 3 |
[crayon-694968f415f9a859090594 inline="true" ]<span class="line"><span style="color: #9EFFFF">WebElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">chromeButtonElement</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementByAccessibilityId</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">buttonStartWebviewCD</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">);</span></span> <span class="line"></span> <span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">mobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">MobileElement</span><span style="color: #E1EFFF">)</span><span style="color: #9EFFFF">chromeButtonElement</span><span style="color: #E1EFFF">;</span></span> |
|
1 |
|
1 2 3 |
[crayon-694968f415fa1701851863 inline="true" ]<span class="line"><span style="color: #9EFFFF">element</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">self</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">driver</span><span style="color: #E1EFFF">.</span></span> <span class="line"></span> <span class="line"><span style="color: #FAD000">find_element_by_accessibility_id</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">buttonStartWebviewCD</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">)</span></span> |
|
1 |
|
1 2 3 |
[crayon-694968f415fa9831150504 inline="true" ]<span class="line"><span style="color: #FF9D00">let</span><span style="color: #9EFFFF"> element </span><span style="color: #FF9D00">=</span><span style="color: #9EFFFF"> </span><span style="color: #FF9D00">await</span><span style="color: #9EFFFF"> driver</span><span style="color: #E1EFFF">.</span></span> <span class="line"></span> <span class="line"><span style="color: #FAD000">elementByAccessibilityId</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">buttonStartWebviewCD</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">);</span></span> |
|
1 |
|
1 |
[crayon-694968f415fb0221727681 inline="true" ]<span class="line"><span style="color: #E1EFFF">@</span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">find_element</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">:accessibility_id</span><span style="color: #E1EFFF">,</span><span style="color: #9EFFFF"> </span><span style="color: #92FC79">"</span><span style="color: #A5FF90">~buttonStartWebviewCD</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">)</span></span> |
|
1 |
|
1 |
[crayon-694968f415fb7670465641 inline="true" ]<span class="line"><span style="color: #9EFFFF">$els</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">$this</span><span style="color: #FF9D00">-></span><span style="color: #FAD000">element</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">$this</span><span style="color: #FF9D00">-></span><span style="color: #FAD000">using</span><span style="color: #E1EFFF">(</span><span style="color: #92FC79">'</span><span style="color: #A5FF90">accessibility id</span><span style="color: #92FC79">'</span><span style="color: #E1EFFF">)</span><span style="color: #FF9D00">-></span><span style="color: #FAD000">value</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">‘</span><span style="color: #9EFFFF">buttonStartWebviewCD</span><span style="color: #FFFFFF">’</span><span style="color: #E1EFFF">));</span></span> |
|
1 |

Figure-3: Index of class Name: android.widget.ImageButton
|
1 2 3 |
[crayon-694968f415fc0318171155 inline="true" ]<span class="line"><span style="color: #9EFFFF">List</span><span style="color: #FF9D00"><</span><span style="color: #9EFFFF">MobileElement</span><span style="color: #FF9D00">></span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">mobileElements</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">MobileElement</span><span style="color: #E1EFFF">)</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementsByClassName</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">android</span><span style="color: #E1EFFF">.</span><span style="color: #FFEE80">widget</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">ImageButton</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">);</span></span> <span class="line"></span> <span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">mobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">mobileElement</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">get</span><span style="color: #E1EFFF">(</span><span style="color: #FF628C">1</span><span style="color: #E1EFFF">);</span></span> |
|
1 |
Using Selenium Methods: NOTE: Actually You can get locators by two ways in Appium (for id, name, className, and xpath).
|
1 2 3 |
[crayon-694968f415fc8568030884 inline="true" ]<span class="line"><span style="color: #9EFFFF">WebElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">element</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElement</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">By</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">className</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">android</span><span style="color: #E1EFFF">.</span><span style="color: #FFEE80">widget</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">ImageButton</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">));</span></span> <span class="line"><span style="color: #B362FF; font-style: italic">// OR</span></span> <span class="line"><span style="color: #9EFFFF">WebElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">element</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementByClassName</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">android</span><span style="color: #E1EFFF">.</span><span style="color: #FFEE80">widget</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">ImageButton</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">);</span></span> |
|
1 |
Using Appium (Selenium Wrapper) Methods:
|
1 2 3 4 5 |
[crayon-694968f415fcf231536218 inline="true" ]<span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">mobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">MobileElement</span><span style="color: #E1EFFF">)</span></span> <span class="line"><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElement</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">By</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">className</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">android</span><span style="color: #E1EFFF">.</span><span style="color: #FFEE80">widget</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">ImageButton</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">));</span></span> <span class="line"><span style="color: #B362FF; font-style: italic">// OR</span></span> <span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">mobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">MobileElement</span><span style="color: #E1EFFF">)</span></span> <span class="line"><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementByClassName</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">android</span><span style="color: #E1EFFF">.</span><span style="color: #FFEE80">widget</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">ImageButton</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">);</span></span> |
|
1 |
In Mobile Application Automation id is are in form of Native context, it is not similar to Selenium WebDriver’s CSS id.
|
1 2 |
[crayon-694968f415fd6817121345 inline="true" ]<span class="line"><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementById</span><span style="color: #E1EFFF">(</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">IntegerA</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">);</span></span> <span class="line"><span style="color: #B362FF; font-style: italic">// ORdriver.findElementById("TextField1");</span></span> |
|
1 |

Figure-4:Locator Type:Id on iOS Sample Application.
You can use either that full string (ex. io.selendroid.testapp:id/startUserRegistration) or only <id-name> (startUserRegistration). So in the below code both options are valid
|
1 2 3 4 |
[crayon-694968f415fde278417553 inline="true" ]<span class="line"><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span></span> <span class="line"><span style="color: #FAD000">findElementById</span><span style="color: #E1EFFF">(</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">io.selendroid.testapp:id/startUserRegistration</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">);</span></span> <span class="line"><span style="color: #B362FF; font-style: italic">// OR</span></span> <span class="line"><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementById</span><span style="color: #E1EFFF">(</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">startUserRegistration</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">);</span></span> |

Figure-5:Locator Type:Id on Android Sample Application.
|
1 |
[crayon-694968f415fe3194237960 inline="true" ]<span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">element</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementByName</span><span style="color: #E1EFFF">(</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">IntegerA</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">);</span></span> |
|
1 |

Figure-6: Locator Type:Name on iOS Sample Application.


Figure-7: Locator Type:XPath on iOS Sample Application.
|
1 2 3 4 5 6 7 |
[crayon-694968f415feb322276826 inline="true" ]<span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">computeSumButton</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementByXPath</span></span> <span class="line"><span style="color: #E1EFFF">(</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">//XCUIElementTypeButton[@name=</span><span style="color: #92FC79">"</span><span style="color: #9EFFFF">ComputeSumButton</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">]</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">);</span></span> <span class="line"><span style="color: #B362FF; font-style: italic">// OR</span></span> <span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">computeSumButton</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementByXPath</span><span style="color: #E1EFFF">(</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">(//XCUIElementTypeButton)[1]</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">);</span></span> <span class="line"><span style="color: #B362FF; font-style: italic">// OR</span></span> <span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">computeSumButton</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementByXPath</span></span> <span class="line"><span style="color: #E1EFFF">(</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">//XCUIElementTypeButton[@label='Compute Sum']</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">);</span></span> |
|
1 |
You can learn more about how you can find the Xpath from: https://www.w3schools.com/xml/xpath_syntax.asp, and from this link, you can learn more about how you can properly use XPath with Appium here.
|
1 2 |
[crayon-694968f415ff3568822947 inline="true" ]<span class="line"><span style="color: #9EFFFF">String</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">base64Image</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #B362FF; font-style: italic">//Code which will to convert Image file to Base-64 String</span></span> <span class="line"><span style="color: #9EFFFF">WebElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">element</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElementByImage</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">base64Image</span><span style="color: #E1EFFF">);</span></span> |
|
1 |
|
1 2 3 |
[crayon-694968f415ffb981162962 inline="true" ]<span class="line"><span style="color: #9EFFFF">String</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">selector</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #92FC79">"</span><span style="color: #A5FF90">new UiSelector().text(“Cancel”)</span><span style="color: #EC3A37F5">)</span></span> <span class="line"><span style="color: #E1EFFF">.</span><span style="color: #FAD000">className</span><span style="color: #E1EFFF">(</span><span style="color: #FFFFFF">“</span><span style="color: #9EFFFF">android</span><span style="color: #E1EFFF">.</span><span style="color: #FFEE80">widget</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">Button</span><span style="color: #FFFFFF">”</span><span style="color: #E1EFFF">)</span><span style="color: #FFFFFF">)</span><span style="color: #92FC79">"</span><span style="color: #EC3A37F5">;</span></span> <span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">element</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">MobileElement</span><span style="color: #E1EFFF">)</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElement</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">MobileBy</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">AndroidUIAutomator</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">selector</span><span style="color: #E1EFFF">));</span></span> |
|
1 |
|
1 2 3 |
[crayon-694968f416002629818054 inline="true" ]<span class="line"><span style="color: #9EFFFF">String</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">selector</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #92FC79">"</span><span style="color: #A5FF90">**/XCUIElementTypeCell[`name BEGINSWITH </span><span style="color: #92FC79">"</span><span style="color: #9EFFFF">P</span><span style="color: #92FC79">"</span><span style="color: #A5FF90">`]/XCUIElementTypeButton[4]</span><span style="color: #92FC79">"</span><span style="color: #E1EFFF">;</span></span> <span class="line"><span style="color: #9EFFFF">MobileElement</span><span style="color: #FFFFFF"> </span><span style="color: #9EFFFF">element</span><span style="color: #FFFFFF"> </span><span style="color: #FF9D00">=</span><span style="color: #FFFFFF"> </span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">MobileElement</span><span style="color: #E1EFFF">)</span></span> <span class="line"><span style="color: #9EFFFF">driver</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">findElement</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">MobileBy</span><span style="color: #E1EFFF">.</span><span style="color: #FAD000">iOSClassChain</span><span style="color: #E1EFFF">(</span><span style="color: #9EFFFF">selector</span><span style="color: #E1EFFF">));</span></span> |
|
1 |
Hopefully, you’re starting to get an idea of when to use which locator. Don’t worry if it isn’t immediately clear. The more you start building Appium scripts and the more you keep reviewing these, it will become more intuitive.
Generally speaking you’ll find you should mostly likely use Accessibly Id and Id automation strategies. XPath is incredibly flexible as a fallback when no ID exists, but tends to be brittle. Your best option is to work with the developers to add unique IDs if they don’t exist. This will make for far more robust test scripts.
Interested in learning more? Demo Kobiton Today!
