My blog

Test Automation in React Native apps using Appium and WebdriverIO

Written by

admin

in

, , , , , ,

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

$ mkdir Demo_Appium_Project

  • Create a sample Appium Project
$ npm init
$ package name: (demo_appium_project) demo_appium_test
$ version: (1.0.0) 1.0.0
$ description: demo_appium_practice
$ entry point: (index.js) index.js
$ test command: "./node_modules/.bin/wdio wdio.conf.js"
$ git repository: 
$ keywords: 
$ author: Pushkar
$ license: (ISC) ISC

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

  • Install node packages
$ npm install

  • Install Appium through npm or as a standalone app.
$ npm install -g appium or npm install --save appium

$ npm install -g webdriverio or npm install --save-dev webdriverio @wdio/cli
  • Install Chai Assertion library 
$ npm install -g chai or npm install --save chai

Make sure you have following versions installed: 

$ node --version - v.14.17.0
$ npm --version - 7.17.0
$ appium --version - 1.21.0
$ java --version - java 16.0.1
$ allure --version - 2.14.0

WebdriverIO Configuration 

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

$ npx wdio config

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

$ Where is your automation backend located? - On my local machine
$ Which framework do you want to use? - mocha	
$ Do you want to use a compiler? No!
$ Where are your test specs located? - ./test/specs/**/*.js
$ Do you want WebdriverIO to autogenerate some test files? - Yes
$ Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? - No
$ Which reporter do you want to use? - Allure
$ Do you want to add a service to your test setup? - No
$ What is the base url? - http://localhost

This is how wdio.conf.js looks:

exports.config = {
 port: 4724,
 path: '/wd/hub/',
 runner: 'local',
 specs: ['./test/specs/*.js'],
 maxInstances: 1,
 capabilities: [
   {
     platformName: 'Android',
     platformVersion: '11',
     appPackage: 'com.facebook.katana',
     appActivity: 'com.facebook.katana.LoginActivity',
     automationName: 'UiAutomator2'
   }
 ],
 services: [
   [
     'appium',
     {
       args: {
         relaxedSecurity: true
        },
       command: 'appium'
     }
   ]
 ],
 logLevel: 'debug',
 bail: 0,
 baseUrl: 'http://localhost',
 waitforTimeout: 10000,
 connectionRetryTimeout: 90000,
 connectionRetryCount: 3,
 framework: 'mocha',
 reporters: [
   [
     'allure',
     {
       outputDir: 'allure-results',
       disableWebdriverStepsReporting: true,
       disableWebdriverScreenshotsReporting: false
     }
   ]
 ],
 mochaOpts: {
   ui: 'bdd',
   timeout: 60000
 },
 afterTest: function(test, context, { error, result, duration, passed, retries }) {
   if (!passed) {
       browser.takeScreenshot();
   }
 }
}
view raw

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

{
  "platformName": "IOS",
  "platformVersion": "14.5",
  "app": "/Your_PATH/wdioNativeDemoApp.app",
  "deviceName": "iPhone 12 Pro Max"
}

Launch the iOS Simulator from Xcode

Install Appium Doctor for iOS by using following command:

npm install -g appium-doctor

Fig:- Appium Doctor Installed

This is how package.json will look:

{
 "name": "demo_appium_test",
 "version": "1.0.0",
 "description": "demo_appium_practice",
 "main": "index.js",
 "scripts": {
   "test": "./node_modules/.bin/wdio wdio.conf.js"
 },
 "author": "Pushkar",
 "license": "ISC",
 "dependencies": {
   "@wdio/sync": "^7.7.4",
   "appium": "^1.21.0",
   "chai": "^4.3.4",
   "webdriverio": "^7.7.4"
 },
 "devDependencies": {
   "@wdio/allure-reporter": "^7.7.3",
   "@wdio/appium-service": "^7.7.3",
   "@wdio/cli": "^7.7.4",
   "@wdio/local-runner": "^7.7.4",
   "@wdio/mocha-framework": "^7.7.4",
   "@wdio/selenium-standalone-service": "^7.7.4"
 }
}

Steps to follow if npm legacy peer deeps problem occurred:

npm install --save --legacy-peer-deps
npm config set legacy-peer-deps true
npm i --legacy-peer-deps
npm config set legacy-peer-deps true
npm cache clean --force

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: 

vi ~/.bash_profile
Add following 
export ANDROID_HOME=/Users/pushkar/android-sdk 
export PATH=$PATH:$ANDROID_HOME/platform-tools 
export PATH=$PATH:$ANDROID_HOME/tools 
export PATH=$PATH:$ANDROID_HOME/tools/bin 
export PATH=$PATH:$ANDROID_HOME/emulator
Save ~/.bash_profile 
source ~/.bash_profile 
echo $ANDROID_HOME
/Users/pushkar/Library/Android/sdk

Follow these steps for setting up ANDROID_SDK_ROOT:

vi ~/.bash_profile
Add following 
export ANDROID_HOME=/Users/pushkar/Android/sdk
export ANDROID_SDK_ROOT=/Users/pushkar/Android/sdk
export ANDROID_AVD_HOME=/Users/pushkar/.android/avd
Save ~/.bash_profile 
source ~/.bash_profile 
echo $ANDROID_SDK_ROOT
/Users/pushkar/Library/Android/sdk

Follow these steps for setting up JAVA_HOME:

java --version
vi ~/.bash_profile
Add following 
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-16.0.1.jdk/Contents/Home.
echo $JAVA_HOME
/Library/Java/JavaVirtualMachines/jdk-16.0.1.jdk/Contents/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 

var expect = require('chai').expect

beforeEach(() => {
 driver.launchApp()
})

afterEach(() => {
 driver.closeApp()
})

describe('Verify Login Scenarios on Facebook React Native Mobile App', () => {
 it('User should be able to login using valid credentials to Facebook Mobile App', () => {   
   $(`~Username`).waitForDisplayed(20000)
   $(`~Username`).setValue('Valid-Email')
   $(`~Password`).waitForDisplayed(20000)
   $(`~Password`).setValue('Valid-Password')
   $('~Log In').click()
   browser.pause(10000)
 })

 it('User should not be able to login with invalid credentials to Facebook Mobile App', () => {
   $(`~Username`).waitForDisplayed(20000)
   $(`~Username`).setValue('Invalid-Email')
   $(`~Password`).waitForDisplayed(20000)
   $(`~Password`).setValue('Invalid-Password')   
   $('~Log In').click()
   $(
       '//android.widget.TextView[@resource-id="com.facebook.katana:id/(name removed)"]'
     )
     .waitForDisplayed(11000)
   const status = $(
     '//android.widget.TextView[@resource-id="com.facebook.katana:id/(name removed)"]'
   ).getText()
   expect(status).to.equal(
     `You Can't Use This Feature Right Now`     
   )
 })

 it('Test Case should Fail Because of Invalid Element', () => {
   $(`~Username`).waitForDisplayed(20000)
   $(`~Username`).setValue('Invalid-Email')
   $(`~Password`).waitForDisplayed(20000)
   $(`~Password`).setValue('Invalid-Pasword')   
   $('~Log In').click()
   $(
       '//android.widget.TextView[@resource-id="com.facebook.katana:id/(name removed)"'
     )
     .waitForDisplayed(11000)
   const status = $(
     '//android.widget.TextView[@resource-id="com.facebook.katana"'
   ).getText()
   expect(status).to.equal(
     `You Can't Use This Feature Right Now`     
   )
 })

})

How to Run Mobile Tests Scripts  

$ npm test 
This will create a Results folder with .xml report

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

$ npm install @wdio/allure-reporter --save-dev

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

reporters: [
   [
     'allure',
     {
       outputDir: 'allure-results',
       disableWebdriverStepsReporting: true,
       disableWebdriverScreenshotsReporting: false
     }
   ]
 ]

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

$ allure generate && allure open
Allure HTML report should be opened in browser

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

‍

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts