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.
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.
- Lightweight framework
- Robust configuration
- 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
- Package.json file for the test settings and dependencies
- Install nightwatch and save as dev dependency
- Install chromedriver/geckodriver and save as dev dependency for running the execution on the required browser
- Create a nightwatch.conf.js for webdriver and test settings with nightwatch
Using Nightwatch — Writing and Running Tests
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.
The locator strategy is set to CSS and Xpath to inspect the UI elements.
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
- An efficient tool for testing
We add cucumber as dev dependency in the code
Cucumber can be configured in the Nightwatch framework to help to maintain 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 web driver 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,
Executing Individual Feature Files or Scenarios
- Single feature file
- Multiple feature files
- Scenario by its line number
- Feature directory
- Scenario by its name matching a regular expression
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
- Multiple tags
- To skip tags
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.
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
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.
After adding this, run the command again
When the test run completes, the HTML report is displayed in a new browser tab in the format given below:
This post was originally published on Velotio Blog.
Velotio Technologies is an outsourced software product development partner for technology startups and enterprises. We specialize in enterprise B2B and SaaS product development with a focus on artificial intelligence and machine learning, DevOps, and test engineering.