React Native and Appium Tutorial

Having a single code fundament generate native applications for both iOS and Android is not a small feat. By enable this, React Native has take intercrossed app development to the succeeding level of performance, stability, and integrating with operating system.

Understanding the React Native Framework

React Nativeis a Javascript-based framework used to build mobile applications. Building native apps from the same code and the ability to do it using Javascript receive made it extremely popular. Apart from this, businesses are attracted to the fact that they can save a lot of money by adopting this framework for app development.

The price reducing comes from the fact that a single set of developers can make cross-platform applications employ this framework. A second reason for its popularity stems from the fact that many job are using React JS for establish web application. Thus, port to React Native for mobile applications can be done with the like imagination pool.

Is it Difficult to Test React Native Apps?

Given that the fabric generates cross-platform apps, for each will promptly become a highly time-consuming task. In this compliments, can save both time and money in the longer run.

Given that the fabric is used to make multiple apps that must undergo the same set of tests numerous clip, it becomes highly good to automate the process. To do it more cost-effective, use the to quiz apps on a real gimmick cloud. This article will look into just that.

Prerequisites for React Native Testing habituate Appium

Here are the prerequisites for React Native Testing using Appium:

1. Install Appium via npm:

npm install -g appium

2. Mobile App Build

You will command the .apk (Android) or .ipa (iOS) file of your React Native app

Ensure the app is in debug fashion

3. Appium Client Library

Install Appium client bindings for the language you opt:

npm install @ wdio/cli @ wdio/appium-service

4. Platform-Specific Setup

For Android:

• Java Development Kit (JDK) installed
• Android Studio along with:
  • Android SDK
  • Android Virtual Devices (AVDs)
• Set surroundings variables:

JAVA_HOME, ANDROID_HOME, and update PATH with platform-tools

For iOS (macOS only):

• Xcode installed
• Xcode Command Line Tools
• CocoaPods (for dependency management)
• An Apple Developer report (for real device testing, you could likewise use BrowserStack for the like)

5. Device Access

• Physical devices, emulators/simulators or a cloud testing platform like BrowserStack.
• If testing BrowserStack, you ’ ll need:
  • BrowserStack Appium capabilities
  • App and gimmick selection via config

Getting Started with Appium and React Native to Automate Hybrid Apps

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

React Native applications are not completely aboriginal to their operating systems. Some aspects are aboriginal and others run on a web view. Appium understands the circumstance on which parts are aboriginal and which aren ’ t. Adding to that, it allows for both type of components to be operate using theSelenium WebDriver APIs.

1. Best Practices to Follow During App Development

To assure that there is consistency when testing both Android and iOS versions of the covering, it is a full practice to add both atestIDas well asAccessibiltyLabelproperty to every significant element to be test. React Native framework perform a lot of conversions to suit a particular OS. This also affect cases where the testID might not remain a component ’ s property. Thus, get both ensures that when the tester searches for a component using the UI component lookup that Appium provides, it works without errors. The following example give an mind of how to set up both thetestIDas well asAccessibilityLabelto UI components.

& lt; TouchableOpacity accessible= {true} testID = {“ ReactNative Appium ”} accessibilityLabel= '' Browser Stack '' onPress= {onPress} & gt; & lt; View style= {styles.button} & gt; & lt; Text style= {styles.buttonText} & gt; Start Test Automation & lt; /Text & gt; & lt; /View & gt; & lt; /TouchableOpacity & gt;

As shown above, one can also set theapproachableattribute totrueon the parent components so that Appium ’ s algorithms know not to exclude them in the component hierarchy.

When seek to do automated tests, one of the big challenges testers might front is with app license. Appium countenance exploiter to handle this well. Set theDesiredCapabilitiesto concede the required permissions. The codification below allows the app to yield all the permissions so that no pop up pass during the testing phase.

capabilities.setCapability (“ autoGrantPermissions ”, true);

2. Contexts in Appium for Hybrid Applications

When a examiner is ready to start writing automation test cases, one of the initiative things they want to do is modify the test ’ s setting. As mentioned before, Appium automatically cognise the aboriginal context from the web view contexts. Thus, when testing starts, one can get all the available contexts and select the one which they would desire to test upon.

When the tester enquire for context from Appium, it will return two contexts. The first one would be the aboriginal portion (called& # 8216; NATIVE_APP & # 8217;) and the second one would be the web view components (called& # 8216; WEBVIEW_1 & # 8217;). The following JavaScript codification snip demonstrate how one can set the context to web view to start testing the web-based UI components for a react native application.

Talk to an Expert

let contexts = await driver.contexts (); await driver.context (contexts [1]);

The codification snippet above first fetches both the contexts and then sets the circumstance to web view. Henceforth, any method telephone aimed towards testing the app will be applied only to the web view components.

3. Automation Testing for intercrossed Android and iOS apps

Though the trial cases remain the same for Android and iOS, the setup varies for these two control systems.

For quiz Android applications, one can use the chromedriver that get out of the box with Appium. This can be used for testing on aper as well as on real devices.

While testing on iOS devices, the approach varies based on the mark gimmick case. The access for try on simulator versus try on real iOS devices dissent with compliments to connectivity. While testing on simulator, WkWebView and UIWebView elements can be automate by Appium. However, while testing on real devices, the device ask to be unite via a USB cable. Apart from that, theios-webkit-debugger-proxytool need to be habituate for running automation tests.

4. Setting up Appium for React Native application

There are 3 major step that will help set up Appium on React Native applications:

1. Installing Appium on the application & # 8211; the Yarn package manager can be used to install the appium package in the application and also verify installation using the appium-doctor tool.
2. Setting up the test server & # 8211; This is where the tester provide the parameter to run the server such as the port and host.
3. Set up the test and device conformation & # 8211; This step center on providing the coveted capabilities discussed earlier in the clause.

With the windup of these steps, quizzer would be capable to write and run automation test cases. For detailed stairs, read thisAppium set up guidebook.

A sample Test Case

With the understanding of Appium being employ with the React Native fabric, let ’ s look at a complete test example written in JavaScript.

// assuming we have an initialized ` driver ` object for an app driver .contexts () .then (office (contexts) {// get list of available views. Returns array: [`` NATIVE_APP '', '' WEBVIEW_1 ''] return driver.context (contexts [1]); // choose the webview setting}) // do some web testing .elementsByCss ('.green_button ') .click () .context ('NATIVE_APP ') // leave webview context // do more native stuff here if we want .quit () // stop WebDriver

In the codification above, firstly, one gets the web view context. Then, it finds a button factor use a CSS attribute and performs a click operation on the push. With the completion of the click operation, the code performs a context switch from the web view to the aboriginal content. This now allows for performing tests on aboriginal components of the covering. Finally, the code quits the exam and releases the context.

Test Automation in React Native apps using Appium and WebdriverIO

Combining Appium and WebdriverIO can be a knock-down way for automating React Native app testing. Appium facilitates cross-platform UI mechanization for Android and iOS. WebdriverIO, on the other hand, offers a full-bodied, JavaScript-based framework with built-in Appium support. This makes writing and lead end-to-end trial easy using a single, consistent setup.

Here is how you automate tests for React Native apps using Appium and WebdriverIO:

Step 1:Install dependencies:

npm init -y npm install @ wdio/cli @ wdio/local-runner @ wdio/appium-service appium -- save-dev

Step 2: Run WebdriverIO shape wizard:

npx wdio config

Step 3: Update wdio.conf.js with Appium capabilities:

capabilities: [{platformName: `` Android '', deviceName: `` Android Emulator '', app: `` /path/to/your/app.apk '', automationName: `` UiAutomator2 ''}]

Step 4: Write the test

describe ('Login Screen ', () = & gt; {it ('should display login push ', async () = & gt; {const loginBtn = expect $ ('~login-button '); look (await loginBtn.isDisplayed ()) .toBe (true);});});

Step 5: Run the Test

npx wdio run wdio.conf.js

UI Automation Testing for React Native Apps on Real Devices

React Native back Android and iOS, which means UI Testing should basically cover both platforms. To control a seamless and consistent end-user experience, it is invariably a good practice to take into account while testing.

Hence, try on existent Android and iOS devices will make certain that the user experience of the React Native App continue top-notch across the devices and platforms. Testing on BrowserStack ’ s will also help identify glitch that can not be traced on aper or simulators and might hamper the exploiter experience.

This real gimmick cloud provides G of existent mobile devices (Android and iOS) so that you can run app trial (both manual and automated) in a real-world environment. In other words, all test control exactly how an app would act when used by people in the real world.

Automation Testing for React Native Apps Using Appium

If someone has tested apps before, they might feature used the or the. Handling two separate testing framework just works with true native development and that is not what React Native is for.

Appium is a that supports React Native-based apps out of the box. Apart from the only exception of client-side testing on Android, Appium can single-handedly work very well for testing both Android and iOS covering. Along with the hurrying of test execution, Appium also cater a full-bodied and easy interface to pen effective test cases.

Our discusses how Appium connects to Android and iOS module and components. The connections are cover by Appium to bring in some standardizations. However, this doesn ’ t mean that the test example will e'er be the same. Based on which app is being quiz, one would hold to arouse the corresponding faculty.

Let ’ s look at automation testing of an Android app built using the React Native Framework.

Conclusion

Appium is a robust framework for. The article explains that this fabric is capable of running test event speedily and dependably. It provides rich lineament for testing web view components and native components severally. Most significantly, it is capable of testing both Android and iOS applications that the React Native framework generates with a individual code base.

Useful Resources for React Native

Related Guides