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.

Understanding 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.

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.

Prerequisites for React Native Testing using Appium

Here are the prerequisites for React Native Testing using Appium:

1. Install Appium via npm:

npm install -g appium

2. Mobile App Build

You will require the .apk (Android) or .ipa (iOS) file of your React Native app

Ensure the app is in debug mode

3. Appium Client Library

Install Appium client bindings for the language you prefer:

npm install @wdio/cli @wdio/appium-service

4. Platform-Specific Setup

For Android:

• Java Development Kit (JDK) installed
• Android Studio along with:
  • Android SDK
  • Android Virtual Devices (AVDs)
• Set environment variables:

JAVA_HOME, ANDROID_HOME, and update PATH with platform-tools

For iOS (macOS only):

• Xcode installed
• Xcode Command Line Tools
• CocoaPods (for dependency management)
• An Apple Developer account (for real device testing, you could also use BrowserStack for the same)

Try BrowserStack for Free

5. Device Access

• Physical devices, emulators/simulators or a cloud testing platform like BrowserStack.
• If testing BrowserStack, you’ll need:
  • BrowserStack Appium capabilities
  • App and device selection via config

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.

Test Automation in React Native apps using Appium and WebdriverIO

Combining Appium and WebdriverIO can be a powerful way for automating React Native app testing. Appium facilitates cross-platform UI automation for Android and iOS. WebdriverIO, on the other hand, offers a robust, JavaScript-based framework with built-in Appium support. This makes writing and running end-to-end tests easy using a single, consistent setup.

Here is how you automate tests for React Native apps using Appium and WebdriverIO:

Step 1: Install dependencies:

npm init -y

npm install @wdio/cli @wdio/local-runner @wdio/appium-service appium --save-dev

Step 2: Run WebdriverIO configuration wizard:

npx wdio config

Step 3: Update wdio.conf.js with Appium capabilities:

capabilities: [{

  platformName: "Android",

  deviceName: "Android Emulator",

  app: "/path/to/your/app.apk",

  automationName: "UiAutomator2"

}]

Step 4: Write the test

describe('Login Screen', () => {

  it('should display login button', async () => {

    const loginBtn = await $('~login-button');

    expect(await loginBtn.isDisplayed()).toBe(true);

  });

});

Step 5: Run the Test

npx wdio run wdio.conf.js

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.

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.

Useful Resources for React Native

• What is React Native? (The Essential Guide)
• Replace Android Emulator to test React Native
• End-to-End React Native Testing
• Top 5 React Native UI Components
• React vs React Native: When to use which?
• How to make React Native App Responsive?
• UI Testing of React Native Apps
• Test React Native Apps with Cypress
• React Native and Appium Tutorial
• How to Test React Native Apps on iOS and Android Devices