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-6935bc3099b3a072450856 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-6935bc3099b40285175647 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-6935bc3099b45174269115 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-6935bc3099b49157033870 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-6935bc3099b4e305207329 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-6935bc3099b52020135611 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-6935bc3099b58602876922 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-6935bc3099b5c339336858 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-6935bc3099b61413535552 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-6935bc3099b66606065871 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-6935bc3099b6a113091003 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-6935bc3099b6d025838860 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-6935bc3099b72984280868 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-6935bc3099b77220751604 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-6935bc3099b7b617956375 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-6935bc3099b80382232108 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!
