Appium Locators + React Native + Android

Overview

Nowadays need of testing for mobile applications have been rapidly grown. It is the key of sure success to behave an application as expected in production avoiding small mistakes and breaking changes without push lot of efforts to test the whole application every time.

We have multiple ways to perform the testing. Automate testing is another approach to perform testing.

Appium is an open source test automation framework for use with Native (Android / iOS), React-Native mobile applications. It supports other platforms too.

Objective

In order to give support for automation testing, we need to add some attributes to our code. These attributes are used to select the specific components to perform automation testing. Appium specifies them as Locators or Selectors.

But little confusions are:

  • Which selector is mapped with which attribute?
  • How to assign an id (It is a kind of test-id) to each component in the way that Appium could identify each component to perform the automation?
  • XPath is a generic selector available for each application in Appium but it is not recommended. What else then?

I will explain this down the line.

All Locator strategies supported by Appium

  1. ID
  2. Accessibility ID
  3. Class Name
  4. Xpath
  5. Android UI Automator
  6. Android View Tag (Espresso Only)
  7. iOS UI Automation

Note: We will focus on React Native implementation which means only the top 4 from above list. Let’s check one-by-one

1. ID

It assumes each element/component has a unique ID assigned to it that helps in identifying and interacting with it.

Android:- We assign android:id that is resource-id for a component in XML that can be used in Appium as an ID

iOS: name is used for iOS.

React Native: testID is used in React Native for Both iOS & android platforms. It is mapped to resource-id in android if we prefix testID value with bundleIdentifier like `${bundleIdentifier}:id/${testIdD}`. It is mapped to the name in iOS.

import { Platform } from ‘react-native’;
import { getBundleId } from ‘react-native-device-info’;
const appIdentifier = getBundleId();export function getTestID(testID) {
// React Native → testID: `com.app.appname:id/${testID}`
if (!testID) { return undefined; } const prefix = `${appIdentifier}:id/`;
const hasPrefix = testID.startsWith(prefix);
return Platform.select({
android: !hasPrefix ? `${prefix}${testID}` : testID,
ios: hasPrefix ? testID.slice(prefix.length) : testID,
});
}

2. Accessibility ID

As Accessibility ID can be used for cross-platform automation, the code becomes reusable.

Android: The value of Accessibility is the same as the value of the attribute content-desc.

iOS: The default Accessibility ID is set to the name of the UI element.

React-Native: Set accessible true, and accessibilityLabel value that is mapped to content-desc in Android. Set testID value that is mapped to name in iOS.

import {Platform} from 'react-native';export default function createAccessibilityID(testID) {
return Platform.OS === 'android'
? {accessible: true, accessibilityLabel: testID}
: {testID: id};
}

3. ClassName

It is a very generic selector and It is the name of the class of a component.

Android: android.widget.TextView, etc.

iOS: UIAButton, UIARadioButton, etc.

React Native: Not applicable as react native views are natively backed which means each view is going to convert into a native class component at the end.

The little problem here is we can not easily identify a specific instance of a class component just by the className. Better if we are combining text with the className to identify the element as ClassName is the same for all similar kinds of components.

4. XPath

Xpath analyzes the XML structure of the app and then locates the element. Xpath should only be used when there is no ID, Name, or accessibility ID assigned to a specific UI element.

Problems while using XPath:

  • It is a very long path for each component from root to specific component.
  • It is not fixed and stable. This is because it might change after the next iterative development process.
  • It is not recommended by Appium.

5 Android UI Automator (Only Android)

This locator is Android-specific. If anyone uses the UI Automator API, in particular, the UISelector Class is used to search for specific elements with the help of text and class names. It is an enhancement of using className selector only.

String selector = 
new UiSelector().text('Cancel')).className('android.widget.Button');
MobileElement element = (MobileElement)driver.findElement(MobileBy.AndroidUIAutomator(selector));

6 Android View Tag (Espresso Only, Android Specific)

Similar to Android UI Automator, this is also an Android platform-specific locator.

7. iOS UIAutomation (iOS only)

This is an iOS platform-specific locator.

Conclusion

As per the above description, ID and Accessibility ID selectors are very useful.

Happy Learning !!!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store