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.
|
1 |
npm install gulp-cli -g |
Cucumber + Protractor Folder Structure
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
+--------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.|
1 |
npm install |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "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|
1 2 3 4 5 6 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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" })); }); |