July 16, 2020

React Native Testing With Appium

Mobile Application Testing

Learn about React Native apps, and get expert advice on how to do React Native testing with Appium.

What Is React Native?

React Native is an open source mobile application framework used to develop applications for web and mobile apps, including Android and iOS.

Developing a mobile app for iOS and Android can be accomplished either using Native Swift and Java or by using hybrid frameworks. Native frameworks give you maximum flexibility and exceptional user experience but require a high overhead of developing and maintaining multiple apps.

Hybrid frameworks such as Cordova wrap an HTML5 WebView within a native component. The benefit is a single codebase, but the trade-off is compromising user experience in terms of the way the components behave and the accessibility to various events.

React Native is supposed to give you the benefit of both worlds: a single codebase without compromising the user experience. Its code is interpreted on the fly inside of a native mobile app, which creates native UI components and responses.

Developing React Native Apps

The end-user experience of a React Native app is in theory exactly the same as any native mobile app built with the native SDKs. But the developer experience is that of a web developer, writing in React-flavored JavaScript, and using JSX along with a CSS equivalent for structure and styling.

To take that JS code and run it on an Android or iOS operating system, the React Native app must go through a framework called JavaScriptCore. JavaScriptCore is an execution engine — the same as in Safari Browser — which runs the React Native code.

In order for the JSCore to run the React Native code, it needs to communicate with the Android/iOS native SDKs. It does so by using the React Native bridge. The React Native bridge essentially connects the JSCore execution and matches it with the Native SDKs.

Testing React Native Apps Using Appium

There are two main challenges in using Appium to test React Native applications.

1. Execution Time

Appium is based on a client-server architecture. At its core is an Appium server that accepts API calls, executes them on mobile devices, and sends the response back to the client. Response time for Appium API calls can be extremely long. The delays are caused by the UI state from the React application’s complexity. We need to manage active routes, selected tabs, spinners, pagination controls, and so on. While this is not well documented, we suspect architecture of JavaScriptCore and React Native bridge adds significant delays.

2. Locators

Since React Native apps are executed inside JavaScriptCore, in most cases the WebDriver will not be exposed to the IDs unless the developers have plugged in special-purpose test IDs/accessibility IDs. Most applications don’t include those IDs by default — so locating the elements is challenging. The example below demonstrates the object tree of a React Native application. Notice the number of ViewGroups and the lack of IDs.

What Is Detox and Why Use It?

Detox is a gray-box open source UI test automation framework for JavaScript applications developed by Wix. Detox, unlike Appium, is packed into the app so it will have insight into the application it is testing. In other words, it knows it’s in React Native and knows how to start up the application as a child of the Detox process — and also how to reload it if needed after each test.

The Challenges of Using Detox:

You need the developers support for installing and maintaining Detox.
Setting up your testing environment — testing can be done locally which is limited in scale and maintenance, or through the Perfecto cloud solution.
Community — Apple and Google are constantly adding accessibility options to their OS as well as hardware. Detox is fully dependent on the community to keep up with these enhancements.

React Native Testing With Appium

To overcome the challenges mentioned above and make Appium work well with React Native applications, my company 21 implemented a number of changes:

Execution Time

To expedite the process, we combined multiple solutions:

Changing the API response format — XML requires parsing and traversing which is slower than direct object access using self.useJSONSource=True in the desired capabilities. Direct object pulling reduced execution time by ~20%.
Predicates — Using logic to find the element in question using complex queries via Android UISelector and iOS Predicate String.
Command Batching — By writing sophisticated scripts that combine multiple API calls into one executable Appium action, we optimized the number of calls, reducing 10-20% of the execution time.

public void testLoginWithExecute() { driver.executeDriverScript(

 "await driver.setImplicitTimeout(1000);\n"

+ "await (await driver.$('~Login')).click();\n" 

+ "await (await driver.$('~username')).setValue(hello-world);\n" 

+ "await (await driver.$('~password')).setValue(pass);\n" 

+ "await (await driver.$('~loginButton)).click() }

Locators — We developed a complex algorithmic locators system that can ingest multiple locators without knowing whether these are resource IDs, class, accessibility, test IDs, or some other unique locator. Since React applications by default have no unique IDs, we added positioning information to the global locator system, including the conversion from one screen resolution to another. Finally, we added neighboring elements and context.

Think about a registration form with three TextEdit elements located next to each other. The way to find which is a first name and which is a last name with no unique IDs is by using the context and the labels next to each. Here’s more details about the locators engine.

Bottom Line

In summary, we used multiple safeguards that all work in conjunction with and agnostic to the framework to produce stable results. You can now upload your React Native application to 21, author tests in minutes, even without IDs, and execute them on simulators or Perfecto’s real devices with a single click.

Get started with a free trial of Perfecto. Perfecto is a test automation platform for web and mobile apps. It integrates with tools you’re already using, like Appium and 21.

Perfecto gives you: