How to run Selenium Tests with NightwatchJS

NightwatchJS enables developers and testers to write Selenium-based tests in JavaScript or TypeScript. With inbuilt support for democratic test runner, CI/CD integration, and cloud platforms like BrowserStack, it provide a reliable setup for scalable exam automation.

This article explain in detail about NightwatchJS setup, advantages, execution on different browsers, integration with BrowserStack, and virtual tips to optimize Selenium testing.

Advantages of NightwatchJS

Here are the advantages of using NightwatchJS:

• Easygoing to set up
• Inherent Test runner
• Cloud screen support is ready
• Clear syntax
• Page object model support
• Selenium Server support
• CI/CD or DevOps support
• Headless automation support

Disadvantages of NightwatchJS

While NightwatchJS sure has several advantages to it, here ’ s disadvantage of habituate NightwatchJS:

• Less community support, as it is still turn.

How to Setup and Run Selenium Tests in NightwatchJS: Step by Step Tutorial

Prerequisite

• Install NodeJS
  • Navigate to thedownload page
  • Choose your operating system and download NodeJS (LTS recommended)
  • Install the NodeJS binaries
• Install Optic Studio Code(optional but urge)
  • Navigate to VS Codedownload page
  • Download and install

Step 1: Create a bracing folder (ex: nightwatchJSdemo)

As a first step, you need to create a fresh and empty directory to install NightwatchJS and its colony

Step 2: Launch Visual Studio Code, and Open the newly created directory utilize the steps refer below

• Launch Visual Studio Code app
• Click on Fileand so Click onOpen Folder
• Choose a new createddirectory(Ex: nightwatchJSdemo)

Step 3: Open the Terminal and enter the command

• From the Terminal menu in Visual Studio code& gt; Click onNew Terminal
• Enter the below command to initiate the NightwatchJS installing

npm init nightwatch

Step 4: Answer the command line questionnaire

NightwatchJS doesn & # 8217; t install unnecessary package rather it installs based on the custom option you choose. So when you enter the installation command, the command line tool asks you a set of questions, and you require to respond it

• The first head is& # 8220; What is your Language & # 8211; Test contrabandist setup? & # 8221;

You can choose any desired option, for demo purposes let & # 8217; s take Javascript-Nightwatch Test runner

• The next question is & # 8220;Where do you want to run your e2e tests? & # 8221;

As mentioned earlier NightwatchJS tests can be run locally or on a distant machine (cloud) such as BrowserStack, Saucelabs, etc.

For this question, you choose the pick Both

• The next option is& # 8220; (Remote) Please select your cloud supplier & # 8221;

Since you have chosenBoth in the previous step, you need to select the cloud or remote supplier, For simpleness, you can choose BrowserStack

• The following alternative is & # 8220;Choose the browsers where you want to run the test on Local & # 8221;

Let & # 8217; s set up both Firefox and Chrome so choose these two.

• The adjacent option is & # 8220;Choose the browsers where you desire to run the examination on Browserstack (remote) & # 8221;

Let & # 8217; s Chose chrome and firefox

• The next question is& # 8220; Where do you contrive to keep your end-to-end test? & # 8221;

This is your folder name where the actual test file are present, the nonpayment folder name is & # 8220;tests & # 8221;.Let & # 8217; s choose the default folder,so you can just hit enter.

• The future query is & # 8220;What is the base_url of your projection? What is the base_url of your project? & # 8221;

The baseURLcan be set during the instalment or after, If you don & # 8217; t providebaseURLduring the installation later you can set it inside thenightwatch.conf.jsfile. For now, choose the nonpayment one that islocalhost

Once you answer all of the above question then NightwatchJS begin the installing. The necessary package and its habituation will be installed.

Wait for the installation to complete.

Once the installation is complete, your project brochure (example,nightwatchJSdemo) can be seen as below

All installed packages are tracked in thepackage.json file. The package.jsonfile appear as below.

{'' name '': `` nightwatchjsdemo '', '' version '': `` 1.0.0 '', '' description '': `` '', '' primary '': `` index.js '', '' script '': {'' test '': `` echo \ '' Error: no test specified\ '' & amp; & amp; exit 1 ''}, '' keywords '': [], '' author '': `` '', '' license '': `` ISC '', '' devDependencies '': {'' chromedriver '': `` ^104.0.0 '', '' geckodriver '': `` ^3.0.2 '', '' nightwatch '': `` ^2.3.3 ''}}

Step 5: Write a simple Selenium NightwatchJS script

By nonremittal there are a lot of example trial given in the glasses directory, however, since we are starting with NightwatchJS let & # 8217; s understand by writing the simple test.

Navigate to thetestsfolder site under the Project root folder (example,NightwatchJSdemo), and create a file with gensdemo-test.js

Let & # 8217; s direct two simple scenarios

1. Navigate to the BrowserStack home page and control
2. Click on the Product carte to verify all the products are present

For the above scenario, you can write the NightwatchJS script as shown below:

describe ('Browserstack Demo ', use () {before (browser = & gt; browser.navigateTo ('https: //browserstack.com ')); it ('Verify dwelling page ', async purpose (browser) {await browser .waitForElementVisible (' a.logo ') .assert.titleContains ('Most Reliable App & amp; Cross Browser Testing Platform | BrowserStack ')}); it ('Verify ware page ', async mapping (browser) {await browser .click (' a [title= '' Pricing ''] ') .waitForElementVisible (' # pricing ') .waitForElementVisible (' a [data-toggle-id= '' automate ''] ') .assert.textContains (' a [data-toggle-id= '' automate ''] ', 'Automate ') .assert.textContains (' a [data-toggle-id= '' live ''] ', 'Live ') .assert.textContains (' a [data-toggle-id= '' percy ''] ', 'Percy ') .assert.textContains (' a [data-toggle-id= '' app-live ''] ', 'App Live ') .assert.textContains (' a [data-toggle-id= '' app-automate ''] ', 'App Automate ')}); after (browser = & gt; browser.end ());});

Let & # 8217; s understand the above code snippets:

• browser.navigateTo& # 8211; Navigates to the give URL, i.e www.browserstack.com
• waitForElementVisible& # 8211; This command waits until the afford element visibility, in our case we are await for the logo to appear.
• assert.titleContains& # 8211; To ensure that the page loaded, is the home page, we are asserting the rubric of the BrowserStack abode page i.e & # 8216; Most Reliable App & amp; Cross Browser Testing Platform | BrowserStack & # 8217;

In the next it () block,

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

• .click (& # 8216; a [title= & # 8221; Pricing & # 8221;] & # 8217;) & # 8211;We are click on the Pricing menu

And subsequent commands are added to verify the list of product name that we are clicking

Step 6: Execute the Nightwatch tryout

NightwatchJS provides tractableness to execute all the tests or selected tests

Execute the Single tests expend the below command

Syntax:

npx nightwatch & lt; path_to_test.js & gt;

Example: npx nightwatch tests/demo-test.js

Execute all the tests using the below bid

Syntax:

npx nightwatch

For simplicity, let & # 8217; s execute a single tryout using the command

npx nightwatch tests/demo-test.js

Step 7: View the result

Wait until the execution dispatch, the dictation line output shows the result of execution with examination case name and assertions.

Nightwatch HTML Reporter

The nonremittal shape also provides HTML reporter, which will be saved under\tests_output\nightwatch-html-report\index.html path

The HTML report looks as below

Run NightwatchJS tests on Firefox

While installation you receive chosen browser as firefox and chrome, so the configurations will be created innightwatch.conf.jsautomatically during the installing.

In order to run the NightwatchJS in firefox use the below bidding:

npx nightwatch & lt; path_to_test.js & gt; -- env firefox

For model,

npx nightwatch tests/demo-test.js -- env firefox

Note:Ensure the geckodriver is establish, by scarper the command

npx geckodriver –version 

The command should yield the installed version

Run NightwatchJS tests on Chrome

NightwatchJS also back, chrome browser you can well execute NightwatchJS tests on chrome by furnish the & # 8211; env option in command line

npx nightwatch & lt; path_to_test.js & gt; -- env chrome

For Example,

npx nightwatch tests/demo-test.js -- env chrome

Note:Ensure the chromedriver is instal, by running the command

npx chromedriver -- version

The command should output the installed adaptation

Run NightwatchJs Test parallely on multiple browsers on your local

NightwatchJS supports multiple browser and too parallel performance. The NightwatchJS exam can be run on multiple browser parallely

Use the below dictation to accomplish NightwatchJS tryout parallely on multiple browser

npx nightwatch & lt; path_to_test.js & gt; -- env chrome, firefox

For Example,

npx nightwatch tests/demo-test.js -- env chrome, firefox

How to run NightwatchJS on Remote Machine (Cloud)

NightwatchJS supports test execution with Remote Selenium Grid. These tests can be executed on any cloud environment which support NightwatchJS. Many frameworks support such cloud performance, but the beauty of NightwatchJS is you don & # 8217; t have to worry about the shape part.

During the installation questionnaire (Step 4) you feature choose the BrowserStack as the distant machine, so the NightwatchJS puts the BrowserStack configuration as part of the installation step. The configuration can be viewed in thenightwatch.conf.js file.

To run the NightwatchJS on BrowserStack, you postulate to add the Username and Access key. This is unique for each exploiter and provided by BrowserStack.

Copy the BrowserStack Username and Access Key

• Login to
• Navigate toProfile > Summary
• Copy the Username and Access Key

Modify the NightwatchJS configuration file

• Navigate tonightwatch.conf.jsfile, located in your root directory
• Search fordesiredCapabilitiesunder the browsertack option
• Look for userName and accessKey options
• Add the values

Configure run clip surroundings

The environment is the browsers and Operating scheme that you want to run on BrowserStack. Based on the installation questionnaire, the nonremittal values are added however you can tailor-make it further.

For example: If you need to run the test on with Chrome browser and OSX with Monterey version you can just add the optionsbrowserName, os, and osVersion as shown in the below image.

Note: Borwserstack has a dedicated page for generating custom capabilities. By navigating topage, you can generate one as per your pick.

Execute NightwatchJS tests on BrowserStack

Once you configure the BrowserStack tryout surround with NightwatchJS, you can execute the tests on BrowserStack.

Command to execute the test on BrowserStack

Syntax:

npx nightwatch & lt; path_to_test.js & gt; -- env= ' & lt; browserstack_env & gt; '

Example

npx nightwatch tests/demo-test.js –env='browserstack.chrome '

View Results

Wait until the command line output prove the tryout execution summary. Once the tryout performance is complete the command line yield shows the sum-up of execution along with the BrowserStack URL, by navigate the URL you can simply view the detailed story of test executing.

Command Line Output

BrowserStack Results page

NightwatchJS Tips and Tricks

1. Run NightwatchJS exam on headless mode

NightwatchJS supports headless mode, you can achieve headless mode executing by specifying the option& # 8211; headless

Example:

npx nightwatch -- env chrome -- headless

2. Execute a single test and all at once in NightwatchJS

NightwatchJS test can be executed as individual examination or all tests at once.

Execute the Single tests using the below command

Syntax:

npx nightwatch & lt; path_to_test.js & gt;

Example: npx nightwatch tests/demo-test.js

Execute all the tryout using the below command

Syntax:

npx nightwatch

3. Execute a radical of tests or folders in NightwatchJS

Using the& # 8211; groupingoption you can fulfill all the tests in the folder at once

Example:

npx nightwatch -- group tests/with-page-objects

4. Open HTML report after completion of NightwatchJS test execution

The & # 8211; openoption opens the HTML report in your nonpayment browser once the test performance is complete.

Example:

npx nightwatch tests/demo-test.js -- env firefox -- headless -- open

5. Run NightwatchJS exam on multiple surroundparallellyon cloud program such as BrowserStack

If you have configured multiple environment for cloud platform, you can specify the multiple environment habituate the command line selection& # 8211; env. All the tests will be run on the cloud platform.

Below is the example of bunk multiple environments on BrowserStack

Example:

npx nightwatch tests/demo-test.js -- env 'browserstack.chrome, browserstack.firefox '

NightwatchJS is an easy and simple-to-use mechanisation framework, which supports multiple browsers and platforms. The issue of the test not just calculate on your test case but too depends on the environment you run. If your execution surround is unstable you will be more potential to see false failure. The frequent false failures make the automation tests unreliable.

Hence it is commend to test on real device cloud like. Since the cloud-based examination platforms are stable, cater consistent and accurate results by taking real user conditions into history.

BrowserStack supply 3000+ real gimmick and browser combinations for execution. As these are real devices you will see the same issue as physical machines. BrowserStack reduces your effort in maintaining the test execution base and facilitate you to concentrate on what matters most such as trial executing, exam planning, and test automation. NightwatchJS and BrowserStack together make a good choice to achieve the high quality in a short growing cycle.

Related Guides