How to configure Protractor to use Cucumber

Question

As of 0.20.1 Cucumber is now fully supported in Protractor but I'm battling to find any documentation on how to configure it properly. Any idea how you would setup world.js?

I have found this example at https://github.com/whyvez/angular-cucumber-example/blob/master/features/support/world.coffee but I'm not sure if you would still need to specify all the require modules and configuration as the protractor config file (referenceConf.js) would have all this info already.

assert = require 'assert'
path = require 'path'

protractor = require 'protractor'
webdriver = require 'selenium-webdriver'

driver = new webdriver.Builder().
  usingServer('http://localhost:4444/wd/hub').
  withCapabilities(webdriver.Capabilities.chrome()).
  build()

driver.manage().timeouts().setScriptTimeout(100000)

ptor = protractor.wrapDriver driver

class World
  constructor: (callback) ->
    @browser = ptor
    @By = protractor.By
    @assert = assert
    callback()

module.exports.World = World

Answer 1

I have created a sample project to show how to configure Protractor with Cucumber and make use of the World.

The World is a place to share commonalities between different scenarios so that you can keep you code organised.

Actually, all you need is to create your world.js file in a folder called /support under /features. You would place there your hooks as well. Every property or function there will be available in your step definitions.

world.js:

module.exports = function() {

  this.World = function World(callback) {
    this.prop = "Hello from the World!";

    this.greetings = function(name, callback) {
      console.log("\n----Hello " + name);
      callback();
    };

    callback();
}

And then in your steps:

var sampleSteps = function() {

    this.Given(/^this is the first sample$/, function (callback) {
      console.log("\n----" + this.prop);
      callback();
    });

    this.Given(/^this is the second sample$/, function (callback) {
      this.greetings("everybody", callback);
    });

};

module.exports = sampleSteps;

Your protractor.js configuration file would look something like this:

exports.config = {

  specs: [
    'e2e/features/*.feature'
  ],

  capabilities: {
    'browserName': 'chrome'
  },

  baseUrl: 'http://localhost:8081/',

  framework: 'cucumber',

};

This the GitHub repository.

https://github.com/plopcas/st-protractor-cucumber

Hope this helps.

Answer 2

Take a look at protractor-cucumbe -- it comes with selenium-webdriver, supports Promises, and is well documented.

It seems to require minimal configuration, and what is required is clearly documented.