React Native Automation Testing with Appium 2.0 — WebdriverIO

If you are looking for an article on setting up automation testing using Appium in React Native, I hope this article will help you.

Before diving into the setup, let’s talk a little bit about Appium … Appium is a tool used for automating applications across different platforms includes Android & iOS. It allows developers and testers to write automated tests using familiar programming languages such as JavaScript, and others. Appium works by interacting with the mobile application’s user interface elements, just like a real user would.

This enables testers to simulate user interactions and test the functionality and performance of mobile applications across various devices and operating systems.

https://reactnative.dev/docs/testing-overview

1. In your React Native project, create a folder called e2e, then navigate to the e2e directory

mkdir e2e
cd e2e

2. Setup Appium server in e2e:

We’ll set up Appium with Jest as our chosen testing framework. This combination offers the best approach for automating our mobile app testing tasks, providing both efficiency and ease of implementation.

Create a package.json file

{
  "name": "e2e",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.12.7",
    "@types/jest": "^29.5.12",
    "appium": "^2.0.1",
    "appium-doctor": "^1.16.2",
    "babel-jest": "^26.6.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "dotenv": "^8.2.0",
    "jest": "^29.7.0",
    "jest-extended": "^4.0.2",
    "prettier": "^2.2.1",
    "ts-node": "^10.9.2",
    "typescript": "^4.1.3",
    "webdriverio": "^8.35.1"
  },
  "scripts": {
    "test": "yarn node --experimental-vm-modules $(yarn bin jest)",
    "start": "appium",
    "driver:android": "appium driver install uiautomator2",
    "driver:ios": "appium driver install xcuitest",
    "doctor:android": "appium-doctor --android",
    "doctor:ios": "appium-doctor --ios"
  },
  "devDependencies": {
    "appium-uiautomator2-driver": "^3.0.5",
    "appium-xcuitest-driver": "^7.9.1"
  }
}

jest.setup.js

import "jest-extended";
import dotenv from "dotenv";

dotenv.config();

jest.setTimeout(900000);

jest.config.ts

import type { Config } from "jest";

const config: Config = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  testEnvironment: "node",
  moduleNameMapper: {
    "^@src/(.*)$": "<rootDir>/$1",
  },
};

export default config;

babel.config.js

module.exports = {
  presets: [["@babel/preset-env", { targets: "defaults" }], "@babel/preset-typescript"],
  plugins: [
    "@babel/plugin-transform-runtime",
    [
      "module-resolver",
      {
        root: ["."],
        extensions: [".ts", ".tsx", ".js", ".jsx", "json"],
        alias: {
          "@src": "./",
        },
      },
    ],
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./",
    "paths": {
      "@src/*": ["./*"]
    }
  }
}

__test__/login.spec.ts

import { join } from "path";

import { remote, RemoteOptions } from "webdriverio";

const iOS: RemoteOptions = {
  path: "/",
  hostname: "localhost", // default localhost
  port: 4723, // default 4723
  capabilities: {
    "appium:platformName": "iOS",
    "appium:automationName": "XCUITest", // driver
    "appium:deviceName": "TODO", // TODO: update your device name
    "appium:platformVersion": "TODO", // TODO: update platform version
    "appium:bundleId": "TODO", // TODO: update your app bundle id
    "appium:udid": "TODO", // TODO: update your device udid
    "appium:autoAcceptAlerts": true, // optional
    "appium:permissions": '{"com.multichainwallet": {"location": "yes"}}', // optional
  },
  logLevel: "silent",
};

const android: RemoteOptions = {
  path: "/",
  hostname: "localhost", // default localhost
  port: 4723, // default 4723
  capabilities: {
    "appium:automationName": "UiAutomator2", // driver
    "appium:platformName": "android",
    "appium:platformVersion": "TODO", // TODO: update android platform version
    "appium:deviceName": "TODO", // TODO: update android device name
    "appium:appPackage": "TODO", // TODO: update your appplication id
    "appium:appActivity": ".MainActivity",
    "appium:autoGrantPermissions": true, // optional
  },
};

let driver: WebdriverIO.Browser;

beforeEach(async () => {
  driver = await remote(iOS);
  console.log(driver);
});

afterEach(async () => {
  if (driver) {
    await driver.deleteSession();
  }
});

it("log in user", async () => {
  await driver.waitUntil(() => driver.$("~loginHeading").then((element) => element.isDisplayed()), {
    timeout: 90000,
  });

  await driver.$("~loginButton").click();
  expect(await driver.$("~loginEmailError").isDisplayed()).toBe(true);

  await driver.$("~loginEmail").setValue("ignite@infinite.red")
  await driver.$("~loginPassword").setValue("ign1teIsAwes0m3")

  await driver.$("~loginButton").click();
});

3. Install driver

• Appium UiAutomator2 Driver (appium-uiautomator2-driver): This driver is specifically designed for automating Android applications. It uses Google's UiAutomator2 library under the hood, which provides a robust and efficient way to interact with the user interface elements of Android applications.
• Appium XCUITest Driver (appium-xcuitest-driver): This driver is used for automating iOS applications. It leverages Apple's XCUITest framework, which is the recommended way for testing iOS apps. XCUITest provides APIs for interacting with UI elements, simulating user actions, and verifying the behavior of iOS applications.

yarn

yarn driver:ios

yarn driver:android

Check appium driver:

yarn start

4. Check appium configuration with appium-doctor

yarn doctor:android

yarn doctor:ios

5. Getting started

in root folder:
yarn start (start react native metro)

in e2e folder:

yarn start (start appium server)
yarn test (run e2e in __test__)

Why does the command start with yarn node — experimental-vm-modules $(yarn bin jest) ? Because it’s used to run Jest tests with Node.js while enabling the experimental VM modules feature

In another approach involving Appium Inspector, you can download the latest release here.

1. Capability Builder

2. Start Session

…. lean more