Getting started with Nightwatch takes only a few short minutes. You can perform the following types of testing with Nightwatch

1. End to end testing of web apps on desktop & mobile browsers
2. Component testing with top frameworks such as React, Vue, Storybook & Angular
3. Mobile app testing on Android & iOS
4. API testing
5. Visual regression testing (VRT)
6. Accessibility testing

For all types of testing, you have to start by installing Nightwatch itself. Let’s begin!

Prerequisites

Make sureNode is installed on the system.

Setup Nightwatch

Nightwatch can be installed with just one command line, either as a new project or in an existing location.

1. As a new project:

To setup Nightwatch as a new project, simply run:

npm init nightwatch<directory-name>

2. In an existing project:

cd <directory-name> npm init nightwatch

Pressy when you see the prompt to install create-nightwatch

❯ npm init nightwatchNeed to install the following packages:  create-nightwatchOk to proceed? (y)

This installs Nightwatch, asks your preferences and sets up thenightwatch.conf.js file based on your preferences as shown below

Answer the simple set of questions to complete the Nightwatch installation. In case you need more info around these questions please refer to the guide below. Otherwise please skip to Run your end to end tests section post completion of installation.

Preferences

Testing Types

This will setup Nightwatch along with all the required dependencies for the type of testing selected. Nightwatch base version will be installed irrespective of the choice.

? Select testing type to setup for your project (Press <space> to select, <a> to toggle all, <i> to invert selection, and to proceed)
❯◉ End-to-End testing
 ◯ Component testing
 ◯ Mobile app testing

Test runner & Language

Nightwatch also supports other test runners. You can pickMocha orCucumber JS as a test runner apart from Nightwatch.

Nightwatchsupports TypeScript for test files after v1.6.0. So you can choose to have the test setup in Javascript or Typescript.

? Select language + test runner variant (Use arrow keys)
❯ JavaScript / default
  TypeScript / default
  JavaScript / Mocha
  JavaScript / CucumberJS

Browser Selection

You can pick the browsers you'll be testing on, and the config will be automatically created for them.

? Select target browsers (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter< to proceed)
❯◯ Firefox
 ◯ Chrome
 ◯ Edge
 ◯ Safari

Test Folder

Next you can name the folder where you want the tests to reside. The default value is tests.

? Enter source folder where test files are stored (tests)

Base URL

This is a very important configuration that should be used as a variable in your tests so that you can switch between different testing environment & URLs with a simple config change. This preference will default tohttp://localhost

? Enter the base_url of the project (http://localhost)

Run on Local/Remote (Cloud)

You can configure Nightwatch to run locally on your machine, remotely on a cloud machine or both

? Select where to run Nightwatch tests (Use arrow keys)
❯ On localhost
  On a remote/cloud service
  Both

For remote testing, host and port details will be automatically added in case you selectBrowserStack orSauce Labs. However if you select to run on your own remote selenium server or any other cloud provider, you will have to manually configure the host & port details in thenightwatch.conf.js file.

Anonymous Metrics

Allow Nightwatch to collect anonymous metrics. The preference will default tono as we respect our user’s privacy.

? Allow Nightwatch to collect completely anonymous usage metrics? (y/N)

Run tests on Mobile web

Nightwatch supports running of tests on real and virtual mobile devices. Nightwatch will also take care of the setup of all underlying SDK, libraries & virtual devices.

Setup testing on Mobile devices as well? (Use arrow keys)
  Yes
❯ No, skip for now

Once you select this preference, Nightwatch setup will begin. It will also generate sample tests for you to get started.

If you are running from a Mac, safaridriver is present by default but must be enabled. You will be presented with the following option.

? Enable safaridriver (requires sudo password)? (Use arrow keys) ❯Yes  No, I'll do that later.

Run your first end-to-end test

Once your setup is done, you can run example tests with this command

npx nightwatch ./nightwatch/examples

The output should look similar to this:

 Running:  default: examples/accessibilty-tests/websiteAccessibility.js
 Running:  default: examples/basic/duckDuckGo.js
 Running:  default: examples/basic/ecosia.js
 Running:  default: examples/basic/todoList.js
 Running:  default: examples/with-custom-assertions/todoList.js
 Running:  default: examples/with-custom-commands/angularTodo.js
 Running:  default: examples/with-page-objects/google.js

✔  default: examples/with-custom-assertions/todoList.js
 [To-Do List End-to-End Test] Test Suite
 ──────────────────────────────────────────────────────────────────────────────
 Using: chrome (110.0.5481.177) on MAC OS X.

   – should add a new todo element
 ✔ Testing if element <#todo-list ul li> has count: 4 (10ms)
 ✔ Testing if element <#todo-list ul li> has count: 5 (59ms)
 ✔ default: examples/with-custom-assertions/todoList.js [To-Do List End-to-End Test] should add a new todo element (2.531s)
.
.
.
  ✨ PASSED. 22 total assertions (16.68s)
 Wrote HTML report file to: <path to Nightwatch project folder>/tests_output/nightwatch-html-report/index.html

View the report

Simply, copy-paste the HTML path at the end of the output in your browser address bar to view the report

Congratulations! You have installed Nightwatch, run a test & viewed the HTML report.

Recommended Next Steps

Now that you have installed Nightwatch

1. Learn how to write end to end tests for web applications
2. Learn how to do mobile app testing
3. Learn API testing with Nightwatch
4. Learn how to do visual regression testing
5. Learn how to do accessibility testing