Setting up web app monitoring with JenkinsCI and CucumberJS

 

electronjs and cucumberjs for effective web application monitoring

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"

In order to implement the functionality described in the Gherkin language, CucumberJS is using JavaScript files defined in step_definitions directory. There are 2 files cucumber-hybrid-app.js and 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:

web app monitoring with cucumberjs nightmare and electron

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.

What’s next?

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.

Did you like this post? Get monthly summary of our posts and reviews to your inbox!