Fraser
Fraser

Reputation: 14246

Protractor & Cucumber. this.visit is not a function

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

Upvotes: 2

Views: 1944

Answers (1)

asnov
asnov

Reputation: 168

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

Upvotes: 3

Related Questions