Start Automating your mobile tests with Cucumber and Appium

 

• 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.

[javascript] Feature – Login Action Scenario – Successful Login Given – Input the Credentials When – Login Action Performed Then – Successfully Logged in [/javascript]

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:

[javascript] “Use script” . . Given(/^Input the Credentials$/, async () => { . . } When(/^Click the login button$/, async () => { . . } Then(/^Successfully Logged in$/, async () => { . . } [/javascript]

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: [javascript]node_modules/.bin/cucumber-js .Featuresexample.feature -r .Stepsexample.js[/javascript] 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, for in which we have a studio: Appium Studio.

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

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

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

In the terminal execute,

[javascript]npm init[/javascript]

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

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

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

Note: We use the WebDriverJS framework which uses Appium.

Step 3: Resolve Dependencies

Once completed, execute the following command in the terminal.

[javascript]npm install[/javascript]

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

Step 5: Create Features file for Cucumber framework

Create the following file (EribankLogin.feature) in .FeaturesEribankLogin directory

[javascript] Feature: Login to Eribank Application @AddScenario Scenario: Login to Eribank Application Given Input Credentials When Click the login button Then Check Login [/javascript]

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.

[javascript] 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(); }) [/javascript]

Executing the test

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

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.

[javascript]>> node_modules/.bin/cucumber-js .FeaturesEribankLogin -r .StepsEribankLogin.js[/javascript]

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 Arieli – CTO