What is Nightwatch JS?

Nightwatch.js is a test automation framework on web applications, developed in Node.js which uses W3C WebDriver API (formerly Selenium WebDriver). It is a complete End-to-End testing solution which aims to simplify writing automated tests and setting up Continuous Integration. Nightwatch works by communicating over a restful HTTP API with a WebDriver server (such as ChromeDriver or Selenium Server). The latest version available in market is 1.0.

Why Use Nightwatch JS Over Any Other Automation Tool?

Selenium is demanded for developing automation framework since it supports various programming languages, provides cross-browser testing and also used in both web application and mobile application testing.

But Nightwatch, built on Node.js, exclusively uses JavaScript as the programming language for end-to-end testing which has the listed advantages -

• Lightweight framework
• Robust configuration
• Integrates with cloud servers like SauceLabs and Browserstack for web and mobile testing with JavaScript, Appium
• Allows configuration with Cucumber to build a strong BDD (Behaviour Driven Development) setup
• High performance of the automation execution
• Improves test structuring
• Minimum usage and less Maintenance of code

Installation and Configuration of Nightwatch Framework

For configuring Nightwatch framework, all needed are the following in your system -

• Download latest Node.js
• Install npm

CODE: https://gist.github.com/velotiotech/fc7a60a88ebc59c973da45c71b1decfa.js

• Package.json file for the test settings and dependencies

CODE: https://gist.github.com/velotiotech/b1d19a5a02236585c3e1ded2b7dd6441.js

• Install nightwatch and save as dev dependency

CODE: https://gist.github.com/velotiotech/b4a72f4a4566a899fd5aff4b239e8fef.js

• Install chromedriver/geckodriver and save as dev dependency for running the execution on the required browser

CODE: https://gist.github.com/velotiotech/d5a485e825f3efbdb9bf994cd58d5c01.js

CODE: https://gist.github.com/velotiotech/cf867a98fa0f38a09b09d1526b116f44.js

• Create a nightwatch.conf.js for webdriver and test settings with nightwatch

CODE: https://gist.github.com/velotiotech/74bfcfbf6f9b666d8a1ad59494fa0c46.js

Using Nightwatch - Writing and Running Tests

We create a JavaScript file named demo.js for running a test through nightwatch with the command

CODE: https://gist.github.com/velotiotech/6d7cec2c57b9d5450359892293895ae6.js

CODE: https://gist.github.com/velotiotech/0626597c25ecd2be1f0886ef125a14fa.js

This command on running picks the value “nightwatch” from “test” key in package.json file which hits the nightwatch api to trigger the URL in chromedriver.

There can be one or more steps in demo.js(step definition js) file as per requirement or test cases.

Also, it is a good practice to maintain a separate .js file for page objects which consists of the locator strategy and selectors of the UI web elements.

CODE: https://gist.github.com/velotiotech/8e5735f1be067d39211566e08219e53d.js

The locator strategy is set to CSS and Xpath to inspect the UI elements.

CODE: https://gist.github.com/velotiotech/a2278170a68ab2fb4a8873200562e3f0.js

Nightwatch.conf.js file is also updated with the page_objects location.

CODE: https://gist.github.com/velotiotech/634240cf58b4e1357293058ce54ce206.js

Nightwatch and Cucumber JS

Cucumber is a tool that supports Behavior Driven Development (BDD) and allows to write tests in simple english language in Given, When, Then format.

• It is helpful to involve business stakeholders who can't easily read code
• Cucumber testing focuses on covering the UI scenarios from end-user’s perspective
• Reuse of code is easily possible
• Quick set up and execution
• Efficient tool for UI testing

We add cucumber as dev dependency in the code.

CODE: https://gist.github.com/velotiotech/202f1448655a0f9e5575634f5a8f69f1.js

CODE: https://gist.github.com/velotiotech/26b502652e1cdaa71f4fe5f06783d534.js

Cucumber can be configured in the nightwatch framework to help maintaining the test scenarios in its .feature files. We create a file cucumber.conf.js in the root folder which has the setup of starting, creating and closing webdriver sessions.

CODE: https://gist.github.com/velotiotech/aff22e696207e3cc5b1a6a13c6cb0992.js

Then we create a feature file which has the test scenarios in Given, When, Then format.  

CODE: https://gist.github.com/velotiotech/74c45ced3a76e3701e7531d42438d844.js

For Cucumber to be able to understand and execute the feature file we need to create matching step definitions for every feature step we use in our feature file. Create a step definition file under tests folder called google.js. Step definitions which uses Nightwatch client should return the result of api call as it returns a Promise. For example,

CODE: https://gist.github.com/velotiotech/5a85cd75791e96c2117e8db0870db020.js

OR

CODE: https://gist.github.com/velotiotech/b058c53e74912fab85e0915ae95e8338.js

CODE: https://gist.github.com/velotiotech/a54c03c982252d1a85034f05435ba6da.js

CODE: https://gist.github.com/velotiotech/9bdde9cb678fc8fd6c242c61d5745629.js

Executing Individual Feature Files or Scenarios

• Single feature file

CODE: https://gist.github.com/velotiotech/b104334ddb2bda1687dcb7be68063726.js

• Multiple feature files

CODE: https://gist.github.com/velotiotech/0729650f13d6330cb42e38fd1d813df0.js

• Scenario by its line number

CODE: https://gist.github.com/velotiotech/a74dbf87b601a508e79dd4fca3a15900.js

• Feature directory

CODE: https://gist.github.com/velotiotech/32695076bbb53f41d589d94ebdb4386a.js

• Scenario by its name matching a regular expression

CODE: https://gist.github.com/velotiotech/ecf961d60d43d6d1ffc67ba55d60a5ff.js

Feature and Scenario Tags

Cucumber allows to add tags to features or scenarios and we can selectively run a scenario using those tags. The tags can be used with conditional operators also, depending on the requirement.  

• Single tag

CODE: https://gist.github.com/velotiotech/344a9f29d6f894a7a5345d95899775d8.js

CODE: https://gist.github.com/velotiotech/9e554d5327c1fccc704d5e7926de6684.js

• Multiple tags

CODE: https://gist.github.com/velotiotech/3664da68423007a2bd2b1670aaa18972.js

• To skip tags

CODE: https://gist.github.com/velotiotech/9cfdd0992708535617fb869357b61ad9.js

Custom Reporters in Nightwatch and Cucumber Framework

Reporting is again an advantage provided by Cucumber which generates a report of test results at the end of the execution and it provides an immediate visual clue of a possible problem and will simplify the debugging process. HTML reports are best suited and easy to understand due to its format. To generate the same, we will add cucumber-html-reporter as a dependency in our nightwatch.conf.js file.

CODE: https://gist.github.com/velotiotech/fd7c2f0fa8acdd73bf17edc881bd682f.js

Cucumber-html-reporter in node_modules manages the creation of reports and generates in the output location after the test execution. Screenshot feature can enabled by adding the below code snippet in nightwatch.conf.js

CODE: https://gist.github.com/velotiotech/61a07abace907096ce759d3e39de5a55.js

The Cucumber configuration file can be extended with the handling of screenshots and attaching them to the report. Now - It also enables generating HTML test report at the end of the execution. It is generated based on Cucumber built-can be configured here in JSON report using different templates. We use a setTimeout() block in our cucumber.conf.js to run the generation after Cucumber finishes with the creation of json report.

CODE: https://gist.github.com/velotiotech/e3ee490b5814ed95f714fa30d3523535.js

In package.json file, we have added the JSON formatter to create a JSON report and it is used by cucumber-html-reporter for the same. We use mkdirp to make sure report folder exists before running the test.

CODE: https://gist.github.com/velotiotech/14dc1b8ef6d7c562f51b3517c9c7d590.js

After adding this, run the command again

CODE: https://gist.github.com/velotiotech/d856fc92f0ac1ac3dabb9a975f752805.js

When the test run completes, the HTML report is displayed in a new browser tab in the format given below

Conclusion

Nightwatch-Cucumber is a great module for linking the accessibility of Cucumber.js with the robust testing framework of Nightwatch.js. Together they can not only provide easily readable documentation of test suite, but also highly configurable automated user tests, all while keeping everything in JavaScript.