June 15, 2020 Jonny Steiner

Start Automating your mobile tests with Cucumber and Appium

Share this knowledge!

Introduction
Cucumber
How does Cucumber work?
Appium
Getting Started with Cucumber and Appium Example
Prerequisites and Installations
Creating the First Test
Executing the test

Introduction

This tutorial helps Test Engineers start automating their Mobile tests using the Cucumber framework and Appium libraries.

Before we cover the details of using the Cucumber and Appium frameworks here is a short introduction.

Cucumber

Cucumber is one of the more widely used BDD (Behavior Driven Development testing frameworks. Behavior Driven Development gives us an opportunity to create test scripts from both the developer and the customer perspective.

Cucumber based tests are designed as,

  • Features – Test Scenarios described in plain English.
  • Steps – Test code corresponding to the features.

Cucumber Features and Steps adhere to the Given, When and Then scheme of Testing, where

  • Given – Describes the Inputs and initial state of the scenario for testing.
  • When – Describes the action or operation performed
  • Then – Outcome of the action and Result assertion.

Here is an example of a Feature file.

Feature - Login Action
Scenario - Successful Login
Given - Input the Credentials
When - Login Action Performed
Then - Successfully Logged in

 

Note: Cucumber also includes a Before and After directive which enables testers to move to the Initial state of the test scenario and the state before the test scenario respectively.

Since the Cucumber framework is driven by Features which are described in plain English, it can be understood and implemented quickly by all the stakeholders involved.

Cucumber Steps contains the core programming logic.

Here is a concise Javascript example:

“Use script”
.
.
Given(/^Input the Credentials$/, async () => {
.
.
}

When(/^Click the login button$/, async () => {  
.
.
}
Then(/^Successfully Logged in$/, async () => {
.
.
}

 

How does Cucumber work?

Cucumber tests need to be executed by providing a Feature file (file containing the feature description) and corresponding Step file (file containing the core logic)

Example:

node_modules/.bin/cucumber-js .\Features\example.feature -r .\Steps\example.js

Cucumber matches the string provided in “Given” in the Features file and “Given” provided in the JavaScript file.

Note: Notice in the above example how the Given, When, Then format in the Features file matches the Steps JavaScript file.

Appium

Appium is an Open Source, Cross-platform utility for testing Native, Web, and Hybrid applications on iOS, and Android Mobile Operating System platforms.

Based on Client-Server Architecture, Appium Clients send automation commands to the Appium Server which translates it to platform-specific commands and executes on the devices.

Appium Clients are basically libraries exposed by the Appium framework for Mobile Automation used by test engineers. It supports various languages such as Java, JavaScript, and Python.

Getting Started with Cucumber and Appium Example

This example is based on the following technologies and platforms.

  1. Windows Platform for development
  2. Android as a device OS
  3. JavaScript as the programming language
  4. Visual Studio as development IDE

Prerequisites and Installations

NodeJS and Appium Desktop

  1. Download Node
  2. Double click the downloaded file and follow the steps in the wizard to finish the installation of Node.
  3. Download the Appium Desktop
  4. Launch the Installer of the platform of your choice and follow the setup wizard.
  5. Run the Appium Desktop installed in the machine, this also launches the Appium Server.

Visual Studio Code

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

Android Studio and ADB

You will also have to install Android Studio/Java because you will have to use the ADB utility for android device recognition.

Download the Android Studio Software and refer to the official page of Android Studio for installation.

Device Recognition

Connecting the Mobile device to the PC using USB cable and enabling the developer mode/USB debugging in the android device.

Download Sample Android Application

Download sample Android application called Eribank using the link https://experitest.s3.amazonaws.com/eribank.apk

With all of the steps above completed, we are ready for the Cucumber and Appium example.

Creating the First Test

Step 1. Add Workspace Folder to in Visual Studio

visual studio start

Step 2: Go to the Terminal and Create Package.json

visual studio new terminal

Note: Package.json contains the metadata of a NodeJS/JS project.

In the terminal execute,

npm init

Specify all of the necessary information for the project as shown below.

visual studio

This will create a package.json, modification, and save it to specify the dependencies for the project.

“Dependencies”: {
"selenium-webdriver": "4.0.0-alpha.7",
"cucumber": "6.0.5",
"chai": "4.2.0",
"assert": "2.0.0"
}

cucumber json

Note: We use the WebDriverJS framework which uses Appium.

Step 3: Resolve Dependencies

Once completed, execute the following command in the terminal.

npm install

This downloads the dependencies and creates a node_modules directory (where the dependencies are downloaded) in the workspace.

Step 4: Create Features and Steps directory

cucumber steps

Step 5: Create Features file for Cucumber framework

Create the following file (EribankLogin.feature) in .\Features\EribankLogin directory

Feature: Login to Eribank Application

@AddScenario
Scenario: Login to Eribank Application
Given Input Credentials
When Click the login button
Then Check Login


As already described in the Cucumber section we define here in plain text:

Feature

Scenario

Given , When and Then.

Step 5: Create a JavaScript file for the corresponding Cucumber Features file.

We now create the core implementation using Appium/WebDriverJS in a JavaScript file. Create file EribankLogin.js in .\Steps folder.

until = wd.until;

const { Before, Given, When, Then , After } = require('cucumber')
var assert = require('assert');


let driver;

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

// Before function for driver initialization
Before( {timeout: 6000 * 10000}, async function () {
    console.log('Before: Connecting to Device.....');  
    driver = await new wd.Builder().usingServer("http://localhost:4723/wd/hub").withCapabilities(desiredCaps).build();
    console.log('');  
    
})

// Given Function of Cucumber , with Creds
Given(/^Input Credentials$/, {timeout: 6000 * 1000}, async () => {
    try {
        
        console.log('Then: Provide application credentials... Start');   
        
        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();
        } 

    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");
    console.log('Then: Provide application credentials...  End');    
    console.log(' ');  
        
     } catch (error) {    
    }  
});

// When function for Action implementation      
When(/^Click the login button$/, async () => {  
    console.log('When: Click the login button ... Start');      
    const loginElement = await driver.findElement(By.xpath("//*[@text='Login']"));
    await loginElement.click();    
    console.log('When: Click the login button... End');    
    console.log('');  
}); 

// Check the Result in Then function
Then(/^Check Login$/, async () => {
    console.log('Then: Checking if it succeeds... Start');    

    // Check for the logout button
    await driver.wait(until.elementLocated(By.xpath("//*[@text='Logout']"), 1000));
    var logoutElements = await driver.findElements(By.xpath("//*[@text='Logout']"));
    assert.notEqual(logoutElements.length, 0);
    console.log('Then: Checking if login succeeds... End');  
    
});

// After function to release the Driver
After(async function() {
    
    console.log('Disconnecting.....');  
    console.log('');  
    await driver.quit();
  })

Executing the test

Start the Appium Desktop and click the Start Server button, this will start the server’s specified host and port.

appium login

Note: Before executing the code make sure the device is recognized by your PC. We mentioned this step in the Prerequisites and Installation section under Device Recognition.

Now execute the code in Visual Studio Code. The Terminal prompt uses the following command.

>> node_modules/.bin/cucumber-js .\Features\EribankLogin\ -r .\Steps\EribankLogin.js

cucumber appium

Now that we have shown you how Cucumber and Appium work together we suggest you try it for yourself. The full code for the example project can be downloaded from the git repo Cucumber and Appium Example.

Guy ArieliCTO

 

Share this knowledge!