Cypress e2e Testing in the Jenkins Pipeline

The article Getting Started with Cypress e2e Testing in Angular describes how to setup Cypress for an Angular project. In this post we go a step further and cover how to use Cypress for automated e2e testing in your CI/CD workflow.
Jenkins is used as automation server and I assume that you already have an instance up and running. Furthermore your application should be pushed to a VCS repository, e.g. GitHub.

Setting up Jenkins

First, we create the needed configuration in Jenkins, by creating a new pipeline:

The source code of our application should be coming from GitHub. So, we need to setup a connection. On the machine, where we are running Jenkins, we create a public/private key pair:

ssh-keygen -t rsa -b 4096

We add the public key to GitHub under deploy keys. And set the following for our pipeline in Jenkins:

If there is no red error message below the “Repository URL” field, you have successfully connected the GitHub repository to Jenkins.

As we have an Angular project we need to execute npm scripts for building and testing our application. So, we need NodeJs. Let’s install it under “Manage Jenkins” → ”Manage Plugins” → “Available”:

Next, we navigate to “Manage Jenkins” → “Global Tool Configuration” and make sure that a node version is installed and configured:

The name “node” here is important. It will be used later on. At this point Jenkins is set up for our needs and we can continue with the Angular project.

Configuring the Angular Project

The prerequisite for this part is that you have an Angular project ready that already uses Cypress (check for example this post) or other tutorials.

We don’t want to have our pipeline configuration stored in the Jenkins itself. What we want is the pipeline defined as code. Hence, we create a “Jenkinsfile” in our project’s root directory:

We tell the pipeline to use Node.js with the version “node” previously defined. Additionally, you have to make sure that you have Google Chrome installed and referenced in the Jenkinsfile. The exact definition of the ‘Deploy’ stage is left out here for simplicity. This is a task for you.

We use a Chrome Browser for unit testing. Hence, we adjust our karma.conf.js to use the headless Chrome:

customLaunchers: {
  ChromeHeadless: {
    base: 'Chrome',
    flags: [
      '--headless',
      '--disable-gpu',
      '--no-sandbox',
      '--remote-debugging-port=9222',
    ]
  }
},
browsers: ['ChromeHeadless'],

That means we have our unit tests running. Let’s continue with the Cypress tests. If you have problems running Cypress in Jenkins, this excellent article will help: https://medium.com/aubergine-solutions/install-cypress-io-front-end-testing-tool-dependencies-on-amazon-linux-ami-ec2-instance-f676da4abbdd.

For the Cypress part we install the following node package that allows us to execute commands in parallel:

npm install concurrently --save-dev

And extend our package.json scripts section by:

"cypress:ci": "concurrently \"cypress run\" --kill-others \"ng serve\" --success first",

Running the build

The “cypress:ci” task will be executed by the “e2e Tests” step in the Jenkins pipeline. Now we can press the “Build Now” button in the Jenkins and get the following result:

When inspecting the console output of the build, we can verify that the Cypress tests really ran:

But what if a test fails? Currently we would need to check the console output in Jenkins to figure out what went wrong. What we need is a test reporter for Mocha. To have the relevant settings we put the following into the cypress.json file in our project’s root directory:

For this to work we need to have the JUnit Plugin installed in the Jenkins. That should already be the case by default. We then insert a “post” block after the “stages” in our Jenkinsfile:

stages {
    ...
}
post {
    always {
        junit 'results/cypress-report.xml'
    }
}

Thus, an action is added to the end of the pipeline, which is generating the test report and allows us to see the failing tests:

That’s it for now. Our Cypress tests run in Jenkins. The complete sources are available on GitHub. As a next step, you could look into Parallelisation of cypress tests to decrease your overall build time. And of course it would be cool to also see the screenshots and videos of the failed tests directly in Jenkins.