Nightwatch.js is one of the tools which I came across in one of my projects where we had a react, redux  web application and wanted to write an end-to-end testing solution for the same.

Nightwatch.js is an automated testing framework for web applications and websites, written in node.js and uses Selenium Webdriver API.

 

How it works:

Nightwatch communicates via a restful HTTP API with a WebDriver server. It sends requests to the Webdriver server to locate an element (using a css selector or xpath ) and to perform the commands or assertions on the element.

 

Why Nightwatch:

  • Quick setup and easy to write
  • Uses css or xpath as selectors
  • Built-in support for POM
  • Built-in test runner
  • Saucelabs + browserstack support
  • Custom commands + custom assertions possible
  • Can also be used to write Node.js Unit tests

 

Requirements:

  • Java JDK >= 7 : http://www.oracle.com/technetwork/java/javase/downloads/index.html
  • Install Node.js: https://nodejs.org/en/
  • Install NightWatch: npm install nightwatch –save-dev
  • Install selenium-download jar:
    • npm i selenium-download –save-dev
      this will install both selenium-server-standalone and chromedriver
  • To run tests in Firefox:
    • If you are using selenium 2.x and have firefox < v48, you should use firefoxdriver
    • If you are using selenium 3.x and have firefox >= v48, you should use geckodriver (https://github.com/mozilla/geckodriver)

 

Setup:

Once you have everything installed, create a nightwatch.conf.js file:

The test runner expects a configuration file to be passed. You can either have config file a json file as ‘nightwatch.json’ file or a js file as ‘nightwatch.conf.js’.

Create the config file in project’s root folder:

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

//save screenshots in case of failures
let FILECOUNT = 0;

function padLeft(count) {
    return count < 10 ? '0' + count : count.toString();
}

function imgpath(browser) {
    let desiredCapabilities = browser.options.desiredCapabilities;
    let meta = [desiredCapabilities.platform];
    meta.push(desiredCapabilities.browserName ? desiredCapabilities.browserName : 'any');
    meta.push(desiredCapabilities.version ? desiredCapabilities.version : 'any');
    let metadata = meta.join('~').toLowerCase().replace(/ /g, '');
    return SCREENSHOT_PATH + metadata + '_' + padLeft(FILECOUNT++) + '_';
}

module.exports.imgpath = imgpath;
module.exports.SCREENSHOT_PATH = SCREENSHOT_PATH;

This would take care of:

  • taking screenshots in case of error/failures.
  • taking config file into account where all settings are mentioned – require(‘./nightwatch.json’);
  • writing tests in ES6 – require(‘babel-core/register’)

 

Create a nightwatch.json file with all settings

This should also be in the project’s root folder:

{
  "src_folders": [
    "test"
  ],
  "output_folder": "./reports",
  "page_objects_path": "",
  "globals_path": "./globals.js",
  "selenium": {
    "start_process": true,
    "server_path": "./node_modules/nightwatch/bin/selenium.jar",
    "host": "127.0.0.1",
    "port": 4444,
    "cli_args": {
      "webdriver.chrome.driver": "./node_modules/nightwatch/bin/chromedriver"
    }
  },
  "test_settings": {
    "default": {
      "launch_url": "https://wordpress.com/",
      "screenshots": {
        "enabled": true,
        "path": "./screenshots",
        "on_error": true,
        "on_failure": true
      }
    },
    "localChrome": {
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    }
  }
}

Let’s view what the above file contains:

  • src_folders: your test files directory
  • output_folder: where your reports will be generated
  • page_objects_path: your pages directory (if you are using POM)
  • globals_path: where your globals are defined (if any)
  • selenium: object which contains all necessary info to run selenium server
  • cli_args: includes path to your chromedriver
  • test_settings: all your settings for tests (includes settings required to run on different environments)
  • launch_url: your test site url
  • screenshots: when to take screenshots and where to store them
  • localChrome (desiredCapabilities): a testing environment and it’s settings required to run tests locally on chrome browser

 

Create a tests folder in the project and write your first test file:

export default {
    before(client) {
        console.log('## Launching WordPress Application ##');
    },

    after(client) {
        console.log('## Tests complete ##');
        client.end();
    },

    'Launch App': (client) => {
        console.log('## Launching app ##');
        client.url("https://wordpress.com/");
        client.waitForElementPresent('body');
        client.expect.element('a[href$="/wordpress.com/"]').to.contain.text('WordPress.com');
        client.end();
    }
};

 

package.json:

Your package.json file will look something like this:

{
  "name": "vodQA-NightWatch",
  "description": "End to End tests",
  "scripts": {
    "test-local-chrome": "node ensureSeleniumJarExists.js && ./node_modules/.bin/nightwatch --config nightwatch.conf.js --env localChrome",
  },
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.18.0",
    "env2": "^2.2.0",
    "nightwatch": "^0.9.11",
    "npm": "^5.3.0",
    "phantomjs": "2.1.1",
    "selenium-download": "^2.0.9"
  }
}

It includes “scripts” which has your config file name: nightwatch.conf.js and your environment “localChrome”, the settings of which we had declared in the nightwatch.json explained in the previous step.

All other dependencies are the packages required to run the tests.

 

ensureSeleniumJarExists.js

This file I created separately in my project’s root folder which just ensures that my selenium and chromedriver jar are installed before I execute my tests:

/**
 this checks for the existence of `selenium.jar` before trying to run tests.
 */
const BINPATH = './node_modules/nightwatch/bin/';

require('fs').stat(BINPATH + 'selenium.jar', function (err, stat) {
    if (err || !stat || stat.size < 1) {
        require('selenium-download').ensure(BINPATH, function (error) {
            if (error) throw new Error(error);
            console.log('✔ Selenium & Chromedriver downloaded to:', BINPATH);
        });
    }
});

 

Run your tests:

To run your tests, you just need to type npm run test-local-chrome in the command prompt.

“test-local-chrome” is the script mentioned in the package.json file.

 

 

You can visit the github repo here: https://github.com/SmritiTuteja/vodQA_Shots_NightWatch or add your comments below for any queries!

 

 

Share if you like : Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *