Using pages object in Nightwatch JS

Question

I'm using nightwatch "0.8.6". Per the documentation on pages, I've created a pages/login.js file and add the directory to the config file with:

module.exports = {
  url: function() {
    return this.launchUrl;
  }
};

The documentation mentions this.api, but thats not a property of the client / browser. this.launchUrl apparently is available, however.

I changed an existing test to use it:

module.exports = {
  'Login page has a login button' : function (browser) {
    browser
      .url(browser.page.login().url())
      .waitForElementVisible('body', 10000)
      .assert.containsText('button', 'SIGN IN')
      .end();
  }
}

The test now fails. .url tries to open selenium with data:,, instead of the value of this.launchUrl, which is localhost:3000.

The page object is apparently evaluated in the context of the login test, so this in the page object should have this.launchUrl. Diving into the source I see there are also page wrapper objects in the mix, somehow.

How can I use correctly create and use a page object in 0.8.6?

Answer 1

I think you can try to add one var to call the login.js page. like this:

module.exports = {
  'Login page has a login button' : function (browser) {

    var LoginPage = browser.page.login();
        LoginPage.navigate();

        LoginPage
         .waitForElementVisible('body', 10000)
         .assert.containsText('button', 'SIGN IN')
         .end();
  }
}

Answer 2

So according to the docs you have to: - "Each page object should be located in a separate file, located in a designated folder. Nightwatch reads the page objects from the folder (or folders) specified in the page_objects_path configuration property."

Have you configured your page_objects_path directory?

Once you have done this you can create a js file in that folder, such as:

module.exports = function(client) {
  return {
    gotoUrl: function() {
      return client
        .url(client.launchUrl);
    },
  };
};

And then you can write your test like:

module.exports = {
  'Login page has a login button': (browser) => {
    browser.page.pagescriptname()
      .gotoUrl()
      .waitForElementVisible('body', 10000)
      .assert.containsText('button', 'SIGN IN')
      .end();
  }
}

Make sure that you have configured launch_url in your nightwatch.js file (or this can be changed dynamically (which I have done for my project) via the nightwatch.conf.js file.