Setting up automation testing — Using React-Native (0.59) + Appium (1.13.0)

This is a quick guide to get started with automation testing of React Native apps using Appium (for now only Android is covered).

After spending a lot of time looking at several Medium stories, StackOverflow posts, one of personal blog, and even the official documentation, I realized that they were either dated (as of May, 2019) or not comprehensive enough. So, I decided to write simple and brief quick-setup guide that could help someone in my situation to get React-Native + Appium setup, up and running.

For now I’ll only cover setting this up for Android but I’ll revise this story soon, to include iOS as well.

So, here’s our to-do list, in order:

1. Installing Appium
2. Configure WebDriverIO framework
3. Making the App test-ready
4. Create and run a sample test
5. Running test on simulator

So, without further ado, let’s begin the process.

1. Getting Appium

a. Installing through npm/yarn

Installing appium through yarn or npm

b. Using standalone application (Recommended)

To use standalone application, download the build suitable for your platform :

appium/appium-desktop

(use .AppImage for Ubuntu or any other GNU/Linux based distribution, .dmg for macOS and .exe for Microsoft Windows)

For Windows

Launch the executable and that all. I have not tested Appium on Windows yet, but once I do that, I’ll make sure to update this guide accordingly.

For macOS

Nothing different here, just mount the dmg image and drag the Appium.app onto your Applications, as usual. From there you can launch it.

For AppImage (on Ubuntu or any other GNU/Linux based distro)

You’ll need to first mark the file as executable and then run it. (Assuming that you’ve downloaded it in your ~/Downloads folder, we’ll execute the following commands)

Marking the Appium AppImage executable

And now you should see the an alert asking if you’d want to install it. If you press [ YES ], then it’ll be installed (as in you’d find it among other installed apps) otherwise if you press [ NO ], then it’ll run it without installing.

2. Configure WebDriverIO framework

To get started you can either use boilerplate provided by WebDriverIO and go through it (it also covers Web and Sauce Labs along with Android & iOS): https://github.com/webdriverio/appium-boilerplate/

Or, you can follow the steps below to prepare a basic test project.

Let’s start off by creating a folder for our test project. We’re keeping things separate but you can include tests within the React-Native project, if you want everything in one place.

Also, we’re going to install @wdio/cli (you can also install it globally). WebDriveIO is the test framework for node.js that supports Appium.

Now that we’ve wdio installed, we can use it to generate the config file. To do that we’ll execute the wdio executable from within./node_modules/.bin/wdio

wdio configuration generation

It’ll ask you a series of questions. If you don’t know what all of this is, I’ve provided the screenshot above that lists the choices that I picked for this sample.

When you’re done, there will be a file called wdio.config.js . But it lacks a few things at the moment. We need to add our Android simulator in this configuration file and define the port at which our Appium server will be running at, defaults to 4723.

But before we do that, we need to do something. Launch the Android simulator that you use and make sure that USB Debugging is enabled in Developer Options .

Configure on-device developer options | Android Developers

Now back to the config, let’s open up wdio.config.js in the editor of your choice and search for capabilities key. You’ll notice that it currently contains some browser configuration that we do not need. So just remove that and replace it with the configuration suitable for Android simulator.

const { join } = require("path"); // import join path
// Rest of the configuration
capabilities : [{
  automationName: "UiAutomator2",
  deviceName: "Custom Phone_1", // This is name of your Simulator
  platformName: "Android",
  platformVersion: "5.1", // Android version of Simulator
  orientation: "PORTRAIT",
  maxInstances: 1,
  app: join(process.cwd(), "/app-release.apk"),
  // absolute path to the apk goes here ^, I'm keeping it at
  // root directory of this test project.
  noReset: true,
  newCommandTimeout: 240
}],
port : 4723
// Rest of the config

I’ve added comments on what you should change in the config. But here’s a short what’s-what:

• deviceName This should be same as your device/simulator name that you see in the list of simulators where you run it from.

• platformVersion This should be the Android version you’re using.
• app This should be the absolute path to the APK that will be installed and tested.

And just make sure to add port as a separate key and keep it’s value 4723, unless your Appium server is going to run on some other port than the default.

That’s it for the configuration. Phew.

3. Making the App test-ready

To make components test-able, we will need to add two properties onto them, testID and accessibilityLabel . These properties will help in identifying and locating these components on screen when they appear, so that our tests can interact with them.

Here’s a mini application that we’ll be testing

Remember, the aim for this story is not to write complex tests; rather, we just need everything to start working with one another.

In the example above, the app-root will be used to determine when this component is mounted, so it’s applied to the outer-most component; and then we can look for increase-count button, upon which we will simulate a click.

4. Create and run a sample test

Now to create a test, go to the directory that you’ve specified for tests during the initial configuration. For my configuration, I’ve specified ./tests/*.js in tests (default is ./test/specs/**/*.js).

Let’s create a file within the folder tests and call it sample.test.js.

Now that we’ve got this ready. The only thing left now is to the test if everything plays out as we’re expecting it to be.

5. Running test on simulator

Start the simulator that you’ve mentioned in the config file above and make sure the APK is at the path mentioned in the config as well. Also, make sure that USB Debugging is enabled on the device.

— Start the Appium Server

If you’ve installed Appium through npm/yarn then you can just type appium in terminal.

Appium CLI installed through npm/yarn

Or, if you’ve downloaded the build, then launch it directly from within Applications (if you’ve installed it), or from the directory where it was downloaded.

Launching Appium from Spotlight on macOS

Here’s the Appium window that you’ll be presented with.

To begin, you need to press [ Start Server ]. At this point the window will start showing the server logs.

— Run the test

The only thing we need to do now is run the tests. You can do that by typing:

Launching tests through wdio cli tool

Now your test should run and you should see something like this.

Running test on an Android simulator

PRO Tip: For future you should setup a script in package.json to run tests more easily by just typing npm run test-android from your test-project’s root directory.

"scripts" : {
  ..
  "test-android" : "./node_modules/.bin/wdio wdio.conf.js"
}

Conclusion

I hope that was detailed enough to get your started for running Appium automation on Android for applications build with React-Native. If something doesn’t works out as expected, or if you notice an error with this story, please post a comment to let me know so that I can fix it.