Protractor, CucumberJS, and Gulp Example

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.

admin

Posted on March 30, 2017

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" &amp;&amp; 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