April 23, 2020 Jonny Steiner

Follow this Guide to set up Appium Automation using JavaScript

Share this knowledge!

Getting Started
Prerequisite Installations
Creating the First Test using WebDriverJS
Getting Started with Visual Studio Code
Authoring automation test using WebDriverJS
Executing the Test

Getting Started

This tutorial provides instructions to create a basic Appium Automation test for mobile using JavaScript as the programming language.

We will develop this example project in Visual Studio Code IDE using the WebDriverJS library.

The full code for the example project below can be downloaded from the git repo First Appium Automation Test using JavaScript.

Prerequisite Installations

Firstly, this section mentions software installations needed to develop and execute basic tests using Javascript.

NodeJS

  1. Download NodeJS.
  2. Double click the downloaded file and follow the steps in the wizard to finish the installation of Node JS.

Appium

Install Appium and Appium Desktop, refer to the official page of Appium for instructions.

Visual Studio Code

Download and Install by referring to the official page of Visual Studio Code.

Note: You will also have to install Android Studio/Java because you will have to use adb utility for android device recognition.

Creating the First Test using WebDriverJS

Secondly, This section provides starter information to,

  1. Create a project in Visual Studio Code (VSC)
  2. Authoring automation test using WebDriverJS

Getting Started with Visual Studio Code

Visual Studio Code is a free, lightweight, and most importantly powerful code editor for building modern applications. We will use it to develop our First test in Javascript using the WebDriverJS library.

Step 1: Add an empty workspace folder in the Visual Studio Code.

Appium Automation - visual studio

This will open an explorer, select an empty folder to be the project home. The workspace folder will be visible in the editor as shown below.

Appium Automation - editor

Step 2: Create a new terminal by navigating in VSC menu, Terminal > New Terminal

This will create a terminal window at the bottom of the editor. This is an integrated terminal to run operating system commands and useful to set-up the runtime and development environment.

Step 3: Create package.json

Now, we create package.json, this is basically metadata for the project. This file generally provides information to NodeJS to identify the project and handle dependencies.

Type the following command in the terminal.

npm init

Input the details of the project like project name, description, etc and type yes.

Appium Automation - start

Add the dependency module in the package.json file, which is, in this case, WebDriverJS i.e. selenium-webdriver module.

Appium Automation - json

package.json
{
  "name": "webdriverjsproject",
  "version": "1.0.0",
  "description": "webdriverjs",
  "main": "index.js",
  "dependencies": {
    "selenium-webdriver": "4.0.0-alpha.7"
  },
  "author": "First test author",
  "license": "ISC"
}

Step 4: Update the project workspace with dependencies

Once you have created the package.json, you will have to update the workspace with all the dependencies. Although this project has only one dependency i.e WebDriverJS, all the circular dependencies download to the workspace.

Type the following command in the terminal.

npm install

Meanwhile, the node_modules directory has all the package dependencies.

Appium Automation - node

Authoring automation test using WebDriverJS

Step 1: Create a new file JS file

Select the workspace folder, right-click and select New File. This will allow you to name a file. Please name it as webdriverjsTest.js.

Appium Automation - explorer

Step 2: Create the Test

Add Import

The require keyword makes sure that the script needs the selenium-webdriver.

"use strict";

var wd = require("selenium-webdriver"),
    By = wd.By,
    until = wd.until;

Setup Desired Capabilities in the code

Now we need to create the desired capabilities which are passed to driver initialization. Desired capabilities describe the type of session and properties of the connection to the Appium Automation Server.

// Setting Desired Capabilities.
var desiredCaps = {
    platformName: "Android",
    deviceName: "a3ae1c63",
    app: "c:\\eribank.apk",
    appPackage: "com.experitest.ExperiBank",
    appActivity: ".LoginActivity",
    browserName: '',
       
};

There are three mandatory parameters above

  1. platformName – Specifies the operating system of device
  2. app – Specifies the path of the application which needs to be tested.
  3. deviceName – Device Identifier of the device. This is accomplished by following instructions/running adb devices command.

Test method

WebDriverJS is an asynchronous library, this means that once you execute a command it does not block to complete it but rather moves to the next line. There are different strategies that WebDriverJS provides like Promise Manager, async/await. For this example, we will use an async/await strategy. For more information on different strategies please refer to WebDriverJS documentation.

We will now define an async function with await commands.

async function testEribank() {
//Initiating the Driver
    let driver = await new wd.Builder().usingServer("http://localhost:4723/wd/hub").withCapabilities(desiredCaps).build();
    
    var okElements = await driver.findElements(By.xpath("//*[@text='OK']"));

    if ( okElements.length > 0) {
        var okElement = await driver.findElement(By.xpath("//*[@text='OK']"));   
        await okElement.click();
    } 

// Locating the element 
    const userElement = await driver.findElement(By.xpath("//*[@text='Username']"));
// Automation command.
    await userElement.sendKeys("company");
    const passwordElement = await driver.findElement(By.xpath("//*[@text='Password']"));
    await passwordElement.sendKeys("company");
    const loginElement = await driver.findElement(By.xpath("//*[@text='Login']"));
    await loginElement.click();    
    
    await driver.quit();
    }

In general, it contains the way to locate UI elements of the application and perform an action on the elements.

The final code will look like this,

Appium Automation - final code

The full code for the example project can be downloaded from the git repo First Appium Automation Test using JavaScript.

Executing the Test

To conclude, let’s run the test. Here is how.

1. Connect the Android device to the PC and make sure debugging is enabled.

2. Run the Appium Automation Server by launching Appium Desktop and clicking Start Server.Appium Automation -

3. Select the webdriverjsTest.js in Visual Studio Code and Click Run Without Debugging in the menu to run the test.

Appium Automation - Run without debugging

Guy ArieliCTO

 

Share this knowledge!