Protractor Configuration And Integration With CucumberJS

Introduction

In the previous article, I spoke about the cucumberjs basics. In this article, we will be talking about integrating protractor with cucumber. If you have not visited my previous article, I ask you to click on this link.

Configuring Protractor

If you have not installed the protractor in your machine, I would recommend you to visit this website (https://www.protractortest.org/#/). This contains all the info on setting up the protractor. In this article, I am using the VScode editor; however, you can use any editor.

Go to VScode editor -> Terminal-> New Terminal

Inside the terminal, please execute the below commands. All the steps are mentioned on the protractor website.

npm install -g protractor
webdriver-manager update
webdriver-manager start

After executing the above commands, we need to check whether protractor is working fine or not. To check that, please consider the below example.

Create a ".js" file in the project and add the below code (Ex: protractorTest.js)

describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('https://angularjs.org');
element(by.model('todoList.todoText')).sendKeys('write first protractor test');
element(by.css('[value="add"]')).click();
var todoList = element.all(by.repeater('todo in todoList.todos'));
expect(todoList.count()).toEqual(3);
expect(todoList.get(2).getText()).toEqual('write first protractor test');
// You wrote your first test, cross it off the list
todoList.get(2).element(by.css('input')).click();
var completedAmount = element.all(by.css('.done-true'));
expect(completedAmount.count()).toEqual(2);
});
});

In order to execute the above code, you need to specify the conf.js file which contains browser and specs details, as shown below.

In the below example, I have given the "directConnect". We use this command in order to directly execute in the browser without starting the "webdriver -manager". This applies only to Chrome and Firefox. The rest of the browsers "directconnect" will not work

exports.config = {
//seleniumAddress: 'http://localhost:4444/wd/hub',
directConnect: true,
specs: ['protractorTest.js']
};

Now in the Terminal, execute the command mentioned below. Your specs should run successfully.

protractor conf.js

After executing the above code successfully, our protractor is working fine. Now, to integrate it with cucumberjs, you need to execute the below command in the terminal.

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

After installing the above command, you can check in your package.config file. Once this installation is done, you can create your first feature file, as shown below.

Feature: Login
In order to login to the application
As a User
I need to enter the Valid username and Password
Scenario: In order to login to the angular app
Given open the application "http://www.way2automation.com/angularjs-protractor/registeration/#/login"
When user login with "angular" and "password"
And User enters the Admin "TestUser"
Then user should login succcessfully

The above is the simple feature file which runs only for one test case. You can execute it using below command. I have given the feature file name as "Login".

.\node_modules\.bin\cucumber-js .\features\Login.feature

It will provide you the step definition in the terminal, as shown below.

1) Scenario: In order to login to the angular app # features\Login.feature:6
√ Given open the application "http://www.way2automation.com/angularjs-protractor/registeration/#/login" # features\stepDefinition\LoginDefinition.js:4
√ When user login with "angular" and "password" # features\stepDefinition\LoginDefinition.js:10
? And User enters the Admin "UserNames"
Undefined. Implement with the following snippet:
When('User enters the Admin {string}', function (string) {
// Write code here that turns the phrase above into concrete actions
return 'pending';
});
? Then user should login succcessfully
Undefined. Implement with the following snippet:
Then('user should login succcessfully', function () {
// Write code here that turns the phrase above into concrete actions
return 'pending';
});

You can copy the step definition and implement the same in your "stepdefinition.js" file.

var {Given, When, Then, Before} = require('cucumber');
const { browser, element } = require('protractor');
Before({timeout: 60 * 1000}, function() {
// Does some slow browser/filesystem/network actions
browser.manage().window().maximize();
});
Given(/^open the application "([^"]*)"$/, function (string) {
return browser.get(string);
});
When('user login with {string} and {string}', function (string, string2) {
// Write code here that turns the phrase above into concrete actions
element(by.model('Auth.user.name')).sendKeys(string);
element(by.model('Auth.user.password')).sendKeys(string2);
return console.log("entered the user name and password");
});
When('User enters the Admin {string}', function (string) {
// Write code here that turns the phrase above into concrete actions
element(by.model('model[options.key]')).sendKeys(string);
return console.log("enetered the logged in user name");
});
Then('user should login succcessfully', function () {
// Write code here that turns the phrase above into concrete actions
return console.log("success");
});

Now once the "Logindefinition.js" file is implemented, you need to integrate it with protractor. For that, you need to do some modifications in the "conf.js" files. Create a "protractor.conf.js" file in the project and add the below code.

You can use "directConnect" to directly open the application. You need to add "framework and frameworkPath", In the specs section you need to add the feature file name, and "cucumberOpts" section you can add the step definition file names related to the ".feature" file. If you do not have any tags keep that as "false" as of now.

If you do not know what is "tags" in cucumber, you can refer here.

exports.config = {
//seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
directConnect:true,
getPageTimeout: 60000,
allScriptsTimeout: 500000,
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
capabilities: {
'browserName': 'chrome'
},
// Spec patterns are relative to this directory.
specs: [
'features/*.feature'
],
cucumberOpts: {
require: 'features/stepDefinition/LoginDefinition.js',
tags: false,
}
};

Multiple Test Data and Multiple Scenarios

In the above example, I have created only one scenario which runs for only one test case. In this example, I will explain how to create multiple scenarios with dynamic test data execution.

Feature: Login
In order to login to the application
As a User
I need to enter the Valid username and Password
Background:
Given open the application "http://www.way2automation.com/angularjs-protractor/registeration/#/login"
Scenario Outline: Verify the title of the page
Then the title of page is
Scenario Outline: In order to login to the angular app
When user login with "<username>" and "<password>"
And User enters the Admin "<username1>"
Then user should login succcessfully
Then user should logout succcessfully
Examples:
| username | password | username1 |
| angular | password | user1 |
| angular | password | user2 |

Step definition code

var {Given, When, Then, Before, After} = require('cucumber');
const { browser, element } = require('protractor');
Before({timeout: 60 * 1000}, function() {
// Does some slow browser/filesystem/network actions
browser.manage().window().maximize();
});
Given("open the application {string}", function (string) {
return browser.get(string);
});
Then("the title of the page is", function () {
// Write code here that turns the phrase above into concrete actions
browser.sleep(4000);
var titleofPage = browser.getTitle();
titleofPage.then(function(text){
console.log("page title is : "+ text);
});
});
When("user login with {string} and {string}", function (string, string2) {
// Write code here that turns the phrase above into concrete actions
element(by.model('Auth.user.name')).sendKeys(string);
element(by.model('Auth.user.password')).sendKeys(string2);
return console.log("entered the user name and password");
});
When("User enters the Admin {string}", async function (string) {
// Write code here that turns the phrase above into concrete actions
await element(by.model('model[options.key]')).sendKeys(string);
return console.log("enetered the logged in user name");
});
Then("user should login succcessfully", function () {
// Write code here that turns the phrase above into concrete actions
element(by.buttonText("Login")).click();
return console.log("user logged in successfully");
});
Then("user should logout succcessfully", function () {
// Write code here that turns the phrase above into concrete actions
browser.sleep(4000);
return element(by.linkText("Logout")).click();
});

Executing the Scenarios with Tags

In the above example, we saw how to run multiple scenarios. While testing, there will be some test cases we need to keep for smoke testing, integration testing, functional testing. So cucumber, as provided the tags, which help us to execute the particular test case with the help of tags. Let's see how we can do it, by taking the above example.

So in the below feature file, mark one scenario with the tag "@smoke"

Feature: Login
In order to login to the application
As a User
I need to enter the Valid username and Password
Background:
Given open the application "http://www.way2automation.com/angularjs-protractor/registeration/#/login"
Scenario: Verify the title of the page
Then the title of the page is
@smoke
Scenario Outline: In order to login to the angular app
When user login with "<username>" and "<password>"
And User enters the Admin "<username1>"
Then user should login succcessfully
Then user should logout succcessfully
Examples:
| username | password | username1 |
| angular | password | user1 |
| angular | password | user1 |

In the conf.js file, you need to add the tag.

exports.config = {
//seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
directConnect:true,
getPageTimeout: 60000,
allScriptsTimeout: 500000,
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
capabilities: {
'browserName': 'chrome'
},
// Spec patterns are relative to this directory.
specs: [
'features/*.feature'
],
cucumberOpts: {
tags: ['@smoke'],
require: 'features/stepDefinition/LoginDefinition.js',
format:'json:cucumber_report.json'
}
};

So when you execute the tag with '@smoke' gets executed.

You can see in the below console. only 2 scenarios are executed w.rt to test data passed.

Generating HTML Reports

Let's see how to generate reports for the above script. In order to generate the report, we need to first create "cucumber_report.json" file. Please add the line of code in conf.js under "cucumberOpts"

exports.config = {
//seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
directConnect:true,
getPageTimeout: 60000,
allScriptsTimeout: 500000,
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
capabilities: {
'browserName': 'chrome'
},
// Spec patterns are relative to this directory.
specs: [
'features/*.feature'
],
cucumberOpts: {
require: 'features/stepDefinition/LoginDefinition.js',
format:'json:cucumber_report.json',
tags: false,
}
};

After executing the above code with command "protractor <name of conf file>.js". The "cucumber_report.json" file will be generated. The next step is to create "index.js file.

var reporter = require('cucumber-html-reporter');
var options = {
theme: 'bootstrap',
jsonFile: './cucumber_report.json',
output: './cucumber_report.html',
reportSuiteAsScenarios: true,
scenarioTimestamp: true,
launchReport: true,
metadata: {
"App Version":"0.3.2",
"Test Environment": "STAGING",
"Browser": "Chrome 54.0.2840.98",
"Platform": "Windows 10",
"Parallel": "Scenarios",
"Executed": "Remote"
}
};
reporter.generate(options);

Execute the command "node index.js" in the terminal. It will redirect you to the reports.html file which opens up in the browser

Running parallel on Multiple Browsers

When you want to execute tests on multiple browsers at the same time parallelly. Then you need to user the Mutiple Capabilities, shown below:

exports.config = {
//seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
directConnect:true,
getPageTimeout: 60000,
allScriptsTimeout: 500000,
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('protractor-cucumber-framework'),
multiCapabilities:[{
'browserName': 'chrome'
},{
'browserName': 'firefox'
}],
// Spec patterns are relative to this directory.
specs: [
'features/*.feature'
],
maxSessions:1, //One browser will open at a time.
cucumberOpts: {
tags: ['@smoke'],
require: 'features/stepDefinition/LoginDefinition.js',
format:'json:cucumber_report.json'
}
};

That's it about cucumber, I have not mentioned the customization of conf.js and customization of cucumber reports in this article. That is because it's already available on the websites I mentioned.

Thank You! Happy Coding :-)