Module introduction

In this module, we'll be creating automated browser tests for our application, commonly know as "end-to-end" tests.

While unit testing allows us to see if individual functions or components are working as we want, end-to-end testing tells us if the whole application is working as we want.

To perform this type of testing, we instruct the browser, via APIs, to interact with our application like a real human user would, by clicking buttons, filling out forms etc, and then making assertions about the page state.

Nightwatch

The testing framework we'll be using for our E2E tests is called Nightwatch.js. Nightwatch is a Node.js-based browser automation test framework.

We can add Nightwatch to our project as a Vue CLI 3 plugin.

We'll begin this module by creating basic configuration for Nightwatch to work in our project and in the Vagrant environment, and learn how to run Nightwatch tests in a headless Chrome browser.

E2E tests

Next, we'll discuss what aspects of our application we should create end-to-end test for, and how to design effective tests.

We'll then set up some tests, and learn how the Nightwatch API can be used to control the browser, set up assertions, and check the application state.

Controlling server

Unlike unit testing, E2E tests test your app in production mode with a running server and database. We'll see how to set up and tear down a server instance and database using Nightwatch hooks.

Page objects

To make your test code more readable, Nightwatch allows you to create custom entites called "page objects" to represent the structure and elements of your site.

We'll learn how page objects allow us to write more logical test code, and make it easier to reuse frequently accessed elements.

Custom commands

Finally, we'll look at how to create page commands and custom commands, which allow you to extend Nightwatch and abstract logic from tests into custom API methods, again, making our test code more readable and reusable.

Checking out code

Before we begin, be sure to checkout the module 7 starter code by going to the terminal and typing:

$ git checkout module_07_start
$ npm i

Don't forget to check that you've got your dot env files set up and seed your database by running:

$ npm run seed