.svg)
.svg)
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.
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.
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.
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:
The followings are supported by the test framework:
| $ mkdir Demo_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.
| $ npm install |
| $ npm install -g appium or npm install --save appium |
| $ npm install -g webdriverio or npm install --save-dev webdriverio @wdio/cli |
| $ 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 |
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(); | |
| } | |
| } | |
| } |
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 |
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:
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 |
Note - Make sure you need to install the app from Google Play Store.
Positive Testing Scenario - Validate Login & Nav Bar
Negative Testing Scenario - Invalid Login
Negative Testing Scenario - Invalid Element
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` | |
| ) | |
| }) | |
| }) |
| $ npm test | |
| This will create a Results folder with .xml report |
The following are examples of the supported reporters:
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:
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.
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.
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.
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.
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.
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:
The followings are supported by the test framework:
| $ mkdir Demo_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.
| $ npm install |
| $ npm install -g appium or npm install --save appium |
| $ npm install -g webdriverio or npm install --save-dev webdriverio @wdio/cli |
| $ 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 |
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(); | |
| } | |
| } | |
| } |
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 |
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:
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 |
Note - Make sure you need to install the app from Google Play Store.
Positive Testing Scenario - Validate Login & Nav Bar
Negative Testing Scenario - Invalid Login
Negative Testing Scenario - Invalid Element
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` | |
| ) | |
| }) | |
| }) |
| $ npm test | |
| This will create a Results folder with .xml report |
The following are examples of the supported reporters:
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:
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.
.svg)
.svg)
