BDD in CucumberJS - Codoid
Select Page
Codoid Blog

BDD in CucumberJS

Irrespective of the business that your client is in, marketing is an integral part of their operations. In fact, in this day and age of social.

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

    cucumberjs-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 Codoid.com
      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
    
    
        require('chromedriver')
        var expect=require('chai').expect
    
        var driver = require('selenium-webdriver');
        var browser = new driver.Builder()
            .forBrowser('chrome')
            .build();
        var by = driver.By;
    
        Given(/^I am on Codoid Home page$/, function () {
            return browser.get('https://codoid.com');
        });
    
        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) {
    
        grunt.initConfig({
            cucumberjs: {
                options: {
                    require: ["features/step_definitions"],
                    format: 'html',
                    output: 'reports/my_report.html',
                    theme: 'bootstrap'
                },
                features: []
            }
        })
    
        grunt.loadNpmTasks('grunt-cucumberjs');
    
        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

    Written By

    Submit a Comment

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


    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

    cucumberjs-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 Codoid.com
      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
    
    
        require('chromedriver')
        var expect=require('chai').expect
    
        var driver = require('selenium-webdriver');
        var browser = new driver.Builder()
            .forBrowser('chrome')
            .build();
        var by = driver.By;
    
        Given(/^I am on Codoid Home page$/, function () {
            return browser.get('https://codoid.com');
        });
    
        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) {
    
        grunt.initConfig({
            cucumberjs: {
                options: {
                    require: ["features/step_definitions"],
                    format: 'html',
                    output: 'reports/my_report.html',
                    theme: 'bootstrap'
                },
                features: []
            }
        })
    
        grunt.loadNpmTasks('grunt-cucumberjs');
    
        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