Overview

Protractor, an end-to-end testing framework, supports Jasmine and is specifically built for AngularJS application. It is highly flexible with different Behavior-Driven Development (BDD) frameworks such as Cucumber. It allows writing specifications based on the behavior of the application. The greatest feature of Protractor is that it waits until a page gets loaded and limits the number of waits and sleeps used in testing suite.

Cucumber, a BDD framework, is used for web applications for performing acceptance tests. It provides a higher-level view of testing process of the suite. In this blog, let us discuss about configuring Protractor with Cucumber framework and about passing the input parameters by using the property file.

Pre-requisites

• Install Java Development Kit
• Install Node.js (Latest version)
• Install Protractor using the below command:

npm install -g protractor

• Check the version of Protractor using the below command:

protractor –version
webdriver-manager update

• Install Cucumber using the below command:

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

Use Case

We will discuss about passing the input parameter by using property file in Protractor with Cucumber framework.

Setting Up Configuration in Protractor with Cucumber

Cucumber Configuration

To configure Cucumber, use the below command:

cucumberOpts: {
 require: 'features/step_definitions/*.js',
 tags: false,
 format: ['pretty'],
 profile: false,
 'no-source': true,
 }

Running Script in Default Browser

To run script in a default browser, use the below command:

capabilities: {
 'browserName': 'chrome'
 },

Running Script in Other Browsers

To run script in other browsers, use the below command:

capabilities:[ {
 'browserName': 'Firefox'
 },{
 'browserName': 'safari'
 }
 ]

Viewing Cucumber.conf.js File

The above Cucumber configuration can be viewed in a single JS file as shown below:

Setting Up Feature File in Protractor with Cucumber

The sample feature file used in this use case is as follows:

• Feature: Angular Application Testing
• Scenario: Protractor and Cucumber Test
• Given Open the Application Login page
• When Enter the valid credentials
• Then Get the stock price of the given Ticker

Configuring Property File

To configure the property file, perform the following:

• Install properties reader using the below command:

npm install properties-reader

• Create a prop.properties file as shown in the below diagram:

• Configure property file with first_test.JS using the below command:

var propertiesReader = require('properties-reader');
var inputproperties = propertiesReader(/path/properties_file/prop.properties');

• Pass the below sample parameter as input:

var website = inputproperties.get('Website');

Executing Test Script in Protractor with Cucumber

To execute the test script in Protractor, perform the following:

• Before running the test, start the Selenium server using the below command:

webdriver-manager start

• Open other command prompt and run your test using the below command:

protractor cucumber.conf.js

Viewing Test Result

Open results.json file to view the test result in JSON format as shown in the below diagram:

Conclusion

In this blog, we discussed about installing and configuring Protractor with Cucumber framework. We learnt about the basic structure of feature file and about passing the input parameters by using the property file in Protractor with Cucumber framework.

References

Protractor-Cucumber: https://www.npmjs.com/package/protractor-cucumber