Writing acceptance tests in Gherkin format helps the agile team to collaborate effectively. Implementing Cucumberjs step definitions using Protractor makes easier to define automated acceptance tests and encourages effective team collaboration.
In this blog post, you will learn how to setup Protractor, CucumberJS, and Gulp with an example.
Gulp Installation
Automation – gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
npm install gulp-cli -g
Cucumber + Protractor Folder Structure
+--------Root | +---features | | +-------app1 | | | +---feature | | | sample.feature | | | +---pages | | | +---step_definitions | +---support | | | | +---config | | | | | | | +---reports | | | | conf.js | gulpfile.js | package.json
Install Required Packages
After installing Gulp CLI and setting up folder struture, you can install the dependencies in package.json.
npm install
package.json
{
"name": "protractor-demo",
"version": "0.0.0",
"main": "conf.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"dependencies": {
"app-root-path": "^2.0.1",
"chai": "^3.5.0",
"cucumber": "^1.3.2",
"gulp": "^3.9.1",
"gulp-protractor": "^4.1.0",
"gulp-protractor-cucumber-html-report": "^0.1.3",
"protractor-cucumber-framework": "^1.0.2",
"relative-path": "^1.1.0"
}
}
Feature File
The below feature contains one scenario for https://www.room77.com
Feature: Search Hotels
@smoke
Scenario: Search hotels with an invaild city
Given As a room77 user, I launch room77 app
When I search hotels with "asdfsdf"
Then I should see "Please type in a location" alert
Step Definitions
var p = require('relative-path');
var expect = require('chai').expect;
var homePage=require(p('../pages/home_page'));
var myStepDefinitionsWrapper = function () {
this.Given(/^As a room77 user, I launch room77 app$/, function () {
browser.get("https://www.room77.com");
return browser.waitForAngular();
});
this.When(/^I search hotels with "([^"]*)"$/, function (city) {
homePage.enterSearch(city);
homePage.clickSearch();
return browser.sleep(1000);
});
this.Then(/^I should see "Please type in a location" alert$/, function () {
return alert=browser.switchTo().alert().accept();
});
};
module.exports = myStepDefinitionsWrapper;
conf.js
exports.config = {
defaultTimeoutInterval: 25000,
getPageTimeout: 60000,
allScriptsTimeout: 500000,
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
capabilities: {
'browserName': 'chrome',
},
specs: [
'features/*/*/*.feature'
],
baseURL: 'https://www.room77.com',
cucumberOpts: {
format: ['json:reports/results.json', 'pretty'],
require: ['features/*/*/*steps.js','support/env.js'],
profile: false,
'no-source': true
}
};
Gulp File
var gulp = require('gulp');
var protractor = require("gulp-protractor").protractor;
var reporter = require("gulp-protractor-cucumber-html-report");
gulp.task("execute",function () {
return gulp.src([])
.pipe(protractor({
configFile: "conf.js"
}))
.on('error', function(e) { throw e })
}
);
gulp.task("report", function () {
gulp.src("reports/results.json")
.pipe(reporter({
dest: "reports"
}));
});
Comments(0)