How to build CucumberJS projects with JenkinsCI

cucumberjs electron and jenkinsci

Web application monitoring with JenkinsCI

In the previous tutorial part, we have created the CucumberJS and ElectronJS project for monitoring the health of live web application projects.

In this part of the tutorial, we are going to automate the web application monitoring with the help of JenkinsCI continuous integration server. JenkinsCI will also generate us reports which can be accessed by non-technical project stakeholders.

JenkinsCI How To

JenkinsCI is a very popular and open source continuous integration application.

If you are new to it or if you haven’t done JenkinsCI installation before, we have a simple step by step guide for JenkinsCI installation and configuration.

For those who prefer ebooks, we have created practical JenkinsCI setup guide as part of PopularOwl ebooks series.

This tutorial part assumes that you already have JenkinsCI server installed and running on your own server.

Get NodeJS and Grunt

Even though JenkinsCI has capabilities to install and manage NodeJS via plugins we always prefer to do it directly on the server. This approach gives us more granular control over runtime environments.

In order to install NodeJS v4.x on Ubuntu we should use recommended command lines from the official NodeJS setup guide:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - 
sudo apt-get install -y nodejs

We will also need to install GruntJS build tool globally on the box:

npm install -g grunt-cli

Running ElectronJS and NightmareJS on Ubuntu

Before we start creating JenkinsCI jobs, there is something we should know.

At the time of writing, ElectronJS has a known shortcoming for running on Linux server operating systems (our JenkinsCI tutorials is based on Ubuntu OS).

It’s to do with the display devices and X-Server not being present on the major Linux server distributions. ElectronJS and its wrapper NightmareJS rely on the framebuilder in order to run properly.

Out of the box, these frameworks will not be working on Ubuntu box. You can read more detailed description in this thread.

Here is the outcome you will get if you run the cucumberjs and electronjs tests for our web app monitoring project:

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" 
Error: Step timed out after 5000 milliseconds
at Timer.listOnTimeout (timers.js:92:15)

The solution to this problem is xvfb – virtual framebuilder. It will mock the presence of display service on Linux OS and make the ElectronJS run normally.

We will use apt-get in order to install xvfb and few other related libraries on Ubuntu server (all in one line):

apt-get update && apt-get install -y xvfb x11-xkb-utils xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic x11-apps clang libdbus-1-dev libgtk2.0-dev libnotify-dev libgnome-keyring-dev libgconf2-dev libasound2-dev libcap-dev libcups2-dev libxtst-dev libxss1 libnss3-dev gcc-multilib g++-multilib

Now we can run our tests by using xvfb-run and all should be working good:

DEBUG=nightmare xvfb-run --server-args="-screen 0 1024x768x24" grunt test

All CucumberJS should be now be running good from the command line.

We are ready to move back to JenkinsCI UI jobs.

Creating JenkinsCI job

Let’s create a JenkinsCI job, which we will call ‘web app monitoring’. Select ‘Freestyle project’ as the project type.

creating a new freestyle JenkinsCI project

After we create the freestyle JenkinsCI project, we have to point it to the GitHub repository where our CucumberJS tests are created.

Pointing JenkinsCI job to GitHub

In order to do this, your JenkinsCI will have to have Git plugin installed. Such plugins are one of the main reasons why JenkinsCI server is so popular. There are thousands of plugins available and anyone from the community can create one.

To check if your JenkinsCI application has the Git plugin installed, go to the main page, click on “Manage Jenkins” link on the left sidebar, go to “Manage Plugins” section and in the “Installed” tab search for Git.

If it’s not installed yet, got to “Available” tab section, find Git and install it.

Once Git plugin is installed, you will see “Source Code Management” section in you new project configuration space.

Select Git and provide the link to your repository. In our case, we don’t need any credentials as the project is open source. In case your code is in a private repo, fill in the credentials section.

point jenkinsCI job to code repository

JenkinsCI Job Build Triggers

Next, we have to setup trigger conditions for our job.

We want this job to be run on the scheduled basis. Go to the ‘Build Triggers’ section and select ‘Build periodically’. This section accepts Cron job syntax and we are going to use syntax which triggers job to re-run every hour (check this list for more Cron syntax examples)

H */1 * * *

JenkinsCI ‘Build Triggers’ section should look similar to this

build triggers for JenkinsCI jobs

Execute Shell Step

Next, add the build step “Execute Shell” and the following 3 lines of commands.

npm install
DEBUG=nightmare xvfb-run --server-args="-screen 0 1024x768x24" grunt test
./validate-test-run.sh

The first command installs NodeJS project dependencies.

The second one runs the cucumberjs tests.

The third line runs the simple shell script to verify if we had any test case failures.

We need the last script because the final cucumberjs task closes the ElectronJS browser and it will always be successful. Therefore, we need the mechanism to validate if there were any failed tests during the run.

jenkinsci shell build step cucumberjs electronjs

Testing JenkinsCI job manually

The last step is to validate if our new JenkinsCI job is running as expected. To do this, go to your JenkinsCI home page (where you should see all the configured jobs) and hit the manual run icon on the far right side of the ‘Web app monitoring’ job. JenkinsCI should start your build job.

run jenkinsci and electronjs jobs manually

And if you use the example NightmareJS Cucumber GitHub repository, your job tests should be passing.

JenkinsCI Notifications

A quick note on notification support for JenkinsCI builds. We need those in case the tests are failing (which means there are some issues with your live web applications).

JenkinsCI has a great array of plugins for integration with your tools of choice.

We personally use JenkinsCI Slack plugin, JenkinsCI irc plugin and JenkinsCI Notifications plugin to integrate with the notification apps.

Summary

Hey, we now have working setup for automated web application monitoring with CucumberJS, ElectronJS, and JenkinsCI.

The steps we have covered in this tutorial are:

  1. Preparing NodeJS environment for JenkinsCI
  2. Enabling ElectronJs and NightmareJS to run on Ubuntu server
  3. Creating a scheduled job on JenkinsCI to run automated web application testing
  4. Notification options for JenkinsCI application.

Hopefully, you will benefit from this tutorial and make use of automated web application monitoring.

All feedback and comments are very welcome. We are always aiming to improve.

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