How To Run Cypress Tests In Jenkins Pipeline [Jenkins and Cypress Tutorial]

Cypress is one of the fast-growing test automation frameworks. As you learn Cypress, you will probably come across the need to integrate your Cypress tests with your CI environment. Jenkins is an open-source Continuous Integration (CI) server that automates your web applications’ build and deploys process. By running your Cypress test suite in Jenkins, you also automate testing as part of the build process.

Adding LambdaTest to the formula, you can run your apps across different OS and browser combinations. In this Jenkins and Cypress tutorial, we will dive deep into integrating the Jenkins pipeline with LambdaTest’s Cypress Cloud.

So, let’s get started.

Advantages of Jenkins

Jenkins is a widely popular Continuous Integration (CI) tool. It is free-to-use, open-source software written in Java. Jenkins allows boosting your release agility by providing Continuous Integration services. You can trigger these services by a web application server or simply using a command line to hasten the deployment pipeline & release migration activities. In addition, Jenkins’s popularity offers thousands of plugins to fast-track your productivity.

Detailed down are some of the significant advantages of using Jenkins:

• Jenkins is open-source and free to use. It is a preferred CI tool by early-stage startups and large corporations since it has been under development for a long time.

• It is a rich plugin ecosystem. At the time of this blog post, there were close to 1500+ plugins available for use.

• Jenkins can be integrated with popular cloud platforms such as Amazon EC2, Google Cloud, VMWare vSphere, Digital Ocean, and more.

• Anyone can write the tests to detect the errors in their code as soon as possible. So the developers don’t waste time on large-scale error-ridden integrations.

• Issues are detected and resolved almost immediately, which keeps the software in a state where it can be safely released at any time.

• Most of the integration work is automated. Hence fewer integration issues. It saves both time and money over the lifespan of a project.

If you are new to Jenkins and wish to learn more about it, you can go through this Jenkins tutorial that covers what is Jenkins and how & why to use it.

In the next section of this Jenkins and Cypress tutorial, we will look into why Cypress Jenkins is the right option for your team.

Automate Cypress cloud tests and perform browser automation testing with LambdaTest. Our cloud infrastructure has 3000+ desktop & mobile environments. Try for free!

Why Cypress and Jenkins?

Cypress is an open-source, full-featured, and easy-to-use testing framework for end to end testing. Currently, Cypress is preferred by front-end developers and automation testers who know JavaScript. We can install Cypress using NPM. Also, we don’t need to install any additional libraries, dependencies, drivers, servers, etc., as we have to do in the case of Selenium.

As mentioned above, Jenkins is the predicted option of many startups and large companies trying to accomplish Continuous Integration. It offers a significant plugin ecosystem plus easy configuration with Jenkins; if you are looking for an open-source CI tool that is easy to configure with Cypress, then Jenkins is the right option for your team.

In the next section of this tutorial Jenkins and Cypress tutorial , we will learn how to configure Jenkins to run Cypress tests.

Configuring Jenkins to run Cypress tests

We are going to need NodeJS to execute Cypress. In this section of this Jenkins and Cypress tutorial, we will learn how to install NodeJS in our Jenkins environment. However, before this, you must install Cypress. You can go through this blog on getting started with Cypress to install Cypress on the local machine.

1. In Jenkins, go to Manage Jenkins > Manage Plugins > Available Plugins and search for NodeJS Plugin and install it.

2. After you successfully install the NodeJs Plugin, we need to add NodeJs to it. Go to Manage Jenkins > Global Tool Configuration and click Add NodeJS. Then,

• Provide a name for your NodeJS installation Eg: Node14.

• Hit the Install automatically.

• Choose a cypress-compatible NodeJS version.

• Add Cypress for Global npm packages to install.

• We can keep the other configurations as it is.

Now we need to create your Cypress Jenkins project. First, we must keep things simple; let’s use a freestyle project; as a freestyle, we can break down our build job into several smaller build steps, making it more comfortable to manage builds in separate stages. E.g., in one step, a build might run a suite of functional tests and then tag the build in a second step if all available tests are successful.

A Jenkins freestyle project can be as powerful and complicated as any build job built with a Jenkins pipeline or a Groovy DSL. The drawback to freestyle projects is that the user must know how to script all these actions, and developers must learn how to manage these scripts.

1. In Jenkins, click New Item, provide a project name, and choose Freestyle project.

2. As we have our Git project in Source Code Management, add your Git URL and credentials for this Jenkins and Cypress tutorial. If you do not use Git, I encourage you to try it. Git is lightning fast; we’re talking about only a few seconds per command; it quickly adds to your work day. Remember that a large community often is an advantage because an ecosystem revolves around the system.

3. Now we need to switch to the build environment section. Here we will find and select the option, Provide Node & npm bin/ folder to PATH.

4. If you remember, we added a NodeJS installation before. We will see the name we provided in the NodeJS Installation dropdown. Choose it, and then we can keep the other configurations.

We are all set; don’t forget to add our Cypress command to execute the script.

Configuring the Jenkins Pipeline

A pipeline is a series of events or tasks interconnected in a particular order. In plain English, a Jenkins pipeline is a set of modules or plugins which enable the implementation and integration of Continuous Delivery pipelines within Jenkins.

The Jenkins pipeline has an expandable automation system for building basic or complex “template” distribution pipelines via the Domain-specific language (DSL) used in the Pipeline. For example, stages in the Declarative Pipeline may have a stages section containing a list of nested stages to be run in sequential order.

The concepts in Jenkins pipelines are as follows:

• *Pipeline *— It is code executed for the build, test, and delivery of the applications and is a set of instructions in the state of code for continuous delivery.

• Node — It is a machine or system on which Jenkins runs. A node block is a pipeline syntax scripted.

• Stage — Here, we can picture the process of Jenkins pipelines. It consists of a series of steps: build, test, and deploy. In earlier versions of Declarative Pipeline, the only way to run chunks of Pipeline code in parallel was to use the parallel step inside the steps block for a stage).

• Step — It is a single step in the stage; for example, either build or test or deploy from a single step.

The Jenkins pipeline’s main advantages are automating many tasks and making the CI/CD pipeline tasks reliable, efficient, repeatable, and high in quality.

We can find the Jenkins file for the Pipeline as follows for this Jenkins and Cypress tutorial:

pipeline {
   agent any

   tools {nodejs "Node12"}

   environment {
       CHROME_BIN = '/bin/google-chrome'

   }

   stages {
       stage('Dependencies') {
           steps {
               sh 'npm i'
           }
       }
       stage('e2e Tests') {
         Parallel{
             stage('Test 1') {
                  steps {
                sh 'npm run cypress:ci'
                  }
               }

             stage('Test 2') {
                  steps {
                sh 'npm run cypress2:ci'
                  }
               }

       }
       stage('Deploy') {
           steps {
               echo 'Deploying....'
           }
       }
   }
}

1- Create a new project for Pipeline by going to Jenkins –> New Item. Jenkins -> Select the Pipeline.

2- Scroll down to Pipeline Options. And update according to your Git repo.

3- Our Jenkins file will contain our configuration, and then we can see our results.

So far, we have seen how to configure the Jenkins pipeline. In the next section of this Jenkins and Cypress tutorial, we will deep-dive into integrating your Cypress Jenkins pipeline with the Cypress cloud grid.

How to integrate your Cypress Jenkins Pipeline with Cypress cloud grid?

Jenkins Pipeline, also called “Pipeline,” presents a suite of plugins to assist in integrating our continuous delivery pipeline into Jenkins. Jenkins Pipeline does so with the help of Pipeline DSL (Domain Specific Language) syntax that facilitates easy modeling of even the most complex delivery pipeline.

Configuring your Jenkins Pipeline with LambdaTest

Follow these steps to configure LambdaTest with Jenkins:

1. Jenkins 2.X or the latest version.

2. A Jenkins User with root access.

3. LambdaTest Authentication Credentials.

4. Keep an eye on your LambdaTest authentication credentials, i.e., your LambdaTest username and access key. You need to set them up as your environment variables. You can retrieve them from your LambdaTest Automation Dashboard by clicking on the key icon around the help button.

This Cypress test automation tutorial will help you learn the benefits of Cypress automation, and how to install Cypress and execute Cypress automation testing over scores of browsers and operating systems online.

Setting up Jenkins

In this section of this Jenkins and Cypress tutorial, we will look into the steps to set up Jenkins.

pipeline {
   agent any

   tools {nodejs "Node12"}

   stages {
       stage('Dependencies') {
           steps {
               sh 'npm i'
               sh 'npm install lambdatest-cypress-cli'
           }
       }
       stage('e2e Tests') {
           steps {
               sh 'npm run cypress:lambda'
           }
       }
       stage('Deploy') {
           steps {
               echo 'Deploying....'
           }
       }
   }
}

1- Create a new project for Pipeline by going to Jenkins –> New Item. Jenkins -> Select the Pipeline.

2- Scroll down to Pipeline Options. And update according to your Git repo.

3- Our Jenkinsfile will contain our configuration:

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

5- When checking the console output of the build, we can verify that the Cypress tests ran.

As we can notice from the image above, our build was successfully executed, and the tests were uploaded to our LambdaTest Dashboard.

In the following section of this Jenkins and Cypress tutorial, we will learn how to perform parallel testing on Cypress cloud.

How to perform Cypress parallel testing on a cloud grid?

We can use a Cypress cloud grid like LambdaTest, which provides automated cross browser testing on 40+ browsers and operating systems, and Cypress parallel testing to expedite the test execution and help perform our Jenkin pipelines. In addition, it will help improve our overall test coverage by resulting in better product quality, as we can cover different combinations using the same test scripts.

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automated browser testing, Cypress testing, CI/CD, and more.

To get started with Cypress e2e testing, follow the below-mentioned steps:

2- Install LambdaTest Cypress CLI on your machine. Trigger the following command to install the same:

npm install -g lambdatest-cypress-cli

2- After installation is completed, set up the configuration using the below command:

lambdatest-cypress init

3- Once the command is completed, lambdatest-config.json is created in the project folder. Next, enter the LambdaTest credentials from the LambdaTest Profile Section.

"lambdatest_auth": {
      "username": "<Your LambdaTest username>",
      "access_key": "<Your LambdaTest access key>"

4- Here is how you can configure the required browser & OS combinations in lambdatest-config.json:

{
  "lambdatest_auth": {
     "username": "",
     "access_key": ""
  },
  "browsers": [
     {
        "browser": "MicrosoftEdge",
        "platform": "Windows 10",
        "versions": [
           "latest"
        ]
     },
     {
        "browser": "Chrome",
        "platform": "Windows 10",
        "versions": [
           "latest"
        ]
     },
     {
        "browser": "Firefox",
        "platform": "Windows 10",
        "versions": [
           "latest"
        ]
     }
  ],

5- The run_settings section in the JSON file contains the desired Cypress test suite capabilities, including Cypress_version, build_name, number of parallel sessions, etc.

"run_settings": {
     "cypress_config_file": "cypress.json",
     "build_name": "build-Cypress-test",
     "parallels": 5,
     "specs": "./cypress/integration/e2e_tests/*.spec.js",
     "pluginsFile": true,
     "ignore_files": "",
     "npm_dependencies": {
        "cypress": "9.0.0",
        "[@cypress](http://twitter.com/cypress)-audit/pa11y": "^1.3.0",
        "cypress-plugin-snapshots": "^1.4.4",
        "cypress-visual-regression": "^1.6.2"
     },
     "feature_file_suppport": true
  },

6- Tunnel_settings in the JSON file lets you connect your local system with LambdaTest servers via an SSH-based integration tunnel. Once this tunnel is established, you can test locally hosted pages on all the browsers currently supported by Cypress on LambdaTest.

"tunnel_settings": {
    "tunnel": false,
    "tunnelName": null
}

Using LambdaTest, we can run our tests in parallel and reduce execution time. Instead of running tests one by one in sequence, parallel testing allows for running multiple tests simultaneously. In addition, this approach executes tests on various browsers, devices, and operating systems parallelly.

Without Cypress Cloud Grid (Compare e2e Tests timing):

Using Cypress Cloud Grid and running multiple OS and Browsers (Compare e2e Tests timing):

To view test performance metrics, navigate to the LambdaTest Analytics Dashboard. The Test Overview will provide a snapshot of tests consistent with stable behavior. You can see all test results, their status, and the overall number of tests passed or failed in both failures and failures’ breakdowns areas.

If you’re a developer or a tester, Cypress 101 certification will prepare you to write tests faster and with greater confidence. You’ll learn the fundamentals of Cypress end to end testing and walk away with a clear understanding of how to write better tests with this Jenkins and Cypress Tutorial.

This Cypress automation testing tutorial will help you learn the benefits of Cypress automation, and how to install Cypress and execute Cypress automation testing over scores of browsers and operating systems online.

Jenkins and Cypress Tutorial: Final Thoughts

Lastly, in this Jenkins and Cypress Tutorial we have covered Jenkins’s importance and how it can be integrated with our Cypress projects to run our tests efficiently and achieve the goal of continuous integration. Using Jenkins to run our tests is time effective, and the results can be visualized with complete logs. It helps fulfill the entire software development life cycle, from development, deployment, testing, monitoring, and releasing.

Jenkins supports various plugins for achieving the project requirements. It also keeps alerting the user via emails regarding the build’s stability. Thanks for reading through this Jenkins and Cypress tutorial.

Happy Bug Hunting!