REACT & NIGHTWATCH

Nightwatch is an end-to-end test framework. The reasons nightwatch is your best choice can be decided upon the reasons described in this article.

The reasons nightwatch is your best choice can be decided upon the reasons given below:

• Written in Node.js and integrates well with front-end stack.
• Has a built-in test runner, where you can run your tests in parallel.
• Easier to integrate with CI environments like Jenkins or TeamCity
• Test reports & screenshots

In this article, I’ll guide you through the setup process.

Installation

We need Node.js installed to begin with. Follow the link, download Node.js for installation instructions.

Now create a folder for your project and then run the following command in command line.

npm init

Next, we need to install nightwatch.

npm install nightwatch ––save–dev

Now, in order to run tests, we need to download the Selenium standalone server.

npm install selenium-download ––save–dev

We also need to paste the line below into the selenium-download.js file.

Add the following entry to your package.json file’s scripts section.

"test": "./node_modules/.bin/nightwatch"

Selenium

To download the Selenium standalone server, run the following command in the command line:

npm install selenium-download ––save–dev

Now create a file called selenium-download.js and paste the line of code below:

var selenium = require('selenium-download');
selenium.ensure('./bin', function(error) {
   if (error) {
      return callback(error);
   }
});

We will also add a scripts command to run the scripts.

"scripts": {
  "setup": "node selenium-download.js"
}

Now you run the following command in the command line:

npm run setup

This will download the latest version of selenium.

Configuration

In order to configure Nightwatch, we need to create a nightwatch.json as the file for the test runs.

{
  "src_folders": ["tests"],
  "output_folder": "reports",
  "custom_commands_path": "",
  "custom_assertions_path": "",
  "page_objects_path": "pages",
  "globals_path": "globals.js",
 
  "selenium": {
    "start_process": true,
    "server_path": "./bin/selenium.jar",
    "log_path": "./reports",
    "host": "127.0.0.1",
    "port": 4444,
    "cli_args": {
      "webdriver.chrome.driver": "./bin/chromedriver"
    }
  },
  "test_settings": {
    "default": {
      "launch_url": "",
      "selenium_port": 4444,
      "selenium_host": "localhost",
      "silent": true,
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    }
  }
}

Let’s have a close look at this configuaration file.

• src_folders – The tests will be in this array of folders
• out_folder – Test artifacts folder. (Reports, logs and screenshots)
• page_objects_path – The Page Objects will be defined here.
• globals_path – Global variables path will be stored here
• selenium – Settings for Selenium.

The setting desiredCapabilities will make sure Chrome as will be the browser running our tests.

ES6 Support

We will create a nightwatch.conf.js file in the root, in order add few lines.

require('babel-core/register');
 
module.exports = require('./nightwatch.json');

Now we can run our tests in ES6.

Tests Create a tests directory in the root folder and add the test script called login.js.

Now we need to save the login credentials of your preferred site to test. Open up a new terminal session and enter the commands below.

export USERNAME=”your username”
export PASSWORD=”your password”

export default {
  'Log in': (user) => {
    const loginPage = client.page.login();
    const instancesPage = client.page.instancesPage();
 
    loginPage
        .navigate()
        .login(process.env.USERNAME, process.ENV.PASSWORD);
 
    instancesPage.expect.element('');
    user.end();
  }
};

Let’s look at what’s going on in the code.

• User navigates to the login page.
• User logs in using the credentials, saved in the environemnt before.
• The test asserts an element to exist upon login.
• The line, client.end() method will end the browser session.

For non-technical people to understand the steps, we need use the Page Object pattern.

Page Object

Let’s create a folder called pages for page objects and add a login.js file.

const loginCommands = {
  login(email, pass) {
    return this
      .waitForElementVisible('@emailInput')
      .setValue('@emailInput', email)
      .setValue('@passInput', pass)
      .waitForElementVisible('@loginButton')
      .click('@loginButton')
  }
};
 
export default {
  url: 'https://tutsplus.com/sign_in',
  commands: [loginCommands],
  elements: {
    emailInput: {
      selector: 'input[type=text]'
    },
    passInput: {
      selector: 'input[name=password]'
    },
    loginButton: {
      selector: 'button[type=submit]'
    }
  }
};

Global Config

Nightwatch requires a timeout parameter to be passed in, so the test throws an error when the timeout limit is hit.

waitForElementVisible('@anElement', 3000)

We will create a global.js file in the root of your project.

export default {
  waitForConditionTimeout: 10000,
};

Now the Nightwatch methods will have a 10 second timeout.

Run Tests

Now you can run tests by typing the following command in the command line:

nightwatch