Setting up and using Nightwatch

Nightwatch is the automated browser testing framework that we're going to be using to test our full-stack Vue application.

It's a Node.js-based framework that is typically paired with a Selenium server, allowing you to run tests in any browser that is compatible with Selenium, including Chrome, Firefox, and Microsoft Edge.

The interface for Nightwatch is a lot like jQuery, as you can see in the code example on the right. Both frameworks provide fluent API, meaning that each method call will return the same object, allowing you to chain method after method.

Some of the API methods provided by Nightwatch include browser commands, for example instructing the browser to navigate to a particular URL, or to set the value of a form input, and also assertions, for example, asserting that a particular element is visible on the page.

Installing Nightwatch

When we scaffolded the PrintBay project initially with Vue CLI 3, we chose to include the Nightwatch plugin.

We can provide configuration for Nightwatch using this nightwatch.json config file.

The installation of the plugin not only added Nightwatch, but also the Selenium and Chrome drivers which are necessary to run the Nightwatch tests, so you don't have to worry about installing those.

One of the advantages of using the Vagrant development environment that I've provided is that it's preconfigured with headless Chrome and the various other dependencies needed for the tests to run.

If you aren't using Vagrant then you'll need to ensure your environment is correctly set up by consulting the Nightwatch documentation for installation instructions.

Sanity test

You'll see that there are already some boilerplate Nightwatch files in the directory tests/e2e. One of these is the file test.js which is a spec file containing a test suite.

You'll see there's already a sanity test included which we'll now try and run in order to confirm our browser automation stack is working.

Before we do, though, we're going to remove all the .assert statements as these relate to the boilerplate demo app that ships with Vue CLI 3.

tests/e2e/specs/test.js

module.exports = {
  "default e2e tests": browser => {
    browser
      .url(process.env.VUE_DEV_SERVER_URL)
      .waitForElementVisible("#app", 5000)
      .end();
  }
};

Run tests

With that done, let's run our E2E test suite. Be sure that your dev server is not currently running, and go the terminal and type:

$ npm run test:e2e

The first thing you'll notice is that it takes some time to run, typically 10 - 15 seconds, as it takes this long to set up and tear down the various parts of the software stack, the Vue dev server, and to load our app in the browser

By the end you should see a message like this - "OK. 1 assertions passed.".

We're now going to reverse engineer the code in this sanity test in order to understand more about how Nightwatch works.

Tests

Unlike with unit testing frameworks like Mocha or Jest, Nightwatch test suites are function properties of a a CommonJS module.

In this spec file, we have one test defined called: "default e2e tests".

Browser object

Test functions in Nightwatch are always passed an argument browser. This argument is an object that represent the browser we're automating. The API of this object is what you'll use to create Nightwatch tests.

url

The first method called on the API in this test is url which will command the browser to navigate to the specified URL, which in this case is the URL of our Vue app dev server.

waitForElement

The next method, waitForElementVisible, tells the browser to wait for the #app element to be visible. This element is, of course, the root element of the Vue app.

Why do we need to wait for it? Because, as we know, the browser will take some time to paint the page after we navigate to it. If we don't wait, Nightwatch might try to query the page before it's ready.

The second argument to this method is the maximum wait time, which is set as 5 seconds here. Note that Nightwatch will poll the page continuously until the element is found, up to the wait time specified.

Assertions

What's interesting about the waitForElement method is that it's both a command, and an assertion. It tells the app to wait for a certain element to be present, and also reports on whether or not it was.

So you'll notice in the terminal logs the line "Element <#app> was visible after 49 milliseconds." and it has the little green tick next to it to indicate the assertion passed.

Nigthwatch provides many more assertion types, of course, and we'll see these in coming videos.

end

Finally, the last method called is the end method. This is a command that tells the browser to close and will also mark an end to this test.

In the next video, we'll begin designing some more meaningful E2E tests to begin properly testing our PrintBay app.