Thanks! We'll be in touch in the next 12 hours
Oops! Something went wrong while submitting the form.

Test Automation in React Native apps using Appium and WebdriverIO

React Native provides a mobile app development experience without sacrificing user experience or visual performance. And when it comes to mobile app UI testing, Appium is a great way to test indigenous React Native apps out of the box. Creating native apps from the same code and being able to do it using JavaScript has made Appium popular. Apart from this, businesses are attracted by the fact that they can save a lot of money by using this application development framework.

In this blog, we are going to cover how to add automated tests for React native apps using Appium & WebdriverIO with a Node.js framework. 

What are React Native Apps

React Native is an open-source framework for building Android and iOS apps using React and local app capabilities. With React Native, you can use JavaScript to access the APIs on your platform and define the look and behavior of your UI using React components: lots of usable, non-compact code. In the development of Android and iOS apps, “viewing” is the basic building block of a UI: this small rectangular object on the screen can be used to display text, photos, or user input. Even the smallest detail of an app, such as a text line or a button, is a kind of view. Some views may contain other views.

What is Appium

Appium is an open-source tool for traditional automation, web, and hybrid apps on iOS, Android, and Windows desktop mobile platforms. Indigenous apps are those written using iOS and Android. Mobile web applications are accessed using a mobile browser (Appium supports Safari for iOS apps and Chrome or the built-in 'Browser' for Android apps). Hybrid apps have a wrapper around "web view"—a traditional controller that allows you to interact with web content. Projects like Apache Cordova make it easy to build applications using web technology and integrate it into a traditional wrapper, creating a hybrid application.

Importantly, Appium is "cross-platform", allowing you to write tests against multiple platforms (iOS, Android), using the same API. This enables code usage between iOS, Android, and Windows test suites. It runs on iOS and Android applications using the WebDriver protocol.

Fig:- Appium Architecture

What is WebDriverIO

WebdriverIO is a next-gen browser and Node.js automated mobile testing framework. It allows you to customize any application written with modern web frameworks for mobile devices or browsers, such as React, Angular, Polymeror, and Vue.js.

WebdriverIO is a widely used test automation framework in JavaScript. It has various features like it supports many reports and services, Test Frameworks, and WDIO CLI Test Runners

The following are examples of supported services:

  • Appium Service
  • Devtools Service
  • Firefox Profile Service
  • Selenium Standalone Service
  • Shared Store Service
  • Static Server Service
  • ChromeDriver Service
  • Report Portal Service
  • Docker Service

The followings are supported by the test framework:

  • Mocha
  • Jasmine
  • Cucumber 
Fig:- WebdriverIO Architecture

Key features of Appium & WebdriverIO


  • Does not require application source code or library
  • Provides a strong and active community
  • Has multi-platform support, i.e., it can run the same test cases on multiple platforms
  • Allows the parallel execution of test scripts
  • In Appium, a small change does not require reinstallation of the application
  • Supports various languages like C#, Python, Java, Ruby, PHP, JavaScript with node.js, and many others that have a Selenium client library


  • Extendable
  • Compatible
  • Feature-rich 
  • Supports modern web and mobile frameworks
  • Runs automation tests both for web applications as well as native mobile apps.
  • Simple and easy syntax
  • Integrates tests to third-party tools such as Appium
  • 'Wdio setup wizard' makes the setup simple and easy
  • Integrated test runner

Installation & Configuration


  • Create a sample Appium Project


This will also create a package.json file for test settings and project dependencies.

  • Install node packages


  • Install Appium through npm or as a standalone app.


  • Install WebdriverIO


  • Install Chai Assertion library 


Make sure you have following versions installed: 


WebdriverIO Configuration 

The web driver configuration file must be created to apply the configuration during the test Generate command below project:


With the following series of questions, install the required dependencies,


This is how wdio.conf.js looks:


For iOS Automation, just add the following capabilities in wdio.conf.js & the Appium Configuration: 


Launch the iOS Simulator from Xcode

Install Appium Doctor for iOS by using following command:


Fig:- Appium Doctor Installed

This is how package.json will look:


Steps to follow if npm legacy peer deeps problem occurred:


This is how the folder structure will look in Appium with the WebDriverIO Framework:

Fig:- Appium Framework Outline

Step-by-Step Configuration of Android Emulator using Android Studio

Fig:- Android Studio Launch

Fig:- Android Studio AVD Manager

Fig:- Create Virtual Device

Fig:- Choose a device Definition

Fig:- Select system image

Fig:- License Agreement


Fig:- Component Installer

Fig:- System Image Download

Fig:- Configuration Verification

Fig:- Virtual Device Listing

Appium Desktop Configuration

Fig:- Appium Desktop Launch


Follow these steps for setting up ANDROID_HOME: 


Follow these steps for setting up ANDROID_SDK_ROOT:


Follow these steps for setting up JAVA_HOME:


Fig:- Environment Variables in Appium

Fig:- Appium Server Starts 

Fig:- Appium Start Inspector Session

Fig:- Inspector Session Configurations

Note - Make sure you need to install the app from Google Play Store. 

Fig:- Android Emulator Launch  

Fig: - Android Emulator with Facebook React Native Mobile App

Fig:- Success of Appium with Emulator


Fig:- Locating Elements using Appium Inspector

How to write E2E React Native Mobile App Tests 

Fig:- Test Suite Structure of Mocha

Here is an example of how to write E2E test in Appium:

Positive Testing Scenario - Validate Login & Nav Bar

  1. Open Facebook React Native App 
  2. Enter valid email and password
  3. Click on Login
  4. Users should be able to login into Facebook 

Negative Testing Scenario - Invalid Login

  1. Open Facebook React Native App
  2. Enter invalid email and password 
  3. Click on login 
  4. Users should not be able to login after receiving an “Incorrect Password” message popup

Negative Testing Scenario - Invalid Element

  1. Open Facebook React Native App 
  2. Enter invalid email and  password 
  3. Click on login 
  4. Provide invalid element to capture message

Make sure test_script should be under test/specs folder 


How to Run Mobile Tests Scripts  



The following are examples of the supported reporters:

  • Allure Reporter
  • Concise Reporter
  • Dot Reporter
  • JUnit Reporter
  • Spec Reporter
  • Sumologic Reporter
  • Report Portal Reporter
  • Video Reporter
  • HTML Reporter
  • JSON Reporter
  • Mochawesome Reporter
  • Timeline Reporter
  • CucumberJS JSON Reporter

Here, we are using Allure Reporting. Allure Reporting in WebdriverIO is a plugin to create Allure Test Reports.

The easiest way is to keep @wdio/allure-reporter as a devDependency in your package.json with


Reporter options can be specified in the wdio.conf.js configuration file 


To convert Allure .xml report to .html report, run the following command: 


This is what Allure Reports look like: 

Fig:- Allure Report Overview 

Fig:- Allure Categories

Fig:- Allure Suites

Fig: - Allure Graphs

Fig:- Allure Timeline

Fig:- Allure Behaviors

Fig:- Allure Packages

Limitations with Appium & WebDriverIO


  • Android versions lower than 4.2 are not supported for testing
  • Limited support for hybrid app testing
  • Doesn't support image comparison.


  • It has a custom implementation
  • It can be used for automating AngularJS apps, but it is not as customized as Protractor.


In the QA and developer ecosystem, using Appium to test React native applications is common. Appium makes it easy to record test cases on both Android and iOS platforms while working with React Native. Selenium, a basic web developer, acts as a bridge between Appium and mobile platforms for delivery and testing. Appium is a solid framework for automatic UI testing. This article explains that this framework is capable of conducting test cases quickly and reliably. It provides rich features for web browsing features and features independently. Most importantly, it can test both Android and iOS apps developed by the React Native framework on the basis of a single code.

Related Articles -


Did you like the blog? If yes, we're sure you'll also like to work with the people who write them - our best-in-class engineering team.

We're looking for talented developers who are passionate about new emerging technologies. If that's you, get in touch with us.

Explore current openings