Integration to Jenkins - Cypress

Table of contents

Reading Time: 4 minutes

Hi folks,

In this blog, we will learn how to integrate Cypress with the Jenkins CI tool. And as an add on, we will learn how to parameterise our test cases for Jenkins jobs as well. So let’s get started.

Configuring Jenkins

First of all, we need to download Jenkins to our local system. It is recommended that we should download the generic java package (.war) file as it can be executed on almost every OS. We can download it from here, https://www.jenkins.io/download/ .

After downloading it, open the terminal and open the directory where this .war file is present. Afterwards, execute the command

java -jar jenkins.war

Now while it is running, open this address in our web browser .http://localhost:8080/. Moving forward, something like this will appear on our screen.

We can find the password in our terminal and on the location specified in the image above. Now, we have to install the plugins, it is always safe to install the suggested one’s. We can do so by clicking on it, as specified in the image below.

It will take some time to install these plugins, so please be patient. After the plugin installation, we will encounter something like the image given below.

After, filling these things out, our Jenkins is configured. Now, all we have to do is to create a new job. We can do so by clicking on the “New Item” on the left side of the dashboard, then we can select the freestyle project as an option.

Moving on, now we have to integrate cypress.

Integrating Cypress

In this blog, we will call out the mandatory fields that need to be filled while creating a job, the rest of the things are optional.

Firstly, we have to specify the VCS that we are using, for example, here we are using GitHub. Select Git in the Source Code Management section and fill out the repository link and branch(if any).

Moving forward, we need to specify the Build. Since cypress is build upon node JS, we can select “Execute Shell” here.

Then, we are required to provide the command that will execute our test.

node_modules/.bin/cypress run

And that is all, just save and apply these changes and our cypress tests are now configured with Jenkins. All we have to do now is to build our project. To do so, go back to the dashboard and click on “Build Now” and we are all done.

Here you can see that the tests are being executed in the headless mode.

Parameterizing our test in Jenkins

To achieve this, we would have to make changes to our project. Firstly, we have to define scripts that we need to execute. To do so, we can add the command as scripts in the package.json file. There, we can find a field named “script”, we can add the command to be executed here as a key-value pair.

For example, consider two scenarios where

we can execute our test in headless mode
we can execute our test in the browser, head mode.

Just add this code snippet to your package.json

 "scripts": {
    "testHeadless": "node_modules\\.bin\\cypress run",
    "withHeadTest":"npm run testHeadless -- --headed"
  },

Moving on, we have declared our test as paramterized in Jenkins. Go to the configurations and in general, select “This project is parameterized“. We will stumble upon something like this,

Furthermore, select the Choice Parameter option from the drop down menu. Give the name to the choice parameter and add the choices that we have defined in the package.json file.

We also need to change the command that we have given to execute the shell. We can change it to

npm run "$para" // para variablr is already defined in the parameterized test section.

Just save the changes and move back to the job. You may notice that the “Build Now” option has changed to “Build with Parameters“. This shows that our changes are being reflected.

Click on the Build with Parameters button and select the parameter of your choice and we are all set.

That’s all folks. I hope you may have found this useful