Protractor, CucumberJS, and Gulp Example - Codoid
Select Page
Codoid Blog

Protractor, CucumberJS, and Gulp Example

Irrespective of the business that your client is in, marketing is an integral part of their operations. In fact, in this day and age of social.

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

Written By

Submit a Comment

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


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