Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using pages object in Nightwatch JS

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?

like image 787
Allyl Isocyanate Avatar asked Nov 03 '15 00:11

Allyl Isocyanate


People also ask

What is Page object model in Cypress?

Page Object Model, also known as POM, is a design pattern that creates an object repository for storing all web elements. It is useful in reducing code duplication and improves test case maintenance. In the Page Object Model, consider each web page of an application as a class file.

How do I use NightwatchJS?

In order to use NightwatchJS with cucumber, we need to first add cucumber as a dev dependency in the code. The below package. json can be used next for the test settings and dependencies. After this, we need to create nightwatch.

What is Nightwatch js used for?

Nightwatch. js is an integrated, easy to use End-to-End testing solution for web applications and websites, written in Node. js. It uses the W3C WebDriver API to drive browsers and perform commands and assertions on DOM elements.

What is the command to run the script Nightwatch?

You can add Nightwatch to your project simply by running npm install nightwatch --save-dev .


2 Answers

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();
  }
}
like image 191
Nicole Zhang Avatar answered Nov 01 '22 11:11

Nicole Zhang


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.

like image 1
Marty Avatar answered Nov 01 '22 12:11

Marty