Test Automation using Cucumber, JavaScript, and Webdriver.IO

by Harishchandra Ekal | Oct 11, 2023 | Blog

Introduction:

In this blog, we have created the WebdriverIO framework, which will help to run test cases on web applications on different browsers. WebdriverIO is a popular open-source test automation framework for Node.js.Creating a test automation framework using Cucumber, JavaScript, and WebdriverIO offers several benefits that can streamline your testing process and improve the efficiency and maintainability of your automated tests. Here’s why you might want to consider using this combination:

1. BDD Approach with Cucumber:

Cucumber enables Behavior-Driven Development (BDD), allowing you to write test scenarios in a human-readable format.

2. JavaScript Language:

JavaScript is a widely used programming language for web development, making it accessible to many developers.

• Blog
• DevOps

3. WebdriverIO as Test Automation Framework:

WebdriverIO is a popular JavaScript-based WebDriver framework that simplifies interactions with browsers and elements on web pages. It also provides a variety of built-in commands for browser automation, making test script development more efficient.WebdriverIO supports multiple testing frameworks, including Mocha and Jasmine, which can be integrated with Cucumber for BDD.

4. Cross-Browser Testing:

With WebdriverIO, you can quickly run your tests across different browsers and browser versions. This ensures that your application functions correctly and consistently across various browser environments.

5. Reusability and Maintainability:

The combination of Cucumber and WebdriverIO promotes the creation of reusable step definitions. Moreover, this modularity makes it easier to maintain test scripts and reduces duplication of code.

6.  Parallel Execution:

WebdriverIO supports parallel test execution, which can significantly reduce the overall test execution time.

7. Community and Support:

Both Cucumber and WebdriverIO have active communities, which means you can find a wealth of resources, tutorials, and plugins to enhance your automation efforts.

Let’s see how webdriverIO works and Its process:

Pre-requisites:

1. Make sure you have Node.js installed on your system. You can download and install it from the official website: https://nodejs.org/en/

2. Open your terminal or command prompt and create a new directory for your WebdriverIO project or else create a folder wherever you want & open it in VSCode

3.  VSCode

Initialize a new npm project by running the following command:  “npm init wdio .” This will create WebdriverIO packages and their installation.

Once you execute that command you will get the following message:

“Need to install the following packages:

  create-wdio@8.2.3

Ok to proceed? (y)”

If you proceed by pressing “y”, you will receive a list of instructions on how to generate the framework. You can follow these instructions to create the desired WebdriverIO framework.

Once you have completed the framework generation process, it will create a package.json file that will serve as a record of your project’s dependencies. This file will help you manage and keep track of the dependencies required for your project.

{
  "dependencies": {
    "@wdio/selenium-standalone-service": "^8.3.2"
  },
  "devDependencies": {
    "@wdio/cli": "^8.3.10",
    "@wdio/cucumber-framework": "^8.3.0",
    "@wdio/local-runner": "^8.3.10",
    "@wdio/spec-reporter": "^8.3.0",
    "chromedriver": "^110.0.0",
    "wdio-chromedriver-service": "^8.1.1"
  },
  "scripts": {
    "wdio": "wdio run ./wdio.conf.js"
  }
}

“Install WebdriverIO and its CLI tool by running the following command:

“npm install webdriverio @wdio/cli –save-dev”.

This will install WebdriverIO and its CLI tool as dev dependencies and save them in your package.json file.”

Package-json:

package.json is a file used in Node.js projects that contains metadata and configuration information for the project, as well as a list of dependencies and dependencies required for the project to run. It is located in the root directory of the project and is used by package managers such as npm (Node Package Manager) to install and manage dependencies.

Wdio.conf.js: 

This file contains the configuration settings that define how the test automation framework runs and interacts with the web application being tested. It has Capabilities, Specs, Framework, Reporter, Hooks, Services, etc.

exports.config = {
    runner: 'local',
    specs: [
      './features/**/*.feature'
    ],
    // Patterns to exclude.
    exclude: [
        // 'path/to/excluded/files'
    ],
    maxInstances: 10,
    capabilities: [{
        maxInstances: 5,
        browserName: 'chrome',
        acceptInsecureCerts: true
    }],
acceptInsecureCerts: true   
  }],
    logLevel: 'info',
    bail: 0,
    baseUrl: 'https://www.calculator.net/',
    seleniumLoginUrl: 'https://demo.guru99.com/test/login.html',
    waitforTimeout: 10000,
    connectionRetryTimeout: 120000,
    connectionRetryCount: 3,
    services: ['chromedriver'],
    framework: 'cucumber',
    reporters: ['spec'],
    seleniumAddress: 'http://localhost:4444/wd/hub',
    cucumberOpts: {
        require: ['./features/step-definitions/*.js'],
        backtrace: false,
        requireModule: [],
        dryRun: false,
        failFast: false,
        snippets: true,
        source: true,
        strict: false,
        tagExpression: '',
        timeout: 60000,
        ignoreUndefinedDefinitions: false
    },
}

So here we have selected the “cucumber” framework which will help create test cases in BDD format. Before we go into framework details, you all should know that all WebdriverIO commands are asynchronous and need to be properly handled using async/await.

The Page Object Model (POM) is a popular design pattern used in software testing to represent web pages as objects and simplify the process of automated testing. The POM structure usually includes a “pageobjects” folder, which contains classes or files that represent individual pages on a website or application. These page object classes or files encapsulate the elements and actions related to a specific page, making writing and maintaining automated tests easier. By using the POM, testers can create a more organized and maintainable framework for their test automation efforts.

1)    Features

2)    Steps

3)    Pages

Features:

This folder contains another two folders, i.e., pageobjects, Step-definitions, and features files. The “feature” folder is typically used in the context of behavior-driven development (BDD) frameworks such as Cucumber, which uses a natural language syntax to describe test scenarios. The “feature” folder houses files that define the scenarios or features to be tested.

To create a feature file in VSCode for implementing behavior-driven development (BDD) scenarios using Cucumber, you can follow these steps:

·       Open VSCode and navigate to the folder where you want to create the feature file.

·       Right-click on the folder, go to “New File”, and click on it to create a new file.

·       Give the file a name with the “.feature” extension, for example, “login.feature”

Feature: Checking calculator functionality 

Scenario: Verify addition on calculator
Given User is on the calculator page
When User taps on "4"
And User taps on operator
And User taps on "5"
Then User verifies the answer as "9"

Scenario Outline: Verify user can perform multiple operation
Given User is on the calculator page
When User clicks on num1 "<number1>"
The user clicks on the "<operator>"
And User clicks on num2 "<number2>"
Then User verifies "<answer>"
Examples:
    | number1 |number2 | operator | answer |
    | 4       | 5      | +        | 9      |
    | 5       | 3      | -        | 2      |
    | 4       | 5      | *        | 20     |
    | 6       | 2      | /        | 3      |

In the above feature file, I have shown one simple scenario where I have performed a simple addition operation, and in the next scenario, I have created a scenario outline where different operations are performed, including addition, subtraction, multiplication, and division.

Step-definitions:

The “step-definitions” folder contains files or classes that define the behavior or actions associated with each step in the BDD scenario.

In WebDriverIO, you can generate step definitions for the given scenarios in a feature file using a tool called “cucumber-boilerplate”.

Following are the steps to generate steps in WebDriverIO using cucumber:

Install the “cucumber-boilerplate” package as a development dependency by running the following command in your project directory: “npm install cucumber-boilerplate –save-dev”

Once the installation is complete, you can generate the step definitions by running the following command: “npx cucumber-boilerplate generate”

This will prompt you to enter the path to the feature file for which you want to generate the steps.

Provide the path to the feature file (e.g., “./features/login.feature”) and press Enter.

The tool will generate the step definitions in JavaScript format, which you can then copy and paste into your WebDriverIO project’s step definition files.

const { Given, When, Then } = require('@wdio/cucumber-framework');
const addPage = require('../pageobjects/AddPage');
Given(/^User is on calculator page$/, async () => {
    await addPage.visitWeb()
  });

When(/^User taps on "(\d+)"$/, async (num) => {
    await addPage.tapNumber(num)
})

When(/^User taps on operator$/, async () => {
    await addPage.tapOperator()
}
Then(/^User verifies answer as "(\d+)"$/, async (ans) => {
    await addPage.getAns(ans)
})

When(/^User clicks on num1 "([^"]*)"$/, async (num1) => {
    await addPage.clickNum1(num1)
})

When(/^User clicks on num2 "([^"]*)"$/, async (num2) => {
    await addPage.clickNum2(num2)
})

When(/^User clicks on the "([^"]*)"$/, async(opt) =>{
   await addPage.clickOperator(opt)
})

Then(/^User verifies "([^"]*)"$/, async(ans) =>{
   await addPage.verifyAnswer(ans);
})

In the above code, you can see we have integrated steps for each line of the feature file, so we can run code in BDD format.

Page objects:

These are classes that represent a web page, containing methods and properties that interact with the page’s elements, such as buttons, links, and input fields.

const { config } = require("../../wdio.conf");
const assert = require('assert');
const addPageLoc = require("../../Locators/AddPageLocators")
const scr = require('../pageobjects/ScreenshotPage')
class AddPage{
    constructor(){
        this.plusOpt = addPageLoc.plusOpt;
        this.answer = addPageLoc.answer;
    }
    // Since we parameterized the value for the locator, we kept it as is.
    getNumber(num){
        return $('[onclick="r('+num+')"]')
    }
    async tapNumber(num){
        await this.getNumber(num).click();
        scr.takeScreenshot('tapping_number');
    }
    async tapOperator(){
        await this.plusOpt.click()
        await browser.pause(3000);
        scr.takeScreenshot('tapping_operator');
    }
    async getAns(){
        let txt = await this.answer.getText()
        console.log("Answer of addition: " +txt);
        scr.takeScreenshot('gettingTextOfElement');
    }

    async visitWeb(){
        await browser.url(config.baseUrl)
        scr.takeScreenshot('webUrl');
    }

    async clickNum1(num1){
        await this.getNumber(num1).click();
        scr.takeScreenshot('clicking_number1');
    }
    async clickNum2(num2){
        await this.getNumber(num2).click();
        scr.takeScreenshot('clicking_number2');
    }
    async clickOperator(opt){
        await $('[onclick="r(\''+opt+'\')"]').click();
        // await this.operator.replace('XXX', opt).click();
        scr.takeScreenshot('clicking_operator');
    }
    async verifyAnswer(ans){
        let result = await this.answer.getText()
        console.log("Retrieving text value from element: " +result)
        assert.equal(result,parseInt(ans));
        scr.takeScreenshot('verifyingResult');
    }
}
module.exports = new AddPage();

The browser.pause() method was used to pause it for the specified amount of time. It takes time in milliseconds.

Also, we added methods to the “AddPage” class, such as click() and setValue(), that are necessary to perform operations on web elements. Also, the setValue() method has been used for sending values for web elements.

Locators:
              This folder includes all the locators required to operate web elements

module.exports = {
    plusOpt: $('[onclick="r(\'+\')"]'),
    answer: $('[id="sciOutPut"]'),
    operator: $('[onclick="r(\'XXX\')"]'
}

In the above code, we listed out all the locators in one file and then imported them into pages, removing clumsiness from the code

Now that we have completed implementing the Page Object Model (POM) design pattern, we can consider incorporating additional functionalities to further enhance the framework’s suitability and reliability.

Screenshots:

To add screenshot functionality to your code, you need to incorporate the following code into your implementation:

class ScreenshotPage{
    takeScreenshot(filename) {
        const timestamp = new Date().getTime();
        const filepath = `./screenshots/${filename}_${timestamp}.png`;
        browser.saveScreenshot(filepath);
      }
}

module.exports = new ScreenshotPage();

Import this code into the page where you need to capture a screenshot by calling takeScreenshot(‘nameOfScreenshot’).

The above image displays the screenshots it took. The sequence of screenshots offers an overview of the test case, illustrating actions taken at each step.

Cross-Browser Testing:

Cross-browser testing is a practice in software testing that involves testing a web application or website across multiple web browsers and browser versions to ensure its consistent functionality and appearance across different browser environments.

Capabilities:

In the wdio.conf.js file, make changes similar to what I have done in the ‘capabilities’ section. I have attached the following code for your reference. You can use it for assistance and make changes accordingly.

capabilities: [
    {
        browserName: 'chrome',
        acceptInsecureCerts: true
      },
      {
        browserName: 'firefox',
        acceptInsecureCerts: true
     }
],

Services:

In the ‘services’ section of the wdio.conf.js file, make changes similar to what I did in the following code snippets. You can make changes accordingly and run your test cases smoothly.

services: ['selenium-standalone'],
    seleniumInstallArgs: {
        drivers: {
          chrome: { version: 'latest' },
          firefox: { version: 'latest' },
          chromiumedge: { version: 'latest' },
        },
      }
      seleniumArgs: {
        drivers: 
          chrome: { version: 'latest' },
          firefox: { version: 'latest' },
          chromiumedge: { version: 'latest' },
        },
      },

The above code will assist you in implementing different browsers for testing, and you can also add others like Microsoft Edge, Safari, etc.

Allure_Report:

Allure Reports are often preferred over Cucumber Reports due to their visually appealing visualizations, comprehensive insights, step-by-step details, time tracking, integration capabilities, and historical trend analysis.

Once you have completed the automation process, testers need to generate reports to track the status of test cases, including pass or fail results and the exact location of failures. You can use the Allure report functionality for this purpose in your WebDriverIO project Follow these steps to include the Allure report:

1.     Install the Allure Reporter plugin for WebDriverIO using the following command: “npm install @wdio/allure-reporter –save-dev”

2.     Add the Allure Reporter plugin to your wdio.conf.js file as a reporter. Following is an example configuration:

exports.config = {
reporters: ['spec', ['allure', {
outputDir: './allure-results',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: false,
}]],
}

In this example, we’re using the spec reporter for console output and the allure reporter for generating the allure report. The outputDir option specifies the directory where it will generate the report files.

1.     Add the Allure command line tool to your project by running the following command: “npm install allure-commandline –save-dev”

2.     After running your tests, generate the Allure report by running the following command: “npx allure generate allure-results –clean”

Project Folder Structure: 

As we have completed the design of the folder structure for the framework, you can now see below the image of what the framework’s folder structure looks like.

The image above shows the integration of different folders in the WebdriverIO framework. I have provided explanations for each folder and its contents.

To run test cases on a browser, you can use the following commands:

·       npx wdio wdio.conf.js

·       npx wdio run wdio.conf.js –spec features\Addition.feature // To run a specific feature file

·       npx wdio wdio.conf.js –spec ./path/to/your/test.js –browser chrome // To run on a specific browser”

Note: Please make sure to replace the path and file names with the appropriate ones for your specific setup

Conclusion:

WebdriverIO is a comprehensive and feature-rich framework that empowers developers and testers to create reliable and efficient automation tests for web applications. It is a vast ecosystem of plugins, extensive documentation, and also active community support make it a top choice for automation testing in the modern web development landscape. By adopting WebdriverIO, organizations can significantly improve their web application testing efforts and deliver high-quality software to their end-users.

Read more Blogs here.

Harishchandra Ekal

Harish is an SDET with expertise in API, web, and mobile testing. He has worked on multiple Web and mobile automation tools including Cypress with JavaScript, Appium, and Selenium with Python and Java. He is very keen to learn new Technologies and Tools for test automation. His latest stint was in TestProject.io. He loves to read books when he has spare time.