Waltir
By: Waltir

Maintainable Nightwatch JS Tests Using The Page Object Model (POM)

Cover Image for Maintainable Nightwatch JS Tests Using The Page Object Model (POM)

Nightwatch.js is a powerful and popular automated testing framework for web applications that allows developers to write automated tests in JavaScript. One of the key features of Nightwatch.js is its page object model, which allows developers to create reusable and maintainable tests by breaking them down into smaller, modular parts.

Page Objects

A page object is an abstraction of a web page that contains methods to interact with the page's elements. These methods can include actions such as clicking buttons, filling out forms, and asserting the presence of certain elements. By creating page objects for each web page in an application, developers can write tests that are more readable and maintainable, as the implementation details of interacting with a web page are abstracted away.

For example, instead of writing a test that directly interacts with a web page's HTML elements, a test can interact with a page object that represents the web page. This way, if the web page's HTML structure changes, only the page object needs to be updated, rather than updating the test itself.

Commands

Nightwatch.js also provides a way to create custom commands, which are reusable functions that can be used across different tests. These commands can encapsulate complex logic and interactions with web page elements, making the tests that use them more readable and maintainable.

For example, instead of writing a test that directly clicks on a button and fills out a form, a custom command can be created to handle this logic. This way, if the button or form elements change, only the custom command needs to be updated, rather than updating the test itself.

Here is an example of how to use page objects and commands in Nightwatch.js:

Creating a Page Object:

// login.page.js
module.exports = {
  url: function() {
    return this.api.launchUrl + '/login';
  },
  elements: {
    username: {
      selector: 'input[name=username]'
    },
    password: {
      selector: 'input[name=password]'
    },
    submit: {
      selector: 'button[type=submit]'
    }
  },
  commands: [{
    login: function(username, password) {
      return this
        .setValue('@username', username)
        .setValue('@password', password)
        .click('@submit');
    }
  }]
};

This is an example of a page object for a login page. The url function returns the URL of the login page, and the elements object contains selectors for the username, password, and submit button. The commands object contains a custom command called login, which sets the values of the username and password fields and clicks the submit button.

Using the Page Object in a Test:

module.exports = {
  'Login Test': function(browser) {
    var login = browser.page.login();
    login
      .navigate()
      .login('username', 'password')
      .assert.urlContains('dashboard');
  }
};

In this example, the page object is imported into the test and used to navigate to the login page, enter the username and password, and submit the form. The test then asserts that the URL contains "dashboard" (this is a test of a successful login)

Creating a Command:

// login-command.js
exports.command = function(username, password) {
  var login = this.page.login();
  login
    .navigate()
    .login(username, password);

  return this;
};

This is an example of a custom command that performs the login process.

By using the page object model and custom commands in Nightwatch.js, developers can write automated tests that are more readable, maintainable, and less prone to breaking when changes are made to the web application. This not only makes it easier to update and expand the test suite, but also makes it more reliable and accurate.

More Posts

Cover Image for Blocking Ad Traffic In Nightwatch JS
Blocking Ad Traffic In Nightwatch JS
Waltir
By: Waltir

Example showing how you can block unwanted ad traffic in your Nightwatch JS tests....

Cover Image for Blocking Ad Traffic In Cypress
Blocking Ad Traffic In Cypress
Waltir
By: Waltir

Example showing how you can block unwanted ad traffic in your Cypress tests....

Cover Image for Three Ways To Resize The Browser In Nightwatch
Three Ways To Resize The Browser In Nightwatch
Waltir
By: Waltir

Outlining the three different ways to resize the browser in Nightwatch JS with examples....

Cover Image for Happy Path VS Sad Path Testing
Happy Path VS Sad Path Testing
Waltir
By: Waltir

As a test engineer it is crucial that both happy path and sad path use cases have been considered and fully tested...