Nightwatch.js: A Comprehensive Guide for Beginners

Introduction

Nightwatch.js is an open-source end-to-end testing framework that simplifies the process of creating and running automated tests. It provides a comprehensive and developer-friendly solution to write, run, and manage tests across different web browsers, offering a wide range of features for efficient and reliable testing. This blog post is a comprehensive guide for beginners where we’ll cover the installation process and configuration settings for Nightwatch.js, followed by step-by-step guidance on creating a simple test suite using Nightwatch.js.  

By the end of this blog, you’ll have a solid understanding of how to write and run your first test on Nightwatch.js. 

Prerequisite

Before we dive into Nightwatch.js, make sure you have the following prerequisites in place: 

1. Node.js and npm: Ensure that Node.js and npm (Node Package Manager) are installed on your system. The source for downloading Node.js is specified as nodejs.org.

2. A Text Editor: You’ll need a code editor to write and edit Nightwatch.js test scripts. Popular choices include Visual Studio Code. 
3. A Web Application: You’ll need a web application to test. For this, we’ll use a simple example website, but you can use any web application you have access to.

Installation

Once you have those prerequisites in place, follow these steps to install Nightwatch.js: 

Step 1: Setting Up a New Project in Nightwatch.js 

First, create a new directory for your Nightwatch.js project and navigate to it in your terminal. Use the following commands: 

mkdir my-nightwatch-project 
cd my-nightwatch-project 
 

Step 2: Initialize a new Node.js project

npm init -y 
 

Step 3: Install Nightwatch.js 

Install Nightwatch.js globally by running the following command: 

npm install -g nightwatch 
 

Step 4: Initialize Nightwatch.js 

Use the following command to generate the initial Nightwatch.js configuration files: 

nightwatch -c 

After running the above commands, your project directory should have a structure like this: 

my-nightwatch-project/ 
├── nightwatch.conf.js 
├── tests/ 
└── reports/ 
 

nightwatch.conf.js is the Nightwatch configuration file. 

tests/ is where you’ll write your test scripts. 

reports/ is where test reports will be generated. 

Configuration Settings of Nightwatch.js

Now that you have Nightwatch installed and the configuration files generated, it’s time to customize your testing environment. Open the nightwatch.conf.js file in your project directory using a text editor. This file contains various configuration settings you can adjust to fit your specific needs. 

Here are some important configuration settings to consider: 

1. Test Environment Configuration 

You can define different test environments, such as ‘default’, ‘chrome’, ‘firefox’, etc., and set the appropriate settings for each. For example: 

test_settings: { 
default: { 
launch_url: 'http://localhost', 
desiredCapabilities: { 
browserName: 'chrome', 
}, 
}, 
firefox: { 
desiredCapabilities: { 
browserName: 'firefox', 
}, 
}, 
}, 
 

Here, you can specify the default launch URL and desired browser capabilities for different environments. 

2. Test Output Configuration 

You can configure where test reports and screenshots are saved. For example: 

output_folder: 'reports', 
screenshots: { 
enabled: true, 
path: 'screenshots', 
}, 
 

Customize the output_folder and screenshot settings to match your project’s directory structure. 

3. Writing Custom Commands and Assertions 

You can extend Nightwatch by creating custom commands and assertions. Define them in your configuration file like this: 

custom_commands_path: 'tests/commands', 
custom_assertions_path: 'tests/assertions', 
 

This allows you to organize and reuse custom testing functions. 

Writing Your First Test in Nightwatch.js

Now that your project is set up, let’s write your first test script. In the tests/ directory of your project, create a new JavaScript file, e.g., myFirstTest.js. 

Open myFirstTest.js with your text editor and write the following test script: 

module.exports = { 
'My First Test': function (browser) { 
browser 
.url('https://example.com') // Replace with your website's URL 
.waitForElementVisible('body') 
.assert.title('Example Domain') 
.end(); 
} 
}; 
 

This code defines a Nightwatch.js test suite named ‘My First Test.’ It performs the following actions: 

1. Navigate to the specified URL (replace ‘https://example.com‘ with your website’s URL). 

2. Waits until the body element becomes visible. 

3. Asserts that the page title is ‘Example Domain.’ 

4. Ends the test. 

Running Your Test 

To execute your test, open your terminal, navigate to your project directory, and run the following command: 

npx nightwatch tests/myFirstTest.js 

Replace myTestScript.js with the name of your test script. 

Nightwatch.js will launch a browser (by default, it uses Google Chrome) and execute the test. You will observe the test outcomes displayed in your command line interface.

Running Test Cases in Different Environments

To run your test cases in different environments, you can use the –env flag followed by the environment name when executing Nightwatch.js. For example, to run your test cases in the firefox environment, use the following command:

npx nightwatch tests/myFirstTest.js --env firefox

Running Test Cases in Multiple Environments

To run your test cases in multiple environments, you can use the –env flag followed by multiple environment names when executing Nightwatch.js. For example, to run your test cases in the firefox, edge and chrome environments, use the following command:

npx nightwatch tests/myFirstTest.js --env firefox,edge,chrome

Conclusion 

You’ve successfully set up Nightwatch.js and run your first automated test. You can now extend your tests to cover various scenarios and functionalities of your web application.