Automation Testing with Nightwatch JS and Cucumber: Everything You Need to Know

What is Automation?

Software testing is a process to evaluate the functionality of an application, to verify if the specified requirements are met, and to identify the defects for ensuring and availing a defect-free product. The process, when done manually by a human, is termed as manual testing and it demands efforts and time. In order to save the same, automation testing came as a concept. Automation Testing refers to setting up a procedure to implement the manual tasks automatically without it being monitored. The below diagram clarifies the concept better:

600.png

When we discuss automation, the first prime thing is the tool selection for building a test execution framework which can achieve the below purposes :

  • Maintaining consistency of testing

  • Improves test structuring

  • Minimum usage of code

  • Less maintenance of code

  • Improve reusability

What is Nightwatch JS?

Nightwatch.js is an automated testing framework for web applications and websites, written in Node.js and using the 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 protocol is defined by the W3C WebDriver spec, which is derived from JSON Wire protocol. The latest version available in market is 1.0.

Nightwatch 2.png

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

Installation and Configuration of Nightwatch Framework

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

●     IDE like Visual Studio Code

●     Download latest Node.js

●     Install npm

$ npm install

●     Package.json file for the test settings and dependencies

$ npm init

●     Install nightwatch and save as dev dependency

$ npm install nightwatch --save-dev

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

$ npm install chromedriver --save-dev
  • Create a nightwatch.conf.js for webdriver and test settings with nightwatch

Using Nightwatch - Writing and Running Tests

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

$ npm test

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. Whichever element is required can be used in the step definitions file with selector name defined in page objects. Given below is a snapshot of the same.

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

locateStrategy: async function (selector) {
        return await selector.startsWith('/') ? 'xpath' : 'css selector';
    }

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

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 end-user experience

●     Style of writing tests allow for easier reuse of code in the tests

●     Quick and easy set up and execution

●     Efficient tool for testing

We add cucumber as dev dependency in the code

$ npm install --save-dev nightwatch-api nightwatch cucumber chromedriver cucumber-pretty

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.

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

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,

Given(/^I open Google's search page$/, () => {
  return client
    .url('http://google.com')
    .waitForElementVisible('body', 1000);
});

OR

Given(/^I open Google's search page$/, async () => {
  await client
    .url('http://google.com')
    .waitForElementVisible('body', 1000);
});
$ npm run e2e-test

Executing Individual Feature Files or Scenarios

  • Single feature file

npm run e2e-test -- features/file1.feature
  • Multiple feature files

npm run e2e-test -- features/file1.feature features/file2.feature
  • Scenario by its line number

npm run e2e-test -- features/my_feature.feature:3
  • Feature directory

npm run e2e-test -- features/dir
  • Scenario by its name matching a regular expression

npm run e2e-test -- --name "topic 1"

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. Below given are the examples.

# google.feature
@google
Feature: Google Search
@search
Scenario: Searching Google
  Given I open Google's search page
  Then the title is "Google"
  And the Google search form exists
  • Single tag

npm run e2e-test -- --tags @google
  • Multiple tags

	npm run e2e-test -- --tags "@google or @duckduckgo"
npm run e2e-test -- --tags "(@google or @duckduckgo) and @search"
  • To skip tags

npm run e2e-test -- --tags "not @google"
npm run e2e-test -- --tags "not(@google or @duckduckgo)"

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. 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.

$ npm install --save-dev cucumber-html-reporter mkdirp

Cucumber-html-reporter in node_modules manages the creation of reports and generates in the output location after the test execution. It can contain screenshots of step passes and failures. This is a very handy feature as it provides an immediate visual clue of a possible problem and will simplify the debugging process. We can enable it by adding the below code snippet in nightwatch.conf.js

module.exports = {
  test_settings: {
    default: {
      screenshots: {
        enabled: true,
        path: 'screenshots'
      } }  } };

The Cucumber configuration file can be extended with the handling of screenshots and attaching them to the report. Also, the HTML report generation can be configured here. This report is generated based on Cucumber builtin JSON report using different templates. We use a setTimeout as we want to run the generation after Cucumber finishes with the creation of json report.

In package.json file, we have added the JSON formator which generates a JSON report and it is used by cucumber-html-reporter to generate the HTML report. We use mkdirp to make sure report folder exists before running the test.

   "scripts": {
       "e2e-test": "mkdirp report && cucumber-js --require cucumber.conf.js --require step-definitions --format node_modules/cucumber-pretty --format json:report/cucumber_report.json"
   }

After adding this, run the command again

npm run e2e-test

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

Nightwatch 3.png

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.

About the Author

1.jpg

Satabdi is an experienced QA Engineer in Automation. She has worked in behavior-driven framework with Nightwatch, JavaScript, and Cucumber and developed data-driven framework with Selenium, Java, and TestNG. She has worked in Continuous Integration process with Semaphore, TFS, and Jenkins to improve testing practices and deliver quality product. In her free time she loves singing and photography.