Adding Cucumber JS to your Protractor Test Automation Framework

In an earlier article we saw how I developed the Protractor test automation framework. Now its time to add the BDD component to the framework.

To add first we have to install Cucumber and Protractor-Cucumber-Framework into our framework. This can be done via following npm commands

npm install -g cucumber

npm install --save-dev protractor-cucumber-framework

Next we need to modify the configuration file as follows

//protractor.conf.js
exports.config = {
  seleniumAddress: 'https://127.0.0.1:4444/wd/hub',
  getPageTimeout: 60000,
  allScriptsTimeout: 500000,
  framework: 'custom',
  // path relative to the current config file
  frameworkPath: require.resolve('protractor-cucumber-framework'),
  capabilities: {
    'browserName': 'chrome'


  },
  // Spec patterns are relative to this directory.
  specs: [
    'features/*.feature'
  ],




  baseURL: 'https://localhost:8080/',
  cucumberOpts: {
    require: 'features/*.js',
    tags: false,
  
    profile: false,
    'no-source': true
  }
};

Next lets create the feature file for our login scenario

Feature: Store log in
    As a user of the store 
    I should be able to log in as Cucumber
    In order to buy products
    Scenario: Store login
        Given I go to store URL
        When enter user name and password
        Then I should successfully log in

Save it in a folder called Features in your framework folder and run the configuration file as protractor conf.js. It will generate the step definitions

1) Scenario: Store login # features\login.feature:5
   ? Given I go to store URL
       Undefined. Implement with the following snippet:


         Given('I go to store URL', function () {
           // Write code here that turns the phrase above into concrete actions
           return 'pending';
         });


   ? When enter user name and password
       Undefined. Implement with the following snippet:


         When('enter user name and password', function () {
           // Write code here that turns the phrase above into concrete actions
           return 'pending';
         });


   ? Then I should successfully log in
       Undefined. Implement with the following snippet:


         Then('I should successfully log in', function () {
           // Write code here that turns the phrase above into concrete actions
           return 'pending';
         });


   √ After # node_modules\protractor-cucumber-framework\lib\resultsCapturer.js:26


1 scenario (1 undefined)
3 steps (3 undefined)
0m00.003s

Then lets do the step definitions implementations, with page object model and json data driven.

var homePage = require('./homePage.js');
var signInPage = require('./signInPage.js');
var data = require('./data.json');
var {defineSupportCode} = require('cucumber');


defineSupportCode(function({Given, When, Then}) {




         Given('I go to store URL', function () {
           // Write code here that turns the phrase above into concrete actions
              browser.ignoreSynchronization = true;
			  homePage.get();
			  browser.waitForAngularEnabled(false) 
			  homePage.clickLogin();
         });






         When('enter user name and password', function () {
           // Write code here that turns the phrase above into concrete actions
		    browser.ignoreSynchronization = true;
            browser.waitForAngularEnabled(false);
			signInPage.setEmail(data.email);
			signInPage.setPassword(data.password);
         });






        Then('I should successfully log in', function () {
			 browser.ignoreSynchronization = true;
           // Write code here that turns the phrase above into concrete actions
           signInPage.clickSubmit();
         });
});

Finally lets run the config file with the protractor command and the scenario will pass.

1 scenario (1 passed)
3 steps (3 passed)
0m00.013s