Nightwatch JS Tutorial: Guide to Automation With Selenium and Nightwatch

What Is Nightwatch JS?

Nightwatch JS is an open-source automated testing framework for browser-based web applications and websites. It is written in Node.js runtime and uses the W3C WebDriver API (formerly Selenium WebDriver) for interacting with various browsers to perform commands and assertions on DOM elements.

Why Is Nightwatch JS So Popular?

The reason behind Nightwatch JS popularity is its out of the box features. Some of the noteworthy features that make Nightwatch JS so popular are:

• Easy To Use – with a clean and simple syntax, code can be written swiftly and efficiently.
• In-Built Test Runner – comes with an inbuilt command-line test runner suite with Grunt support for executing Selenium automated tests.
• Page Object Model – supports CSS and XPath locators making browser automation more manageable.
• Flexibility – enables unit, integration as well as end-to-end testing.
• Selenium Server Support – it can automatically control the standalone Selenium server or various browser web drivers.
• Integrations – provides a single integrated solution for application testing, eliminating the dependency on third-party software.
• Support For Cloud Services – compatible with cloud-based testing platforms like TestMu AI.
• Continuous Integration – supports software like Jenkins, TeamCity, etc., assisting developers in continuously building and testing software.

Do check out the Best JavaScript Testing Frameworks!

Writing Your First Nightwatch JS Automation Test Script

In the previous section, we were able to run a demo test successfully. But we need to write our own scripts, don’t we?

Now that we have got a basic hand-on, it’s time to get our hands dirty. In this session, we will be writing and running our very first test file using Nightwatch JS automation. Let’s check out the configurations that need to be done.

Configurations

Our goal is to run our test files using the “npm test” command from the project’s base directory. Also, we are setting Chrome as our default browser in the example. But feel free to use the browser of your choice.

Now let’s start step by step.

Step 1: Let us create two folders in our root directory – “tests” for keeping test files and “reports” where reports will get stored after each test run.

(You can provide any folder name of your choice. However, it should be properly mapped in the nightwatch.json file about which we will discuss in step 3.)

Step 2: In your package.json file, replace “scripts – test” to “nightwatch”.

“scripts”: {
  “test”: “nightwatch”
}

Step 3: In root, create a “nightwatch.json” file. Paste the following snippet.

{
    "src_folders" : "tests",
    "output_folder" : "reports",
 
    "webdriver" : {
        "start_process": true,
        "server_path": "node_modules/chromedriver/lib/chromedriver/chromedriver.exe",
        "host": "localhost",
        "port": 4444
      },
      "test_settings" : {
        "default" : {
            "desiredCapabilities" : {
                "browserName" : "chrome"            
              }           
          }
      }
}

The “nightwatch.json” is the configuration file which the nightwatch test runner binary expects.

Let’s have a close look into the above code structure of “nightwatch.json”.

• src_folders: indicates the location that contains the test suites. You can also give an array of folders. If not specified, we should pass the test location inline as the second argument to the test runner, as we did in our demo test.
• output_folder: indicates the location where test reports get saved, i.e., JUnit report files, XML reports, test logs, selenium log, screenshots, video logs, network logs, etc.
• webdriver: an object containing WebDriver related configuration options.
  • start_process: a boolean value that indicates that, once we start our test, the nightwatch will automatically start/stop the webdriver instance in the background as a child process.
  • server_path: Here, we are giving the path of the chrome driver executable. Only useful if start_process is enabled.
  • host: We are using localhost for running our test. Mainly needed when the WebDriver service is running on a different machine.
  • port: The port number on which the WebDriver service will listen and/or on which Nightwatch will attempt to connect.
• test-settings: Defines the browser we want to use.

• start_process: a boolean value that indicates that, once we start our test, the nightwatch will automatically start/stop the webdriver instance in the background as a child process.
• server_path: Here, we are giving the path of the chrome driver executable. Only useful if start_process is enabled.
• host: We are using localhost for running our test. Mainly needed when the WebDriver service is running on a different machine.
• port: The port number on which the WebDriver service will listen and/or on which Nightwatch will attempt to connect.

You may also create “nightwatch.conf.js” for configuration. If both these files are present in the project, the nightwatch.conf.js file will be given more precedence over nightwatch.json.

Step 4: Configurations are done. Now let us write our first test.

Parallel Testing Using Nightwatch JS

We can enable parallel testing in Nightwatch JS using a quick and simple configuration in our “nightwatch.json” file.

"test_workers": {
        "enabled": true,
        "workers": "auto"
      },

By enabling “test_workers” to be true, we are enabling parallel testing. Let’s look into the steps now:

Step 1: Add the above code in your “nightwatch.json” file.

Step 2: Create an additional test file in the “tests” folder for running in parallel with the first test file.

Step 3: In the Terminal, give the command:

Step 4: Two browser windows get launched, executing the test files in parallel.

Step 5: After execution, observe the reports generated.

Cross Browser Testing & Test Coverage Across Devices

We came to a detailed understanding of Nightwatch JS setup and test execution in our local machine through the previous sections of this Nightwatch.js tutorial. We have also created our first test file, did parallel testing, and generated reports.

But to stay ahead in a highly competitive market, it is our duty as testers to ensure the quality of the application in all scenarios, i.e, the app should behave as expected across all platforms, browsers, and devices without crashing. This is where the terms test coverage and cross browser testing comes into the picture.

To leverage the test coverage, cloud-based solutions are widely adopted by companies due to various merits like:

• Low investment cost compared to buying the infrastructure.
• Provides access to hundreds of device and platform combinations.
• Extends supports to old and outdated browser versions and OS devices
• No set-up or installation, or maintenance needs to be done locally.
• Scalability.

When it comes to distributed test execution, Selenium Grid is always a good call. It has the capability to run test cases on different versions of browsers and different operating systems simultaneously.

Hence, using a combination of Selenium Grid with the right cloud-based solution provider for cross browser compatibility testing is the optimum strategy that you can deploy to assure quality. Now let us see how we can perform automated browser testing using a remote Selenium Grid provided by TestMu AI.

Test Execution With Selenium Grid Cloud

TestMu AI is trusted by 100,000 companies worldwide as a reliable online Selenium Grid provider to fulfill their cross browser testing needs. TestMu AI provides you access to 3000+ browsers for both mobile and desktop to help you gain the maximum test coverage during the automated browser testing.

You can even leverage parallel testing with Selenium automation testing, along with our open Selenium API to help you extract test reports of your Selenium script execution over TestMu AI, effortlessly.

Now, let us try and execute the above test case using the remote WebDriver for TestMu AI’s Selenium Grid cloud. You can achieve this using a few simple and easy steps with few changes in your existing script for local setup. Let’s look into it step by step.

Step 1: We need to pass browser and environment details to the TestMu AI Selenium Grid via the desired capabilities class. Unlike in local setup, now we have the flexibility to choose the precise settings we want.

There is a helpful tool provided by TestMu AI to generate desired capabilities based on the combination we want. Visit TestMu AI Desired Capabilities page to generate them.

In this case, the desired capabilities class in nightwatch.json will look like this:

"desiredCapabilities": {
       "build":"Nightwatch-Selenium--Test",
       "platform" : "Windows 10",
       "browserName" : "Chrome",
       "version" : "87.0",
       "selenium_version" : "3.13.0",
        "geoLocation" : "IN",
        "chrome.driver" : "87.0",
    }

Step 2: Now you need to fetch your unique Access token and username.

Step 3: Log in to TestMu AI or create your account. A unique access token will be created for you. This token is used as a secret key to link your local scripts with the TestMu AI platform.

There are 3 ways to find it:

• If already logged in, from the Capabilities generator page, you can fetch it.

  

• You can also fetch the details from the Profile section.

  

• Or from the Automation dashboard page, by clicking the key button in the top right corner.

  

Step 4: Paste the following snippet in your nightwatch.conf.js file. (If not created already, you can create this file in your root)

Here we are declaring the user configuration for an access key, username, host, and port for the test.

module.exports = (function(settings) {
    console.log(settings["test_settings"]["default"]["username"])
    if (process.env.LT_USERNAME) {
      settings["test_settings"]["default"]["username"] = process.env.LT_USERNAME;
    }
    if (process.env.LT_ACCESS_KEY) {
      settings["test_settings"]["default"]["access_key"] = process.env.LT_ACCESS_KEY;
    }
    if (process.env.SELENIUM_HOST) {
      settings.selenium.host = process.env.SELENIUM_HOST;
    }
    if (process.env.SELENIUM_PORT) {
      settings.selenium.host = process.env.SELENIUM_PORT;
    }
    return settings;
  })(require('./nightwatch.json'));

Step 5: Configure your nightwatch.json file. Since we are using TestMu AI, why don’t we go for cross browser testing across multiple platforms?

In this code, we are configuring for the script to run across 3 browsers – Chrome, Firefox, and Safari on 2 different platforms – Windows and macOS.

Check out the code below and let’s look into the required changes and additions to be made on your existing file:

{
  "src_folders" : "tests",
  "output_folder" : "reports",
 
  "test_workers": {
    "enabled": true,
    "workers": "auto"
  },
  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "host" : "hub.lambdatest.com",
    "port" : 80,
    "cli_args" : {
    "webdriver.chrome.driver" : "",
    "webdriver.ie.driver" : "",
    "webdriver.firefox.profile" : ""
    }
  },
  "test_settings" : {
    "default" : {
    "launch_url" : "http://google.com",
    "selenium_port"  : 80,
    "selenium_host"  : "https://lambdatest.com",
    "silent": false,
    "screenshots" : {
        "enabled" : true,
        "path" : ""
    },
    "username" : "haritagr16",
    "access_key" : "123456789",
 
    "skip_testcases_on_fail": false,
    
    "desiredCapabilities": {
       "build":"Nightwatch-Selenium--Test",
       "platform" : "Windows 10",
       "browserName" : "Chrome",
       "version" : "87.0",
       "selenium_version" : "3.13.0",
       "visual":true,
        "video":true,
        "console":true,
        "geoLocation" : "IN",
        "chrome.driver" : "87.0",
        "network":true
    }
    },
    "chrome": {
    "desiredCapabilities": {
        "platform": "Windows 10",
        "browserName": "chrome",
        "version": "87.0"
    }
    },
    "safari" : {
    "desiredCapabilities": {
        "platform": "macos 10.13",
        "browserName": "safari",
        "version": "11.0"
    }
    },
    "firefox" : {
    "desiredCapabilities": {
        "platform": "win10",
        "browserName": "firefox",
        "version": "60"
    }
    },
    "edge" : {
    "desiredCapabilities": {
        "platform": "Windows 10",
        "browserName": "MicrosoftEdge",
        "version": "17.0"
    }
    
    }
  }
}

• Pass your Access Token and User details.
• Provide Desired Capabilities for all the browsers.
• Set the Hostname corresponding to TestMu AI.
• Optionally we have also enabled report formats like video recording, console, network logs, etc., to be true.

A more detailed explanation is given below but feel free to skip to Step 6.

We have used additional parameters to configure “nightwatch.json” for cloud-based cross browser testing. They are:

• selenium – an object containing Selenium Server related configuration options. If “selenium” is not used, “webdriver” options should be set instead (as we did in our local set up). Starting with Nightwatch 1.0, Selenium is only required when testing against a grid setup or a cloud testing service such as TestMu AI.
  • cli_args – list of CLI args to be passed to Selenium process, basically browser drivers.
• test_settings:
  • silent – whether to show the extended HTTP traffic command logs from the WebDriver or Selenium server.
  • desiredCapabilities – an object to specify browser name for instance along with other capabilities.
  • username and access_key – Usually only needed for cloud testing Selenium services. In case the server requires credentials these values will be used to compute the Authorization header.

• cli_args – list of CLI args to be passed to Selenium process, basically browser drivers.

• silent – whether to show the extended HTTP traffic command logs from the WebDriver or Selenium server.
• desiredCapabilities – an object to specify browser name for instance along with other capabilities.
• username and access_key – Usually only needed for cloud testing Selenium services. In case the server requires credentials these values will be used to compute the Authorization header.

Step 6: In package.json, change the “ scripts – test” argument value.

This is important as it is here where we are specifying the browsers where we need to run our test.

"scripts": {
    "test": "./node_modules/.bin/nightwatch -e firefox,safari,chrome tests"
  }

Step 7: Execute the test.

npm test

The code starts running and logs can be observed in the terminal.

To observe live running status go to your Automation dashboard in TestMu AI.

We can analyze individual test run reports from Automation Logs.

We have successfully run our test cases using an automated cross browser testing solution provided by TestMu AI through a hassle-free experience!

Conclusion

Nightwatch JS is one of the most in-demand Selenium Javascript-based automation testing frameworks known for its simplicity and integrated features. In this blog, we have looked into Nightwatch JS installation and setup, along with a detailed walkthrough on configurations. Additionally, we have also leveraged our automation testing by adopting test coverage concepts and cross browser testing.

Hopefully, this Nightwatch JS tutorial will enable you to kickstart your journey in Nightwatch JS automation. If you wish to optimize your web application quality by unlocking coverage in a wider variety of platforms or browsers or versions, feel free to explore the TestMu AI platform.

Happy testing!