Protractor & Cucumber. this.visit is not a function - protractor

Question

I'm trying to experiment with protractor and cucumber to add some functional BDD testing to some of our webapps. Piecing together the scraps of information online related to this process, I've managed to piece together a very basic test but when I run the tests with protractor conf.js I get the following error
this.visit is not a function
I'm sure this is something I am doing fundamentally wrong but could someone show me the error of my ways, please?
The full console for this test reads:
Using the selenium server at http://192.168.12.100:4724/wd/hub
[launcher] Running 1 instances of WebDriver
Feature: Example feature
As a user of cucumber.js
I want to have documentation on cucumber
So that I can concentrate on building awesome applications
Scenario: Reading documentation # features/homepage.feature:6
Given I am on the Cucumber.js GitHub repository # features/homepage.feature:7
TypeError: this.visit is not a function
at World.<anonymous> (/Users/fraserh/Documents/WorkingDir/protractor/features/homepageSteps.js:14:11)
at doNTCallback0 (node.js:407:9)
at process._tickCallback (node.js:336:13)
When I go to the README file # features/homepage.feature:8
Then I should see "Usage" as the page title # features/homepage.feature:9
(::) failed steps (::)
TypeError: this.visit is not a function
at World.<anonymous> (/Users/fraserh/Documents/WorkingDir/protractor/features/homepageSteps.js:14:11)
at doNTCallback0 (node.js:407:9)
at process._tickCallback (node.js:336:13)
Failing scenarios:
features/homepage.feature:6 # Scenario: Reading documentation
1 scenario (1 failed)
3 steps (1 failed, 2 skipped)
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 failed 1 test(s)
[launcher] overall: 1 failed spec(s)
[launcher] Process exited with error code 1
I have the following structure:
conf.js
features/homepage.feature
features/homepageSteps.js
conf.js
exports.config = {
framework: 'cucumber',
seleniumAddress: 'http://192.168.12.100:4724/wd/hub', //this is a working selenium instance
capabilities: {
'browserName': 'chrome'
},
specs: ['features/homepage.feature'],
cucumberOpts: {
require: 'features/homepageSteps.js',
format: 'pretty'
}
};
homepage.feature
Feature: Example feature
As a user of cucumber.js
I want to have documentation on cucumber
So that I can concentrate on building awesome applications
Scenario: Reading documentation
Given I am on the Cucumber.js GitHub repository
When I go to the README file
Then I should see "Usage" as the page title
homepageSteps.js
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;
module.exports = function() {
var that = this;
this.Given(/^I am on the Cucumber.js GitHub repository$/, function (callback) {
// Express the regexp above with the code you wish you had.
// `this` is set to a new this.World instance.
// i.e. you may use this.browser to execute the step:
this.visit('https://github.com/cucumber/cucumber-js', callback);
// The callback is passed to visit() so that when the job's finished, the next step can
// be executed by Cucumber.
});
this.When(/^I go to the README file$/, function (callback) {
// Express the regexp above with the code you wish you had. Call callback() at the end
// of the step, or callback.pending() if the step is not yet implemented:
callback.pending();
});
this.Then(/^I should see "(.*)" as the page title$/, function (title, callback) {
// matching groups are passed as parameters to the step definition
var pageTitle = this.browser.text('title');
if (title === pageTitle) {
callback();
} else {
callback.fail(new Error("Expected to be on page with title " + title));
}
});
};

Answer 1

It looks like you took the code example from here: https://github.com/cucumber/cucumber-js
And you missed the next piece of code where this.visit function is created:
// features/support/world.js
var zombie = require('zombie');
function World() {
this.browser = new zombie(); // this.browser will be available in step definitions
this.visit = function (url, callback) {
this.browser.visit(url, callback);
};
}
module.exports = function() {
this.World = World;
};
You will need to install zombie package as well:
npm install zombie --save-dev