Introduction to Nightwatch JS

In this blog, we are going to take a look at how you can intsall and configure Nightwatch JS, and its integration with Jenkins. Before that let's find out what Nightwatch JS is and what are its features.

What is Nightwatch JS?

Nightwatch.js is an easy to use Node.js based end-to-end (E2E) testing solution for browser based apps and websites. It uses the powerful W3C WebDriver API to perform commands and assertions on DOM elements. 

Features of Nightwatch JS

• Clean syntax : Simple but powerful syntax which enables you to write tests very quickly, using only Javascript (Node.js) and CSS or Xpath selectors. 
• Built-in Test Runner : Built-in command-line test runner which can run the tests either sequentially or in parallel, together, by group, tags or single. Grunt support is built-in. 
• Selenium Server : Controls the Selenium standalone server automatically in a separate child process; which can be disabled if Selenium runs on another host. 
• Cloud Services Support : Works with cloud testing providers, such as SauceLabs and BrowserStack. 
• CSS and XPath Support : Either CSS or Xpath selectors can be used to locate and verify elements on the page or execute commands. 
• CI Support : JUnit XML reporting is built-in, so you can integrate your tests in your build process with systems such as Teamcity, Jenkins, Hudson etc. 
• Easy to extend : Flexible command and assertion framework which makes it easy to extend, in order to implement your application specific commands and assertions.  

How does Nightwatch JS works?

Nightwatch works by communicating over a restful HTTP api with a WebDriver server (typically the Selenium server). The restful API protocol is defined by the W3C WebDriver API. See below for an example workflow for browser initialization.

Most of the times, Nightwatch needs to send at least 2 requests to the WebDriver server in order to perform a command or assertion:

• First is the request to locate an element given a CSS selector (or Xpath expression) 
• Second request is to perform the actual command/assertion on the given element

Installation:

Assuming you have nodejs installed in your system, here’s how to go about installing Nightwatch JS

• To install the latest version using the npm command line tool, run the following: $ npm install [-g] nightwatch where ‘g’ is for installing globally 
• Make sure you have Java installed and Selenium server standalone jar downloaded in your system 
• Selenium Server Setup : Start selenium server using command:
  
  selenium-server-standalone-{VERSION}.jar

Configuration:

The test runner expects a configuration file to be passed, using a nightwatch.json file from the current directory by default, if present. A nightwatch.conf.js file will also be loaded by default, if found.
Let's create the nightwatch.json in the project's root folder and add this inside:
{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : "",
  "globals_path" : "",

  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName": "firefox",
        "marionette": true
      }
    },

    "chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    },

    "edge" : {
      "desiredCapabilities": {
        "browserName": "MicrosoftEdge"

Create your Test Case in Nightwatch.js

We basically define your tests within a Node module:

module.exports = {
    "My test case": function(browser){
        // control the browser
    }
}

• Nightwatch then invokes that test methods, passing you a “browser” object which you can control by invoking some Nightwatch commands or assertions. That’s pretty much it. 
• Under the hood, the Nightwatch test runner communicates with the Selenium server over the Selenium WebDriver Wire protocol. 
• The Nightwatch test runner can be controlled through command line arguments. However I strongly suggest you use the settings.json file where you specify the behavior of the runner, the input and output directories, and the Selenium component. 

Run Test Case in Nightwatch JS

• Nightwatch <filename.js> 

Integration with Jenkins

Jenkins is an open-source continuous integration server written in Java. It is by far the most widely used tool for managing continuous integration builds and delivery pipelines. 

In order to integrate Jenkins with Nighwatch JS, you first need to have the same installation setup on the server where Jenkins is running:

• Node.js and npm 
• Firefox installed (as it will be used by the Selenium Server by default) 
• (Nightwatch, selenium standalone server etc…will be delivered by our setup) 
• Running nightwatch is done by simply invoking it from a batch command : nightwatch <filename.js>
   
• The runner will produce a nice JUnit compatible XML file which can be taken by Jenkins for presenting the results and eventual failures to us.
   

So that's how you can install and started working with Nightwatch JS. If you found this blog useful, read more about PhantomJS and ChimpJS. Also watch our webinar on Eliminating JavaScript Codesmells.