Skip to main content

Nightwatch in Angular Projects – Complete Guide

1. What is Nightwatch?​

Nightwatch is an end-to-end testing framework that runs on Node.js and uses the W3C WebDriver protocol or the Chrome DevTools Protocol to automate browsers.
It can be used for:

  • Web app UI testing
  • API testing
  • Mobile testing (via Appium)

Nightwatch is one of the older but still actively maintained JavaScript E2E tools, often chosen for its Selenium compatibility.

2. Why Use Nightwatch?​

Benefits:​

  • Supports all major browsers (Chrome, Firefox, Edge, Safari) via WebDriver.
  • Can run against remote Selenium grids (e.g., BrowserStack, Sauce Labs).
  • Hybrid protocol support: WebDriver and Chrome DevTools Protocol (CDP).
  • Simple test syntax with built-in assertions.
  • Can integrate UI + API tests in the same framework.
  • Supports BDD (Cucumber) for behavior-driven testing.

3. When to Choose Nightwatch​

  • You already have a Selenium/WebDriver-based test infrastructure.
  • You need to test legacy browsers or special environments.
  • You want a single framework for desktop and mobile (via Appium).
  • You’re integrating with cross-browser testing services like BrowserStack.

4. How to Use Nightwatch in Angular​

Step 1 – Install Nightwatch​

Using Angular CLI schematics:

ng add @nightwatch/schematics

This will:

  • Install nightwatch and dependencies.
  • Create nightwatch.conf.js for configuration.
  • Add an e2e target to angular.json.
  • Add example test files.

Manual install:

npm install -D nightwatch chromedriver

Step 2 – Understand Project Structure​

After adding Nightwatch, you’ll see:

tests/
  e2e/
    exampleTest.js     # Sample test
nightwatch.conf.js     # Main config file

Step 3 – Writing a Test​

Example (tests/e2e/appTest.js):

describe('Angular App', function () {
  it('should load the home page', function (browser) {
    browser
      .url('http://localhost:4200')
      .waitForElementVisible('body', 1000)
      .assert.containsText('h1', 'Welcome')
      .end();
  });
});

Step 4 – Running Tests​

Run via Angular CLI:

ng e2e

Or directly with Nightwatch:

npx nightwatch

Run in Chrome explicitly:

npx nightwatch --env chrome

Step 5 – Debugging & Advanced Features​

  • Parallel test execution: 
    npx nightwatch --parallel
  • Run only one test file: 
    npx nightwatch tests/e2e/appTest.js
  • Integrate with BrowserStack/Sauce Labs: Update nightwatch.conf.js with remote settings.
  • BDD with Cucumber: Install @cucumber/cucumber and configure Nightwatch to run .feature files.

Step 6 – Angular-Specific Tips​

  • Serving the app: Nightwatch does not auto-serve Angular apps.
    Start it manually before tests:

    ng serve

    Then run Nightwatch in another terminal.

  • Waiting for Angular:
    Since Angular apps are JS-heavy, use waitForElementVisible or custom waits to ensure elements are ready.

7. Nightwatch CLI Commands​

CommandDescription
npx nightwatchRun all tests
npx nightwatch --env firefoxRun in Firefox
npx nightwatch --parallelRun tests in parallel
npx nightwatch tests/e2e/file.jsRun a specific file

8. When Nightwatch Might Not Be Ideal​

  • If you don’t need Selenium/WebDriver compatibility (Playwright or Cypress might be simpler).
  • If you want a highly interactive test runner (Cypress has a better GUI).
  • If you don’t need to test older browsers — newer tools may be faster.

9. Summary​

Nightwatch is a good choice if:

  • You need broad browser coverage including legacy browsers.
  • You want one framework for web + mobile.
  • You’re integrating with Selenium grids.

It’s less ideal if you just need fast, modern E2E tests without legacy support.