Basic Test with Nightwatch.js
According to the official website, nightwatch.js is an integrated framework for performing automated end-to-end testing on web applications and websites, across all major browsers.
I am new to using Nightwatch.js, this post will help me to remember the fundamentals of using automated tests. This post is for anyone who has not used Nightwatch.js before and they want to try it out. The content below is based on my experience and how I came to understand how Nightwatch.js works.
Let’s get started…
Step 1: Create a folder on your desktop, and open it in your Visual Studio Code or any integrated development environment of your choice. For more prerequisites check this site.
Once the command above is run, the package.json file is added
Step 2: Once your package.json file is added go ahead and install NightWatch.js by running the command in the snippet below .
Step 3: Run the command below to test
Step 4: After you run the command above, you might have the error below pop up. To get rid of it, all you need to do is create a folder and name it test.
In your test folder create a file and give it a name website.js. Your folder structure should look like below.
Step 5: The test points to Firefox browser, But I wanted the test to point to Chrome browser. So I had to install the browser driver by running the command below.
Step 6: After the browser driver has been installed , you can go ahead and run the command below.
Once the command is run, you will notice that the package.lock.json and the node modules folders are added in your main folder.
Your folder structure should look like the snippet below.
Step 7: In your website.js file, you need to include what you are testing, first we create the module.exports function. Add the browser as an argument, then the properties we want to test in the browser. In this test we have the following:
.url(): Retrieve the URL of the current page or navigate to a new URL.
.useXpath() : Sets the locate strategy for selectors to xpath, therefore every following selector needs to be specified as xpath.
.click(): Indicates where we want to click, in this case the Developers Guide.
.pause() : indicates the given seconds spent on the test
We are testing the nightwatchjs.org website in this tutorial, below is the code snippet in the website.js
How to get an Xpath from the website?
Step 1: Right click on the list you want to test: Here we are testing Developers Guide. Right click ,then click on Inspect.
Step 2: Once the inspect window opens, Right click on the highlighted class then copy full Xpath
Step 8: In your nightwatch.conf.js file, include the path of your test folder
Step 9: Run the test
Then run the npx command will open the test with the default browser
The command below will open the test with the specified browser in the test.
That is the basic test using Nightwatch.js. For the full installation and usage guideline you can visit the official site. Hope the post helps, . Happy testing :)
