Using Nightwatch.js: E2E testing with Angular (Part 1)

Introduction

By default, angular uses Protractor Framework for E2E testing. While that works out of the box, Nightwatch.js provides a fluent API overall. In this tutorial, we would be covering how to implement it in a fresh angular project.

You can also skip the tutorial and may find the Code sample here: https://github.com/sharan-zweck/angular-nightwatch-sample

Prerequisites

• Environment
  • Node / NPM
  • Angular CLI
  • Chrome Browser
• A working Angular project (Visit https://angular.io/ to set up one)
• A Code Editor (I recommend Visual Studio Code)
• Minimal knowledge on TDD (Test Driven Development)

Integrating Nightwatch.js

Let’s start by installing Nightwatch (https://nightwatchjs.org/), easy to use End-to-End testing solution for web applications and websites, written in Node.js. It uses the W3C WebDriver API to drive browsers in order to perform commands and assertions on DOM elements.

npm i nightwatch --save @types/nightwatch --save-dev

Configuring Nightwatch.js

Nightwatch expects a configuration file to execute the runner. Let’s create a file named nightwatch.conf.js at the project root.

Now that we have the file, let’s populate it with basic configuration

module.exports = {
    src_folders: [""],
    live_output: true,
    output_folder: "e2e-test-results",
    webdriver: {
        start_process: true,
        port: 4445,
        server_path: require("chromedriver").path,
        cli_args: ["--port=4445"]
    },
    test_settings: {
        default: {
            launch_url: "http://localhost:8081/",
            desiredCapabilities: {
                browserName: "chrome",
                chromeOptions: {
                    args: ["--no-sandbox"]
                },
                loggingPrefs: { driver: "INFO", server: "OFF", browser: "INFO" }
            },
            globals: {
                waitForConditionTimeout: 30000
            }
        }
    }
};

Writing a basic test case

We are all set with the configuration. Let’s write a basic test and see whether it’s working.

Create a file test.js under e2e-tests folder

import { NightwatchBrowser } from "nightwatch";

export = {
    after: (browser: NightwatchBrowser) => {
        browser.end();
    },
};

Open up package.json and add the following under scripts. This would look something like below. Note the e2e:nightwatch script. We would be executing the same shortly.

{
    "name": "angular-nightwatch",
    "repository": {
        "type": "git",
        "url": ""
    },
    "license": "ISC",
    "scripts": {
"e2e:nightwatch": "tsc --project apps/web-e2e-nightwatch/tsconfig.json && nightwatch",
    }
}

• Let’s run the Angular project using npm start.
• Open up a new terminal/command prompt and run npm run e2e:nightwatch

Verifying the results

A headless chrome browser would open up running the test.

We can verify the results inside reports folder

---

I will come up with an advanced guide that can be used for production applications leveraging page objects, custom commands taking screenshots etc. In the meantime feel free to read other journals from us.