Nightwatch.js - Get started with automation

It sometimes feels like the robots are coming to the QA world, with automation and automated testing being such a hot topic at the moment.

The inevitable fear for those with no programming experience is how they can adopt the benefits of automation, without the stress of learning to be the next Lead Developer in their organisation.

Introducing Nightwatch.js

Nightwatch.js is a testing solution that lets you use JavaScript (an easy-to-learn scripting language) to write browser-based, end-to-end tests. Whilst you may not be well versed in JavaScript, Nightwatch is put together in a way that makes testing a breeze.

In this article I’ll show you how to get Nightwatch installed and running tests in Chrome.

Preparation

These installation steps assume you’re using a Mac or Linux machine. The steps are very similar if you’re using Windows, but if you get stuck just contact us.

Installing NodeJS

The first piece of software you’ll need installed on your machine is NodeJS. Node allows you to run JavaScript programs on any machine. To do this:

Navigate to the NodeJS website.
On the front page, click the download button for the most recent Long-Term Support (LTS) version.
Once you’ve downloaded the installer, open it and step through the installation (it’s just a case of next-next-next)

Prepare your workspace

You’re going to need a working folder, within which we’ll place our tests, and the various bits and pieces we need to get up and running.

Open a Terminal window (on Mac you can press CMD+Space and type “Terminal”)
Change to your home directory by typing:

cd ~

Create a new directory called “automation”:

mkdir automation

Now change to this new directory:

cd automation

Create a new folder for binary files:

mkdir bin

Finally, create a new folder for tests:

mkdir tests

Selenium Server

Nightwatch.js uses Selenium to perform tests, so you’re going to need a copy of Selenium Server:

You might find it easier to open this folder outside of the Terminal. On MacOS you can do this simply by typing open bin
Head to the Selenium Downloads page, and click the download link for the latest version of Selenium Standalone Server.
This should download a JAR file, simply copy/paste this file into the bin folder.

Chrome Driver

I’m going to assume you have Chrome installed on your machine, but there are drivers for all major browsers if you don’t.

This driver allows Selenium to control Chrome for you. The steps to fetch this are very similar to the Selenium Server steps above:

Navigate to the Chrome Driver Downloads page, and click the link to the latest release.
You’ll be presented with a list of ZIP files; click on the link relevant to your operating system (e.g. *chromedriver_mac64.zip- for Mac users)
Once downloaded, you should extract the contents of this ZIP file into the bin folder we created in the steps above.

Installing Nightwatch.js

Create a Nightwatch configuration file

Assuming you’ve followed the steps above, you should have a folder called automation, that contains a bin folder with a copy of Selenium Standalone Server and Chrome Driver in it, and an empty tests folder.

The next thing we’re going to do is create a configuration file for Nightwatch.js to refer to. I won’t go into the details on each of the settings in this article, for now you can refer to configuration documentation on the Nightwatch.js site.

Open your favourite text editor, and create a file called nightwatch.json. Save this in the automation folder.
Paste the following content into this new file:

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",

  "selenium" : {
    "start_process" : true,
    "server_path" : "bin/selenium-server-standalone-3.0.1.jar",
    "log_path" : "",
    "port" : 4444,

    "cli_args" : {
      "webdriver.chrome.driver" : "bin/chromedriver"
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,

      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },

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

Install Nightwatch

Open your Terminal window. If you’re not already there, be sure to change to the automation directory by typing cd ~/automation.
Install nightwatch by typing npm install nightwatch.

It’s important to note that you can install nightwatch globally on your machine by typing npm install -g nightwatch. This has the benefit of allowing you to run nightwatch from any folder, however I favour a local install myself.

Your first test

Create a new file within your automation/tests folder called firstTest.js.
Paste in the following content and save the file:

module.exports = {
  'Basic Google search' : function (browser) {
    browser
      .url('https://www.google.com')
      .waitForElementVisible('input[name="q"]', 1000)
      .setValue('input[name="q"]', 'Guinea pig existential crisis')
      .submitForm('form')
      .waitForElementVisible('#resultStats', 1000)
      .assert.urlContains('q=Guinea+pig')
      .end();
  }
};

Now for the moment of truth, from your Terminal window (within the automation directory) simply run node node_modules/nightwatch/bin/nightwatch.
You should Chrome open and a basic search be performed.

That’s it!

You now have your very own automation engine ready and waiting at your command!

Check out the Nightwatch.js website for a list of the different commands and assertions that are available to you, and let us know in the comments if there is something you’d like us to cover next.