End-to-end testing with Nightwatch.js

For a french version of this article, click here.

Testing an application is so important. I can’t stress that enough. Nobody wants an application full of bugs. Nobody wants to fix the same bug over and over again. You must have, at the very least, end-to-end testing on large applications. And it is not that difficult. Remember that you can always start small and then get your test suites bigger to cover a larger part of your application.

This article will guide you through the set up of a simple end-to-end stack and performing simple operations, using hooks, adding custom commands and using shared variables across your test suites.

Nightwatch.js is a simple end-to-end testing framework that allows you to test your application through simple commands in a node.js environment. It uses a WebDriver server under the hood to perform the different operations you describe.

We are going to set up a simple end-to-end stack. Nightwatch.js is the framework to write the tests and Chromedriver is the browser driver we will use to perform the tests.

The website we are going to test is this one: https://nightwatch-demo.netlify.com/

It is a simple website with an input asking you your name and then displays it with a welcome message.

Installation

mkdir nightwatch-tests && cd nightwatch-tests
npm init -y
npm install nightwatch --save-dev
npm install chromedriver --save-dev

Create a file named nightwatch.json and put the following the configuration:

Writing the first test

Create a directory named tests. This directory is your entry point, as specified in the configuration file (src_folders). Each file in this folder represents a test suite. Create a file named home.js inside the tests directory, as we are testing the home page.