Select Page
Automation Testing

Protractor, CucumberJS, and Gulp Example

Being a leading QA Company, we write blogs on all prominent software testing topics and tools using our real-world experience. So stay sharp by subscribing to our Newsletter.

Listen to this blog

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.

protractor and cucumberjs

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)

Submit a Comment

Your email address will not be published. Required fields are marked *

Talk to our Experts

Amazing clients who
trust us


poloatto
ABB
polaris
ooredo
stryker
mobility