Skip to main content
Start Automating your mobile tests with Cucumber and Appium
Last Updated Jun 14, 2020 — Continuous Testing Expert

Start Automating your mobile tests with Cucumber and Appium

Continuous Testing
IntroductionCucumberHow does Cucumber work?AppiumGetting Started with Cucumber and Appium ExamplePrerequisites and InstallationsCreating the First TestExecuting 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 .\Features\example.feature -r .\Steps\example.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.

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,

[javascript]npm init[/javascript]

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.

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

cucumber json

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

cucumber steps

Step 5: Create Features file for Cucumber framework

Create the following file (EribankLogin.feature) in .\Features\EribankLogin 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.

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.

[javascript]>> node_modules/.bin/cucumber-js .\Features\EribankLogin\ -r .\Steps\EribankLogin.js[/javascript]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 Arieli - CTO

 

More from the Blog

View more
Apr 12, 2021

These blockers most commonly stop people from learning test automation

Continuous Testing
We are often asked if it is hard to become a test automation engineer. ...
Read More
Apr 05, 2021

Build better apps with a low-code development approach

Continuous Testing
From being an option, DevOps is quickly turning into a necessity for m ...
Read More
Mar 29, 2021

Every web and mobile app tester needs these 7 surprising software testing skills

Continuous Testing
If you look at a job listing for QA or test automation professionals, ...
Read More
Mar 24, 2021

Paving the way for better mobile and web application testing orchestration

Continuous Testing
Keeping applications up to date and ensuring they work with all of the ...
Read More
Contact Us