simple automated testing for a static website with nightwatch.js

If you're following along, in my previous post, i was building a blog with gatsby. Now that I've got some changes made to my blog, I want to make sure that the blog is loading at least and click around a few pages to make sure everything loads correctly.

Setting up browser tests

We can use nightwatch js to set up some happy path tests for your blog. I've used this getting started guide to get up and running quickly with nightwatch.

npm install --save-dev nightwatch selenium-server chromedriver

Create a nightwatch.conf.js and save it in the project folder

const seleniumServer = require("selenium-server");
const chromedriver = require("chromedriver");
const SCREENSHOT_PATH = "./screenshots/";

// we use a nightwatch.conf.js file so we can include comments and helper functions
module.exports = {
"src_folders": [
"test/"// Where you are storing your Nightwatch e2e tests
],
"output_folder": "./reports", // reports (test outcome) output by nightwatch
"selenium": {
"start_process": true, // tells nightwatch to start/stop the selenium process
"server_path": seleniumServer.path,
"host": "127.0.0.1",
"port": 4444, // standard selenium port
"cli_args": {
"webdriver.chrome.driver" : chromedriver.path
}
},
"test_settings": {
"default": {
"screenshots": {
"enabled": true, // if you want to keep screenshots
"path": SCREENSHOT_PATH // save screenshots here
},
"globals": {
"waitForConditionTimeout": 5000 // sometimes internet is slow so wait.
},
"desiredCapabilities": { // use Chrome as the default browser for tests
"browserName": "chrome"
}
},
"chrome": {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true // turn off to test progressive enhancement
}
}
}
}

function padLeft (count) { // theregister.co.uk/2016/03/23/npm_left_pad_chaos/
return count < 10 ? '0' + count : count.toString();
}

var FILECOUNT = 0; // "global" screenshot file count
/**
* The default is to save screenshots to the root of your project even though
* there is a screenshots path in the config object above! ... so we need a
* function that returns the correct path for storing our screenshots.
* While we're at it, we are adding some meta-data to the filename, specifically
* the Platform/Browser where the test was run and the test (file) name.
*/
function imgpath (browser) {
var a = browser.options.desiredCapabilities;
var meta = [a.platform];
meta.push(a.browserName ? a.browserName : 'any');
meta.push(a.version ? a.version : 'any');
meta.push(a.name); // this is the test filename so always exists.
var metadata = meta.join('~').toLowerCase().replace(/ /g, '');
return SCREENSHOT_PATH + metadata + '_' + padLeft(FILECOUNT++) + '_';
}

module.exports.imgpath = imgpath;
module.exports.SCREENSHOT_PATH = SCREENSHOT_PATH;

Then run node nightwatch.conf.js to get selenium-server installed on your machine so that nightwatch can interact with the browser

Add test/happy-path.js to write our test

var config = require('../nightwatch.conf.js');

module.exports = {
'Danny Perez Blog test': function(browser) {
browser
.url('http://localhost:9000/')
.waitForElementVisible('body')
.assert.containsText('body', 'Gatsby Default Starter')
.end();
}
};

Before we start running our tests, we must first get it running. We can do this by doing gatsby build && gatsby serve & to put the process in the background.

Once the site is up, we can run nightwatch which will run the tests you have in your test/ folder.

Set up automated scripts to repeat the whole process

To recap what we did earlier,

• in order for us to be able to view our site, we first need to gatsby build the site, which will store everything in public/.
• running gatsby serve will serve the content you currently have in the public/ folder
• running nightwatch will then run the tests you've defined in test/

Best practice is to run these scripts with npm. Add these scripts to your package.json

...
"scripts": {
"build": "gatsby build",
"serve": "gatsby serve",
"develop": "gatsby develop",
"format": "prettier --write 'src/**/*.js'",
"test": "nightwatch"
},

so now, you can do npm run-scripts build && npm run-scripts serve & and then npm run-scripts test and you're good to go as far as developing and testing your new application.