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" })); }); |