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

Appium

  • 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

WebdriverIO 

  • 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

CODE: https://gist.github.com/velotiotech/232857efb3f01b0772556c3cd8f8b3d5.js

  • Create a sample Appium Project

CODE: https://gist.github.com/velotiotech/42474bae248feb5735f69bcdb40707be.js

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

  • Install node packages

CODE: https://gist.github.com/velotiotech/ed667b8d70194aecb2aaa36dc945c684.js

  • Install Appium through npm or as a standalone app.

CODE: https://gist.github.com/velotiotech/b3dde53ed6208aa2a5e11adfcf63ac49.js

  • Install WebdriverIO

CODE: https://gist.github.com/velotiotech/caa3b3afe0673d08655b02dc00bbc37f.js 

  • Install Chai Assertion library 

CODE: https://gist.github.com/velotiotech/c3e09217db3ad3fcbcaeda38e3a80d82.js

Make sure you have following versions installed: 

CODE: https://gist.github.com/velotiotech/9fd8166244d4e4600650033e01051258.js

WebdriverIO Configuration 

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

CODE: https://gist.github.com/velotiotech/45ba2b521c131892e74847a5a14e5b12.js

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

CODE: https://gist.github.com/velotiotech/29e237c6623311d08a31ba4f09520f44.js

This is how wdio.conf.js looks:

CODE: https://gist.github.com/velotiotech/233e610d598764be4961967980cd33cf.js

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

CODE: https://gist.github.com/velotiotech/e8cd38553cfffe14e0963a6a4feb2b19.js 

Launch the iOS Simulator from Xcode

Install Appium Doctor for iOS by using following command:

CODE: https://gist.github.com/velotiotech/b566310e0000d749d0bfce781c6bea22.js

Fig:- Appium Doctor Installed

This is how package.json will look:

CODE: https://gist.github.com/velotiotech/5c099fe65ba1076392efc6748decd543.js

Steps to follow if npm legacy peer deeps problem occurred:

CODE: https://gist.github.com/velotiotech/3489412fc2eb9eb52f5ca20b47849e02.js

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

Setup of ANDROID_HOME + ANDROID_SDK_ROOT &  JAVA_HOME

Follow these steps for setting up ANDROID_HOME: 

CODE: https://gist.github.com/velotiotech/c3ad2a8ad4244fb349572d97bd98d37d.js

Follow these steps for setting up ANDROID_SDK_ROOT:

CODE: https://gist.github.com/velotiotech/14a80fa28a9d35d760c1262a196a14cd.js

Follow these steps for setting up JAVA_HOME:

CODE: https://gist.github.com/velotiotech/6eaf5de5c05feaad93bce52f5f95f2fb.js

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 

CODE: https://gist.github.com/velotiotech/2ffab550d180fa67087bcd48a954c92f.js

How to Run Mobile Tests Scripts  

CODE: https://gist.github.com/velotiotech/47577adff8f35c77909675d4f1ca69da.js

Reporting

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

CODE: https://gist.github.com/velotiotech/fcb8d50fb0917131d37043ae0a47f5f2.js

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

CODE: https://gist.github.com/velotiotech/8452ebf877b690e9710349ffa2a21124.js

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

CODE: https://gist.github.com/velotiotech/d66b1c41c194518e42338d6f5985b470.js

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

Appium 

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

WebdriverIO

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

Conclusion

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 -

References 

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