E2E Testing validates both your software and its functionality along with external integrations and interfaces in a production-like environment. This article will guide you through the installation, configuration, and implementation of the Nightwatch framework so you can create a simple E2E test suite.
This open-source automated testing framework will simplify the integration process. It’s built in Node.js, allowing you to write tests even if you don’t have experience –– and if you have written some js code, it’ll be a piece of cake!
Nightwatch uses W3C WebDriver API (Selenium Web driver) to control DOM elements and browser interfaces to make testing as smooth as possible.
Now that you’re in the node folder project, install your dependencies: run npm install nightwatch --save-dev and npm install chromedriver --save –– once installed, change your test script to nightwatch so your package.json looks like this:
We’re almost done, but before we start writing some E2E tests, we need to set up Nightwatch and the test folders.
You can create your configuration file two different ways. One is by letting the framework do all the work by running npm run test; this will create a huge file with all possible configurations.
But we’ll go with (for me) the easiest way: create a nightwatch.conf.js file with just the essentials – your test folder, a webdriver path, the default settings, and a screenshot-on-failure feature:
If you’re used to writing tests with other frameworks, Nightwatch testing will seem a little weird because features are called by chaining them (similar to how js async calls with CSS and XPath selectors).
Additionally, remember that each file in the tests folder is a suite that must use the node module.exports; it can have as many steps or validations as you want (in the form of functions as shown below):
We need to call the browser for every test and then chain all validations, or we can separate the chained calls. Here, we checked the text of some element on the page; since the Facebook signature image didn’t have text, we assert the alt attribute (remember, you can assert any property with the domPropertyEquals).
Another great E2E testing tool that Nightwatch offers is interactions; this allows us to click, press keys, set values, check if it’s displaying the correct data, main elements are loading, or if it's redirecting properly.
There’s a lot more features that I won’t be able to include in this post, but you can check the whole suite Nightwatch API offers; just plug it in your testing chain.
Last but not least, hooks are one of my favorites tools to create testing suites. It makes the whole process smoother, you can use them for basic applications like sending messages, logging, and even some asynchronous tasks. You can also use them to take the interaction even deeper; for example, you can use data to log in, check data keys plus other main elements, and log out afterward –– isn’t that great?
Here’s a basic hook:
If you’re curious about how hooks really work and how you can use them not only for testing but also coding and developing, my colleague Adam Burdette from Fullstack Labs has an amazing article on it here.
I can’t stress enough how important it is to test your software from top to bottom. E2E testing is a great way to do it, and Nightwatch.js will take it to another level. Now that you know the basics, give it a try!
We’d love to learn more about your project.
Engagements start at $50,000.