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.

Answer 3

I've gotten good milage from this setup

  class ChtWorld
    chai = require('chai');
    chaiAsPromised = require('chai-as-promised');

    constructor:  ->
      @browser = @protractor = require('protractor').getInstance()
      @By = @protractor.By
      chai.use(chaiAsPromised)
      @expect= chai.expect


  module.exports= ->
    this.World= (callback) ->
      w = new ChtWorld()
      callback(w)

Since protractor is already setup, just getting a reference to it is sufficient (note that for Cucumber to correctly load up the new world, the modules.exports has to be just right).

As a side note, this is located in features/support/world.coffee, and not explicitly added to the 'requires' list (trying to do that got me into Gherkin Lexing error problems).

Answer 4

Add it as a framework in the configuration file:

exports.config = {
  // set to "custom" instead of cucumber.
  framework: 'custom',

  // path relative to the current config file
  frameworkPath: 'protractor-cucumber-framework'

  // relevant cucumber command line options
  cucumberOpts: {
    format: "summary"
  }
};

More information here: Protractor Frameworks