Protractor With Cucumber

Overview

Protractor, an end-to-end testing framework, supports Jasmine and is specifically built for AngularJS applications. 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 is loaded and limits the number of waits and sleeps used in the testing suite.

Cucumber, a BDD framework, is used for web applications for performing acceptance tests. It provides a higher-level view of the testing process of the suite. In this blog, let us discuss configuring Protractor with the Cucumber framework and 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 passing the input parameter by using the property file in Protractor with the Cucumber framework.

Setting Up a 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 Scripts in a Default Browser

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

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

Running Scripts in Other Browsers

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

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

Viewing the Cucumber.conf.js File

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

Setting Up Feature Files 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 the 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.
• 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 Scripts 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 another command prompt and run your test using the below command:

 protractor cucumber.conf.js

Viewing Test Results

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

Conclusion

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