Select Page
Codoid Blog

BDD in CucumberJS

Being a leading QA Company, we write blogs on all prominent software testing topics and tools using our real-world experience. So stay sharp by subscribing to our Newsletter.

JavaScript automation testing has gained enormous popularity over the past few years. Many JavaScript developers create unit tests using tools like Protractor, BDD in CucumberJS and nightwatchjs and testers have also started writing automated regression suite using JavaScript to align with one automation testing approach which is followed by both QA (Acceptance tests) and Dev (Unit tests).

In this post, we are going to see an example for CucumberJS with WebDriverJs which is helpful for newbies. As a testing service provider, sharing knowledge, exploring new testing tools and approaches are key differentiators of Codoid. Let’s begin the article with required tools section.

1) Required Tools
  • NodeJS
  • cucumber-js
  • WebDriverJs
  • Grunt
  • grunt-cucumberjs
  • chromedriver
  • chaijs
  • 2) Folder Structure


    3) Installation
  • Install Nodejs
  • Install grunt-cli globally
    npm install -g grunt-cli  
  • Create package.json
      "name": "cucumberjs-demo",
      "version": "0.0.0",
      "private": true,
      "scripts": {
        "clean": "rm -rf tmp"
      "dependencies": {
        "chai": "^3.5.0",
        "chromedriver": "^2.27.3",
        "cucumber": "^2.0.0-rc.7",
        "geckodriver": "^1.4.0",
        "grunt": "^1.0.1",
        "grunt-cucumberjs": "^0.10.12",
        "selenium-webdriver": "^3.1.0"
  • Install dependencies
    E:Projectscucumberjs-demo>npm install  
  • 4) Create Feature

    Create ‘Codoid.feature’ file inside ‘features’ folder

    Feature: Codoid Example Feature
      As a user of
      I want to have Schedule a demo feature
      So that I can schedule a demo with Codoid's testing experts
      Scenario: Reading documentation
        Given I am on Codoid Home page
        When I click Schedule a demo link
        Then I should see "Schedule a demo"  
    5) Create step definitions

    Create ‘my_steps.js’ inside ‘features/step definitions’ folder

    var {defineSupportCode} = require('cucumber');
    defineSupportCode(function(context) {
        context.setDefaultTimeout(200 * 1000)
        var setWorldConstructor = context.setWorldConstructor;
        var Given = context.Given
        var When = context.When
        var Then = context.Then
        var expect=require('chai').expect
        var driver = require('selenium-webdriver');
        var browser = new driver.Builder()
        var by = driver.By;
        Given(/^I am on Codoid Home page$/, function () {
            return browser.get('');
        When(/^I click ([^"]*) link$/, function (text) {
            browser.wait(driver.until.elementLocated(by.linkText('CONTACT US')), 10000).click();
            return browser.findElement({linkText: text}).click();
        Then(/^I should see "([^"]*)"$/, function (arg1) {
            var condition = driver.until.elementLocated({xpath: "//h2[contains(text(),'" + arg1 + "')]"});
            browser.wait(condition, 5000);
            return browser.quit();
    6) Create Gruntfile.js
    module.exports = function (grunt) {
            cucumberjs: {
                options: {
                    require: ["features/step_definitions"],
                    format: 'html',
                    output: 'reports/my_report.html',
                    theme: 'bootstrap'
                features: []
        grunt.registerTask('default', ['cucumberjs']);
    7) Execute
    grunt default  

    Once the execution is completed, you can see ‘my_report.html’ inside reports folder as shown below.

    BDD in CucumberJS

    Source code of this example


    Submit a Comment

    Your email address will not be published. Required fields are marked *

    Talk to our Experts

    Amazing clients who
    trust us