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.

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 
  

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

• Install the latest stable version of Android Studio from https://developer.android.com/studio
• Install android-platform-tools from CLI
• Install JDK latest stable version from here https://www.oracle.com/java/technologies/javase-jdk16-downloads.html
• Download the latest stable version of VS Code from https://code.visualstudio.com/download 
• Install the latest version of Allure for Report Generation from https://docs.qameta.io/allure/
• Download and install the latest LTS Node.js - https://nodejs.org/en/download
• Open Terminal 
• Create Project Directory 

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

• Appium Desktop version can be downloaded from here https://github.com/appium/appium-desktop/releases/

• 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

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:

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

‍

‍

‍Appium Desktop Configuration

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

‍

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

How to write E2E React Native Mobile App Tests 

‍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: 

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

• UI Automation and API Testing with Cypress - A Step-by-step Guide
• Building a scalable API testing framework with Jest and SuperTest
• Automation testing with Nightwatch JS and Cucumber: Everything you need to know
• API testing using Postman and Newman

References 

• https://appium.io/
• https://webdriver.io/
• https://reactnative.dev/
• https://nodejs.org/en/

‍