React Native and Appium Tutorial

Having a single code base generate native applications for both iOS and Android is not a small feat. By enabling this, React Native has taken hybrid app development to the next level of performance, stability, and integration with operating systems. On the other hand, it raises several concerns on the testing front. This article will explore the basics of automation testing for React Native apps using Appium framework.

The React Native Framework

React Native is a Javascript-based framework used to build mobile applications. Building native apps from the same code and the ability to do it using Javascript have made it extremely popular. Apart from this, businesses are attracted to the fact that they can save a lot of money by adopting this framework for app development.

Image Credit

The cost reduction comes from the fact that a single set of developers can build cross-platform applications using this framework. A second reason for its popularity stems from the fact that many businesses are using React JS for building web applications. Thus, porting to React Native for mobile applications can be done with the same resource pool.

Is it Difficult to Test React Native Apps?

Given that the framework generates cross-platform apps, manual testing for each will quickly become a highly time-consuming task. In this regard, automation testing can save both time and money in the longer run.

Given that the framework is used to create multiple apps that must undergo the same set of tests numerous times, it becomes highly beneficial to automate the process. To make it more cost-effective, use the Appium framework to test apps on a real device cloud. This article will look into just that.

UI Automation Testing for React Native Apps on Real Devices

React Native supports Android and iOS, which means UI Testing should essentially cover both platforms. To ensure a seamless and consistent end-user experience, it is always a best practice to take real user conditions into account while testing.

Hence, testing on real Android and iOS devices will make certain that the user experience of the React Native App remains top-notch across the devices and platforms. Testing on BrowserStack’s real device cloud will also help identify bugs that cannot be traced on emulators or simulators and might hamper the user experience.

This real device cloud provides thousands of real mobile devices (Android and iOS) so that you can run app tests (both manual and automated) in a real-world environment. In other words, all tests verify exactly how an app would act when used by people in the real world.

Test React Native Apps on Real Mobile Devices

 Automation Testing for React Native Apps Using Appium

If someone has tested apps before, they might have used the Espresso Framework for Android or the XCTest for iOS applications. Handling two separate testing frameworks only works with true native development and that is not what React Native is for.

Appium is a mobile application testing framework that supports React Native-based apps out of the box. Apart from the only exception of client-side testing on Android, Appium can single-handedly work very well for testing both Android and iOS applications. Along with the speed of test execution, Appium also provides a robust and easy interface to write effective test cases.

Our Getting Started guide on Appium discusses how Appium connects to Android and iOS modules and components. The connections are handled by Appium to bring in some standardizations. However, this doesn’t mean that the test cases will always be the same. Based on which app is being tested, one would have to invoke the corresponding modules.

Let’s look at automation testing of an Android app built using the React Native Framework.

Getting Started with Appium and React Native to Automate Hybrid Apps

React Native applications are not completely native to their operating systems. Some aspects are native and others run on a web view. Appium understands the context on which parts are native and which aren’t. Adding to that, it allows for both types of components to be controlled using the Selenium WebDriver APIs.

1. Best Practices to Follow During App Development

To ensure that there is consistency when testing both Android and iOS versions of the application, it is a good practice to add both a testID as well as AccessibiltyLabel attribute to every important component to be tested. React Native framework performs a lot of conversions to suit a particular OS. This also involves cases where the testID might not remain a component’s attribute. Thus, having both ensures that when the tester searches for a component using the UI component search that Appium provides, it works without errors. The following example gives an idea of how to set up both the testID as well as AccessibilityLabel to UI components.

<TouchableOpacity
accessible={true}
testID = {“ReactNative Appium”}
accessibilityLabel="Browser Stack"
onPress={onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Start Test Automation</Text>
</View>
</TouchableOpacity>

As shown above, one can also set the accessible attribute to true on the parent components so that Appium’s algorithms know not to exclude them in the component hierarchy.

When trying to perform automated tests, one of the biggest challenges testers might face is with app permissions. Appium allows users to handle this easily. Set the DesiredCapabilities to grant the required permissions. The code below allows the app to grant all the permissions so that no pop up occurs during the testing phase.

capabilities.setCapability(“autoGrantPermissions”, true);

2. Contexts in Appium for Hybrid Applications

When a tester is ready to start writing automation test cases, one of the first things they need to do is change the test’s context. As mentioned before, Appium automatically knows the native context from the web view contexts. Thus, when testing starts, one can fetch all the available contexts and select the one which they would want to test upon.

When the tester asks for context from Appium, it will return two contexts. The first one would be the native components (called ‘NATIVE_APP’) and the second one would be the web view components (called ‘WEBVIEW_1’). The following JavaScript code snippet shows how one can set the context to web view to start testing the web-based UI components for a react native application.

Talk to an Expert

let contexts = await driver.contexts();
await driver.context(contexts[1]);

The code snippet above first fetches both the contexts and then sets the context to web view. Henceforth, any method calls aimed towards testing the app will be applied only to the web view components.

3. Automation Testing for hybrid Android and iOS apps

Though the test cases remain the same for Android and iOS, the setup varies for these two operating systems.

For testing Android applications, one can use the chromedriver that comes out of the box with Appium. This can be used for testing on emulators as well as on real devices.

While testing on iOS devices, the approach varies based on the target device type. The approach for testing on simulators versus testing on real iOS devices differ with regard to connectivity. While testing on simulators, WkWebView and UIWebView elements can be automated by Appium. However, while testing on real devices, the device needs to be connected via a USB cable. Apart from that, the ios-webkit-debugger-proxy tool needs to be used for running automation tests.

4. Setting up Appium for React Native application

There are 3 major steps that will help set up Appium on React Native applications:

1. Installing Appium on the application – the Yarn package manager can be used to install the appium package in the application and also verify installation using the appium-doctor tool.
2. Setting up the test server – This is where the tester provides the parameters to run the server such as the port and host.
3. Set up the test and device configurations – This step focuses on providing the desired capabilities discussed earlier in the article.

With the completion of these steps, testers would be able to write and run automation test cases. For detailed steps, read this Appium set up guide.

A sample Test Case

With the understanding of Appium being used with the React Native framework, let’s look at a complete test example written in JavaScript.

// assuming we have an initialized `driver` object for an app
driver
.contexts().then(function (contexts) { // get list of available views. Returns array: ["NATIVE_APP","WEBVIEW_1"]
return driver.context(contexts[1]); // choose the webview context
})
// do some web testing
.elementsByCss('.green_button').click()

.context('NATIVE_APP') // leave webview context
// do more native stuff here if we want
.quit() // stop WebDriver

Run Appium Tests on Real Devices for Free

In the code above, firstly, one gets the web view context. Then, it finds a button component using a CSS attribute and performs a click operation on the button. With the completion of the click operation, the code performs a context switch from the web view to the native content. This now allows for performing tests on native components of the application. Finally, the code quits the test and releases the context.

Conclusion

Appium is a robust framework for UI automation testing. The article explains that this framework is capable of running test cases quickly and reliably. It provides rich features for testing web view components and native components independently. Most importantly, it is capable of testing both Android and iOS applications that the React Native framework generates with a single code base.