Unleash the power of Behavior Driven Development with Protractor

Many of us face a great difficulty when it comes to capturing requirements and delivering such requirements to the customer. Sometimes disaster occurs when software are delivered to customer. Poor understanding of the given requirements is the main cause for this. The business analysts may define different set requirements that is not expected by the customer, or the developer will deliver a different set of requirements. Sometimes its difficult to validate what is written by the developer as other project stakeholders may not be technically fluent to understand the code.

To overcome such issues, a concept called behavior driven development has been introduced. This is where we put in the set of requirements as scenarios where user will interact with the system in a more human readable form, which can be understood by any project stakeholder. The system will be developed in accordance to these scenarios, which will guarantee that there is no requirement drift.

There are many tools introduced to practice BDD in software development and testing world. Cucumber, RSpec and J Behave are some of these tools. We can integrate these tools easily with the test automation framework to practice BDD in automated testing. This article will cover how we can use Protractor with Cucumber to practice BDD in your test automation environment.

Picture taken from :https://www.wonderwrks.com/portfolio-posts/protractor-cucumber-framework/

Lets first install the necessary node modules from Cumber integration with Protractor.

• First you have to install protractor-cucumber-framework

npm install protractor-cucumber-framework

• Next download and install the cucumber module

npm install cucumber 

• Finally install cucumber-expressions

npm install cucumber-expressions

• Now lets test a feature and create a .feature fill in the feature directory of your project.

#features/test.feature
Feature: Running Cucumber with Protractor
    As a user of Protractor
    I should be able to use Cucumber
    In order to run my E2E tests

    Scenario: Protractor and Cucumber Test
        Given I go to "https://angularjs.org/"
        When I add "Be Awesome" in the task field
        And I click the add button
        Then I should see my new task in the list

• We have to create the following test runner config file to enable Cucumber in your test suite.

exports.config = {
    seleniumAddress: 'https://localhost:4444/wd/hub',
    getPageTimeout: 100000,
    allScriptsTimeout: 1000000,
framework: 'custom',
    frameworkPath: require.resolve('C:/Users/ksamarasiri/node_modules/protractor-cucumber-framework'),
    specs: ['../tools/features/first.feature'],
    cucumberOpts: {
        format: "summary",
        require: ['../tools/features/steps_definition1/first.js'],
    },
    

};

In this file we should name framework as custom and also provide the location of the protractor-cucumber-framework node module. We should also specify the path of the feature file and the location of the step-definition file.

Use the following command line to execute the configuration file.

protractor <path of your config file>

If all goes well we will get the following result with the step definitions generated.

We will create the step definition file and save it on the location we have mentioned in our configuration file.

const {Given, When, Then} = require('C:/Users/ksamarasiri/node_modules/cucumber');
const { expect } = require('C:/Users/ksamarasiri/node_modules/chai');
         Given('I go to {string}', function (string, callback) {
           // Write code here that turns the phrase above into concrete actions
            browser.get("https://angularjs.org/");
             callback();
         When('I add {string} in the task field', function (string, callback) {
           // Write code here that turns the phrase above into concrete actions
          element(by.model('todoList.todoText')).sendKeys('write first protractor test');
          callback();

          When('I click the add button', function (callback) {
           // Write code here that turns the phrase above into concrete actions
           element(by.css("input.btn-primary")).click();
           callback();

           Then('I should see my new task in the list', function (callback) {
           // Write code here that turns the phrase above into concrete actions
           
           var inputElement = element(by.css("span.done-false"));
           expect(inputElement.getText()).to.equal('write first protractor test');
           callback();
         });
 });
 });
});
    
       

When executed the configuration file via Protractor if all goes well your all four steps will pass along with the scenario.

Hope this article enlightened you'll on Protractor and Cucumber integration.