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.

Configuring Protractor in Intellij Idea

About Intellij Idea

Intellij idea is an licensed  integrated development environment(IDE) for developing software. It is developed by Jetbrains and available to us in two different editions, community and ultimate.

We can configure our intellij idea to run our protractor test as it has support for node.js. Ultimate edition of intellij idea only supports node.js, so if you are planning to run your test case on intellij idea, you must have ultimate edition.


Configuring Intellij Idea for NodeJS:

Since intellij idea(ultimate edition) has support for node.js , we can configure it by installing jetBrains nodejs plugin. To do that you have to follow the following steps:

Step 1:

Go to File -> Settings

Then a window will open like below:

Step 2:

Click on the Install jetBrains plugin as highlighted in the above picture. After clicking a window will appear .In the search field type nodejs and click on search. Once you click on the search button you will see on the right hand side a button to install the plugin. Click on install nodejs plugin.

Once the plugin is intsalled, you will be asked to restart the intellij idea.

Configuring Intellij Idea for Protractor

Once the nodejs plugin is intsalled, we can start to configure intellij idea for protractor configuration. To do that follow the following steps:

Step 1:

Click on Configuration button on the right side of the intellij idea and you will see aconfiguration window:

Configuration Button

Run Debug Configuration Window

Step 2:
On the Run/Debug configuration window click on +  button and scroll down to select Node.js.

Step 3:
Once you select Nodejs as highlighted in the above picture, you will see a window like this:

Step 4:

In the above window we have to provide following parameters:

• Node interpreter: Path to the node.exe . If you have installed node.exe in your machine , this field will be auto-populated .
• Working Directory: Path to the directory where your project is. by default it takes the path of the current project opened and is also auto-populated.
• JavaScript File: In this you have to provide the path of cli.js which is inside the lib folder for protractor module. For more reference you can see the above image.
• Application Parameter: In this you have to provide the path of  your configuration file which is required by protractor for executing the test
• Name: In this you have to provide the name of your test, if you don't provide any name, your test will be saved as Unnamed.

Note:  Its always preferable to use the relative path than absolute path.

Step 5:

Once all above is done click on Apply button .

Step 6:

To run your test case click on the play icon button which is by the side of the configuration button.

And there you go , you are done with the setup.

Cheers Learning!!!!

About Protractor

Protractor is an end to end test framework for Angular JS application. It  is a library by the Angular team which is a wrapper on WebDriverJS and Jasmine and is specifically designed  to make testing of Angular apps. But it doesn't mean that Protractor cannot be used for testing non-angular application. It can be used for testing both application but  Protractor is something which is specially designed for handling Angular apps as it offers additional element query finder like binding,model, repeater etc which is not supported by WebDriverJS. By adding an additional line of code you can test your non-angular app as well with Protractor.

Setup Protractor At Home

Now protractor is a node.js program, so in-order to run protractor in your machine you need to have node.js installed in your machine. You can download node.js from their official website and install it into your system.

Once node.js is installed in your system , you can proceed to install protractor . To install protractor you should use following command in your command prompt.:

   - npm install -g protractor

Note: -g is used here so that protractor is installed globally into your system and can be accessed from any path. If you do not want to install it globally you can skip -g and install it locally to a specific folder.

Running Your First Test in Protractor

Before creating your first test in protractor, you should understand that protractor needs basically two files to run, a spec file and a configuration file.

- configuration file: It is file which holds all the key information which protractor uses for running the test, like location of your spec file, which browser to be used for testing, selenium server , framework and many other things.

- spec file : It is the file where you actually write your test case.

Now lets get started, open the notepad and  copy the following code  and save it as spec.js

// spec.js
describe('Protractor Testing', function() {
  it('should open google page', function() {
    browser.ignoreSynchronization=true; // This is to be added if your application is non-angular
    browser.get('http://www.google.com'); 
    expect(browser.getTitle()).toEqual('Google');
    element(by.css('input.gsfi')).sendKeys('Hello testing')
  });
});

 In the above code we are trying to open the google page ,verifying its title as Google and enter 'Hello Testing' in the search field.

Now create another file in the same directory with  name as conf,js and copy the following code:

// conf.js
exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
}

In the code we have just provided following thing to protractor:
- framework: which framework to use , we have given Jasmine which is by default supported by protractor.
-seleniumAddress: The address of the selenium server running locally on the machine.
-specs: The location of your spec file, which in this case is your current working directory.

Now to run your first test case you have to first start your selenium server , which can be done by executing the following command on the command prompt:

- webdriver-manager start

This will start your selenium webdriver server at the followwing address:

-http://localhost:4444/wd/hub

Now keep the command prompt window open till you want to execute your test, do not close it otherwise the server will be closed. Open another command prompt instance and set the path to the directory where you have stored your spec and conf file . Now in the command prompt window execute the following command:

- protractor conf.js

And that's all, you are done with your first protractor test. The above command will run your first test.