Getting Started With Protractor Cucumber

Protractor by default has support for Jasmine framework. Writing code in Jasmine frame work is good if you are looking for unit testing but from business- facing users it doesn't sound good.

What if your business team is looking for high level understanding of what your test suite is testing against. Consider a situation where your business team is very keen in understanding what you have actually automated in your testing, means they are trying to correlate your automated script with the actual functionality of the application. For this kind of situation Cucumber comes in very handy.

Now Cucumber is BDD(Behavior Driven Development) framework which focuses more on features or you can say stories. Cucumber utilizes the Gherkin syntax.
Cucumber executes your Gherkin file( which is . feature file) and these file contains executable specification related to your test.

About Gherkin

Gherkin is plain-text English  with a little extra structure.  Gherkin is designed to be easy to learn and write with a little defined syntax. It allows to write your test cases in well structured manner and so readable format that can be understood by anyone.

Below is the basic syntax for writing your Gherkin file:

Feature: Testing Application

  Scenario: Testing Login

    Given I am on the login page
    When I enter username
    And I enter password
    And I click on login button
    Then I should see Homepage

More about gherkin syntax will be uploaded in my next blog or you can simply google it .

Protractor Setup

To setup protractor you need to have following things already in your system:

• NodeJs installed
• JDK

For the rest of installation step you can visit my firs blog Protractor Setup

Cucumber Setup

 To setup cucumber is same as setting  up protractor. You have to follow the following steps to setup cucumber in your system:

First you need is to install cucumber. To do that execute the following command on your command prompt:

- npm install -g cucumber

Note: -g is used to store the Cucumber module globally , if you don't want to install it globally remove  -g from the command.

Now next you have to do is install protractor-cucumber framework. To do that execute the following command on your command prompt:

Note: For people using protractor version 3.x , they need to install protractor-cucumber-framework module as for version 3.x and greater Cucumber is no more included as default and we have to use protractor-cucumber-framework module so that protractor can recognize. 

For lower version you do not need to install this module and you can skip this step

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

Once the above command is executed you are done with the Cucumber Setup

Write Your First Gherkin File

As discussed above Cucumber utilizes gherkin files, so you need to write your gherkin file first. Below is the basic example of a gherkin file. Copy the code in the notepad and save the file as cucumberTutorial.feature.

Note: Gherkin file has an extension .feature

Feature: Testing Application

  Scenario: Testing Login

    Given I am on the login page
    When I enter username
    And I enter password
    And I click on login button
    Then I should see Homepage

In the above code , you can see different keywords like Feature, Scenario, Given, When,And , Then,  these are the keywords which is used  to write a feature file. You can learn more about gherkin syntax on my upcoming blog or you can simply google it.

Write Your First StepDefintion File

Step-definition file is where actually your code is written. Cucumber requires step-definition of every step written in your gherkin file, if it doesn't find any match in the step-definition file provided for a particular step, it prompts you with a  step-definition prototype  for that particular step.

So if you don't know how to write the step-definition for your feature file , simply run the protractor configuration file on command prompt and you will get all the prototype definition for your steps as shown in the below picture:

Now copy the code from the command prompt and paste it into your step-definition file. Similarly based on your requirement you need to modify and add code to each and every step accordingly. I have already done for the above feature file so you can simply copy from here and save it as cucumberStep.js

var myStepDefinitionsWrapper = function () {

this.Given(/^I am on the login page$/, function (callback) {

  // Write code here that turns the phrase above into concrete actions

browser.ignoreSynchronization=true; // To be added if the application is non-angular
browser.driver.manage().window().maximize(); // To maximize the window
browser.get("https://www.facebook.com").then(function(){
    callback(); // To tell the cucumber that we are done with this step
   })

});

this.When(/^I enter username$/, function (callback) {
  // Write code here that turns the phrase above into concrete actions
element(by.id("email")).sendKeys("abc@gmail.com").then(function(){
  callback();
 });
});

this.When(/^I enter password$/, function (callback) {
  // Write code here that turns the phrase above into concrete actions
  element(by.id("pass")).sendKeys("*****").then(function(){
  callback();
 });
});

this.When(/^I click on login button$/, function (callback) {
  // Write code here that turns the phrase above into concrete actions 
  element(by.id("u_0_l")).click().then(function(){
  callback();
 });
});

};
module.exports = myStepDefinitionsWrapper;


Configure Protractor Configuration file To Run With Cucumber

Now we have our feature file and step-definition file, it's time to configure our protractor conf.js file.
Copy the below code ans save it as conf,js.

var config;
config = {

    chromeDriver:'path\\to\\your\\chromedriver.exe',
    seleniumArgs: ['-Dwebdriver.ie.driver=path\\to\\your\\IEDriverServer.exe'], //incase you want to test your application on internet explorer
    seleniumAddress: 'http://127.0.0.1:4444/wd/hub',

    specs: 'cucumberProtractor.feature',
   
    capabilities: {
        browserName: 'chrome'
            },

     framework: 'custom', // need to add for protractor 3.x and above
    frameworkPath: 'path\\to\\your\\protractor- cucumber-framework',  // need to add for protractor 
    output:'./output.json',                                                                          //3.x and above

    cucumberOpts: {
        // define your step definitions in this file
        require: ['./stepDefinitions.js'],
        format: 'pretty',
        tags:'false   
       }
};

exports.config = config;

Now we are done with all the setup, it's time to run our test.

Note: 

1. You need to modify the path of chromeDriver,seleniumArgs, frameworkPath  based on the location of these files on your system.
2. If your are using protractor older version of protractor you can omit frameworkPath and in framework you can use simply cucumber instead of custom.

Run The Test

After completing all the above step, we can run our test from command prompt. To do that you need to do the following:

• Change the directory to the directory where you have stored all your files.
• Start the webdriver by executing following command and keep the command prompt window open

          webdriver-manager start

• Start another instance of command prompt and execute following command

       protractor conf.js

You will see your test getting executed and after the completion , you will get following output on the command prompt:

And finally we are done with our first simple protractor-cucumber test.

Cheers !!!!

Please feel free to ask in the below comment section , if you have any doubt.