Creating a standard login.js file for seamless integration with nightwatch.js testing

Question

Creating a standard login.js file for seamless integration with nightwatch.js testing

When creating tests for my web application, I need to first simulate a login before proceeding with the rest of the tests to access inner pages. Currently, I am in the process of refactoring the code so that I can create an 'include' for common functions like logging in. However, when I move the code snippet below to a separate file and include it using require, it does not function as expected.

For example, the following code successfully logs in and enables other functions when included in the same file above inner screen functions:

// Login screen, creating opportunity

this.LoginScreen = function(browser) {
        browser
                .url(Data.urls.home)
                .waitForElementVisible('#login', 2000, false)
                .click('#login')
                // Remaining login steps...
 
        Errors.checkForErrors(browser);
};     

// Inner functions continue here sequentially

However, once I move the login code to a separate file called Logins.js and include it at the top of the original test file using the correct path:

var Logins      = require("../../lib/Logins.js");

The login simulation no longer works. Any suggestions? Should I consider removing the this.LoginScreen function wrapper and calling it differently when executing it from the external file, or do I need to invoke it again within the original file in addition to the external require statement?

I have also attempted wrapping 'module.exports = {' around the login function in the separate file without success.

javascript selenium npm nightwatch.js

Answer 1

Answer №1

Nightwatch offers the ability to execute Page object based tests, allowing you to externalize common test functions for use in your regular tests. This can be accomplished by using the 'page_objects_path' property. I have included a common 'login' function and utilized it in a sample 'single test' within the project found here.

How It Works:

To get started, place your common function in a .js file located within a folder (ex: tests/pages/login.js) and specify the folder path in the Nightwatch config file as shown below:

 nightwatch_config = {
      src_folders : [ 'tests/single' ],
      page_objects_path: ['tests/pages'],

Below is an example of a common login function (login.js):

var loginCommands = {

  login: function() {
    return this.waitForElementVisible('body', 1000)
      .verify.visible('@userName')
      .verify.visible('@password')
      .verify.visible('@submit')
      .setValue('@userName', 'Enter Github user name')
      .setValue('@password', 'Enter Github password')
      .waitForElementVisible('body', 2000)

  }
};

 module.exports = {
      commands: [loginCommands],
        url: function() {
          return 'https://github.com/login';
        },
      elements: {
        userName: {
          selector: '//input[@name=\'login\']',
          locateStrategy: 'xpath'
        },
        password: {
          selector: '//input[@name=\'password\']',
          locateStrategy: 'xpath'
        },
        submit: {
          selector: '//input[@name=\'commit\']',
          locateStrategy: 'xpath'
        }
      }
    };

Once set up, create an object for the common function in your regular test file and utilize it as follows:

 module.exports = {
      'Github login Functionality' : function (browser) {

    //create an object for login
    var login = browser.page.login();
    //execute the login method from //tests/pages/login.js file
    login.navigate().login();

    //Continue with your tests below:
    // You can also leverage similar Page objects to enhance reusability
        browser
        .pause(3000)
          .end();
      }
    };

Answer 2

Nightwatch offers the ability to execute Page object based tests, allowing you to externalize common test functions for use in your regular tests. This can be accomplished by using the 'page_objects_path' property. I have included a common 'login' function and utilized it in a sample 'single test' within the project found here.

How It Works:

To get started, place your common function in a .js file located within a folder (ex: tests/pages/login.js) and specify the folder path in the Nightwatch config file as shown below:

 nightwatch_config = {
      src_folders : [ 'tests/single' ],
      page_objects_path: ['tests/pages'],

Below is an example of a common login function (login.js):

var loginCommands = {

  login: function() {
    return this.waitForElementVisible('body', 1000)
      .verify.visible('@userName')
      .verify.visible('@password')
      .verify.visible('@submit')
      .setValue('@userName', 'Enter Github user name')
      .setValue('@password', 'Enter Github password')
      .waitForElementVisible('body', 2000)

  }
};

 module.exports = {
      commands: [loginCommands],
        url: function() {
          return 'https://github.com/login';
        },
      elements: {
        userName: {
          selector: '//input[@name=\'login\']',
          locateStrategy: 'xpath'
        },
        password: {
          selector: '//input[@name=\'password\']',
          locateStrategy: 'xpath'
        },
        submit: {
          selector: '//input[@name=\'commit\']',
          locateStrategy: 'xpath'
        }
      }
    };

Once set up, create an object for the common function in your regular test file and utilize it as follows:

 module.exports = {
      'Github login Functionality' : function (browser) {

    //create an object for login
    var login = browser.page.login();
    //execute the login method from //tests/pages/login.js file
    login.navigate().login();

    //Continue with your tests below:
    // You can also leverage similar Page objects to enhance reusability
        browser
        .pause(3000)
          .end();
      }
    };

Answer 3

Answer №2

The response provided above is indeed accurate, although I encountered some difficulty in figuring out how to input user login details.

After some trial and error, this is the solution I ultimately implemented:

var loginCommands = {

    login: function() {
      return this.waitForElementVisible('body', 1000)
        .setValue("#email", "<some rnd email address>")
        .setValue('#password', "<some rnd password>")
        .click('button[type=submit]')
        .pause(1000)
    }
  };
  
  module.exports = {
    commands: [loginCommands],
      url: function() {
        return 'https://example.com/login';
      }
  };

This code snippet can be utilized in a similar manner as the approved answer, provided here for the benefit of others who might be searching for it.

Answer 4

The response provided above is indeed accurate, although I encountered some difficulty in figuring out how to input user login details.

After some trial and error, this is the solution I ultimately implemented:

var loginCommands = {

    login: function() {
      return this.waitForElementVisible('body', 1000)
        .setValue("#email", "<some rnd email address>")
        .setValue('#password', "<some rnd password>")
        .click('button[type=submit]')
        .pause(1000)
    }
  };
  
  module.exports = {
    commands: [loginCommands],
      url: function() {
        return 'https://example.com/login';
      }
  };

This code snippet can be utilized in a similar manner as the approved answer, provided here for the benefit of others who might be searching for it.

Creating a standard login.js file for seamless integration with nightwatch.js testing

Answer №1

Answer №2

Similar questions

Adjusting column widths in Material-Table: A guide to resizing columns

Module 'Ember-template-compiler' not found after upgrading to version 2.12.1 - experiencing difficulty locating

The form within the dynamically loaded AJAX content is malfunctioning

The error notification is not appearing in the correct location

Retrieving information from an ajax array in PHP

Issue with nextjs not returning the updated object correctly

Document: include checksum in HTML

Vue.JS and its Onclick event handler allows for dynamic and interactive

The image component is missing the necessary "src" attribute even though a valid src value has been provided as a prop

React - z-index issue persists

Utilizing Google Maps API to automatically set an address on page load

React App anchor tag's external links fail to function properly on subsequent clicks when accessed through mobile devices

In the event that the get request fails, go ahead and clear the

Ensure that the extension is only loaded once Angular has fully loaded

What is the best way to extract valid objects from a string in JavaScript?

utilizing BrowserRouter for dynamic routing in react-router-dom

Is the value of the object in the array already present in another array of objects?

Do we need to include href in the anchor tag?

Error encountered: java.net.SocketException - Connection reset when executing driver.close() or driver.quit() in Selenium

Utilizing Robot Framework to select CSS attributes