Why web apps need monitoring?
Once we get our web application projects up and running live, we have to constantly keep an eye on them. Such an activity works best as a scheduled and automated task.
In most cases we want to inspect the uptime of the web application as well as validate that all the important functionality is working as expected.
In this tutorial, we are going to setup such web app functionality monitoring with the help of JenkinsCI – continuous integration server and CucumberJS – a popular behaviour driven development framework.
Prepare to automatically monitor web apps
This tutorial has 2 parts. In the first one, we will cover the setup of test cases for manually testing live web apps in the headless web browser.
We will be using Electron framework created by GitHub team. Electron allows us not only to validate that web apps do load in the browser but gives us a chance to perform multiple functional inspections as well.
Once we have manual tests completed, in the 2nd tutorial part we are going to automate them and create execution schedule. JenkinsCI is a great tool for such automation.
Electron, Nightmare and CucumberJS for web app testing
Nightmare is a high-level browser automation library. It has several methods for interacting with the headless browser already mentioned before – Electron.
CucumberJS is a framework for implementing human readable BDD test cases. It will make the description of web app tests easy to understand and easy to read.
As we are building automated monitoring, it’s quite important that non-technical people can read and understand the results.
JenkinsCI has great plugins for Cucumber test results. Combined with human readable BDD test cases, this allows us to create the solution which can be understood and used by a non-technical audience.
The example implementation we have created for this tutorial is called ‘Nightmare-CucumberJS’. Project code with the implemented test scenarios can be found on GitHub. Go ahead and install it locally, following the instructions.
Let’s navigate through the project files.
package.json – is the packaging file for nodejs applications. It lists information about the project and defines the dependencies npm package manager has to install. In this project, we depend on Nightmare, Grunt and Cucumber packages.
Gruntfile.js – is the instructions file to Grunt.js. We are using Grunt as a task runner. In this project Grunt setup is very simple, it only has one command configured.
Next is the feature file
tests/website.monitoring.feature which is used by CucumberJS. Feature files use human readable, English-like language called Gherkin. In this file have described scenarios we want to test
Feature: I would like to monitor several websites and validate that their titles are as expected. Scenario: httpbin.org website should be up and running Given I visit httpbin.org website Then website title should be "httpbin(1): HTTP Client Testing Service" Scenario: github.com website should be up and running Given I visit github.com website Then website title should be "GitHub · Where software is built" Scenario: wikipedia.org site should be up and running Given I visit www.wikipedia.org website Then website title should be "Wikipedia"
misbehave.js. They implement the Nightmare and Electron modules in order to access websites and read their titles.
And that’s all files of this simple project. You can test it by cloning the Git repository, installing all dependencies and manually running the tests with the of Grunt. Here is the example flow
git clone https://github.com/popularowl/nightmare-cucumberjs.git cd nightmare-cucumberjs npm install grunt test
You should see the Cucumber / Grunt output with the passing green test cases. It will look similar to this:
In order to change the website domain names or add new ones to the flow go ahead and edit the
tests/website.monitoring.feature file to point to your own web apps.
We now have the passing test cases and the framework for running web app monitoring tests manually, from the command line.
Next part of this tutorial, follows the setup JenkinsCI server jobs to run these web project monitoring tests on the defined schedule.
After reading next part, you will have a simple setup for monitoring and functional testing of your web applications.