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


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

You may find the Code sample here: https://github.com/sharan-zweck/angular-nightwatch-sample


  • 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) => {

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 at reports

That’s it, we’ve setup a basic implementation. For the code: https://github.com/sharan-zweck/angular-nightwatch-sample

I will come up with an advanced guide that can be used for production applications leveraging page objects, custom commands taking screenshots etc.

Leave a Reply

Your email address will not be published. Required fields are marked *