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

Activate the popup for sharing or bookmarking by clicking on a regular link

Tips for dividing a hefty sub file into individual chunks using webpack 2

Is it possible to view a PDF file stored on a mobile device using Appium for Android?

What is causing this to function properly on Firefox but not on Chrome or IE?

Selenium is encountering an issue where it is unable to automatically download files, as the download confirmation

Updating the display text length on vue-moment

Guide on how to modify a static css file using Node.js

Struggling to reveal concealed items on a webpage using jQuery and attempting to cycle through an array without success

The property of undefined map cannot be read

The issue with ng-change is causing the previously selected drop down option to be cleared

Various concatenated and compressed JavaScript files across multiple HTML documents within a single application

Implementing onbeforeunload event on body tag with jQuery for Chrome and IE browsers

Adding a new element with Jquery when a dropdown option is selected

Troubleshooting Bootstrap bug caused by rollupPluginBabelHelpers

HashRouter prevents the Framer Motion exit animation from functioning properly

Is file timestamp utilized by Apache to verify if a resource has been changed?

jQuery-chosen - Transfer custom attribute from chosen option to list when selected

Changing directions while the script is running

Click to switch CodeMirror's theme

Customize RequireJS dependencies for flexible dependency injection