Nativescript-vue + Appium: configuration example

An example of Appium integration in a Nativescript-vue project, based on the work of @SvetoslavTsenov on his PR on nativescript-vue-ui-tests.

NOTE: This has not been tested on iOS, so feel free to complete the guide with your feedback. Also, it's possible (probable) that I get some things wrong in my understanding of the whole thing.

Pre-requisites

Your system should be configured to run nativescript apps in an Android emulator. But if you're here, that's probably already good.

Environment

I successfully managed to have this running with:

• node 8.11.3
• tns 4.2.4
• nativescript-vue 2.0.0
• appium 1.9.1 (installed globally): npm install -g appium
• nativescript-dev-appium 4.0.8: npm install -D nativescript-dev-appium

Configuration files:

e2e
├── config
│   ├── appium.capabilities.json  // Appium targets configurations (devices)
│   └── mocha.opts                // Mocha configuration
├── resources                     // Empty folder, I guess it should contain files used during tests
├── sample.tests.js               // The actual tests
└── setup.js                      // Additional testing configuration

appium.capabilities.json

It's a file you'll have to edit to fit your current setup. There are 3 sections in it for now:

{
  // This is a configuration section, you have to reference it when you 
  // run the suites: it tells Appium how the target is configured
  "android19": {
    "platformName": "Android",
    // This is important, it's the android version (not the API version)
    "platformVersion": "4.4",
    // This is the name of the virtual device, adapt it
    "deviceName": "Nexus_5X_API_19_x86",
    "noReset": false,
    // You should change this value to match the one in package.json
    // and app.gradle
    "appPackage": "org.nativescript.application",
    // I guess this is the main activity to open when launching the app
    "appActivity": "com.tns.NativeScriptActivity",
    // path to the apk to test. Leave it blank and appium will select
    // the first it finds.
    "app": ""
  },
  "ios-simulator103iPhone6": {
    "platformName": "iOS",
    "platformVersion": "10.3",
    "deviceName": "iPhone Simulator",
    "bundleId": "org.nativescript.application",
    "app": ""
  },
  "sim.iPhone8.iOS11.3": {
    "platformName": "iOS",
    "platformVersion": "11.3",
    "deviceName": "iPhone 8",
    "appiumVersion": "1.8.1",
    "bundleId": "org.nativescript.application",
    "noReset": true,
    "fullReset": false,
    "app": ""
  }
}

setup.js

This file contains two additional hooks to launch and stop Appium when the test suite is launched. I had to use them, but it may be unnecessary for some of you (feedback on this would be great)

Npm scripts

A few scripts are created in package.json to launch the suites:

• build.android: shortcut for tns build android --bundle
• build.ios: shortcut for tns build ios --bundle
• e2e: This one fails when launched alone, but is used as a shortcut in the last two.
• e2e.<variants>: Runs the tests on a freshly built apk

If you look at the e2e scripts, you'll notice they use the different configuration sections declared in appium.capabilities.json

If you have several devices to test your app, you may create one new script per configuration, or do something clever with parameters...

Usage

# Install dependencies
npm install

# Build an apk for production
tns build <platform> --bundle
# Or, with the shortcuts in package.json:
npm run build.<platform>

# Test the built file
# Your emulator/device should be accessible/running.
# Variant can be "android" and "ios" in ths example
npm run e2e.<variant>

# Build, watch for changes and run the application
tns run <platform> --bundle