How to Run Cypress With Jenkins [Cypress Jenkins Tutorial]

How to Configure Jenkins With Cypress?

Before configuring Cypress with Jenkins, you need to install Cypress first. You can go through this blog on getting started with Cypress to install Cypress. In this section of the Cypress Jenkins tutorial, we will learn how to configure Jenkins to run Cypress tests.

Install NodeJS Plugin

Let’s look at the steps to install the NodeJS plugin using Jenkins.

• In Jenkins Dashboard, go to Manage Jenkins > Plugins > Available plugins, search for NodeJS plugin, and install it.

• Once the NodeJS plugin is installed, add NodeJS to it. Go to Manage Jenkins > Global Tool Configuration and click Add NodeJS. Then,

• Provide a name for NodeJS installation.
• Mark the Install automatically checkbox.
• Choose a NodeJS version that is compatible with Cypress.
• Install global npm packages for Cypress.
• Keep the other configurations as it is.

Now, we need to create a Cypress Jenkins project. For this, let’s use a freestyle project to help break down the build job into several smaller steps, making managing builds in separate stages more comfortable.

For example, a build might run a suite of functional tests in one step and then tag the build in a second step if all tests are passed.

A Jenkins freestyle project can be as powerful and complicated as any build job built with a Jenkins pipeline or a Groovy DSL. However, it’s necessary to know how to script all these actions, and testers must learn how to manage these scripts.

Create Jenkins Freestyle Project

Below are the steps to create the Jenkins freestyle project:

• In Jenkins, let’s create a Freestyle project.

• 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.
• Now, let’s switch to the build environment section. Here mark the Provide Node & npm bin/ folder to PATH checkbox.

If you remember, we added a NodeJS installation before. We will see the name we provided in the NodeJS Installation dropdown. Select that name, and keep the other configurations the same.

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

Configure 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 that enable the implementation and integration of Continuous Delivery pipelines within Jenkins.

The Jenkins pipeline has a scalable 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 Jenkins 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 scripted pipeline syntax.
• Stage: It consists of a series of steps: build, test, and deploy. In earlier versions of the 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, test, or deploy from a single step.

The main advantages of the Jenkins pipeline are automating various tasks and making the CI/CD pipeline tasks reliable, efficient, and repeatable.

Here is the Jenkins file for the pipeline:

pipeline {
  agent any


  tools {nodejs "Node"}


  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....'
          }
      }
  }
}

Below are the steps to create the project for the pipeline:

• Create a new project for the pipeline.

• Scroll down to the Pipeline option and specify the details of your Git repository in the SCM section.

• Click on Save and Apply. Your Jenkins file will now have the selected configuration.
• Press the Build Now option.

So far, we have seen how to configure the Jenkins pipeline. However, while performing testing using Cypress with Jenkins, developers, and testers might face challenges such as managing diverse browser and device combinations, ensuring efficient test execution across various environments, and handling the setup and maintenance of infrastructure for parallel testing.

To overcome this, integrating Jenkins with the Cypress Cloud Grid like TestMu AI is a viable option. It addresses these challenges by providing scalable testing infrastructure, streamlined test execution, and comprehensive cross browser testing capabilities.

How to Integrate Cypress Jenkins Pipeline With Cloud Grid?

In this section of the Cypress Jenkins tutorial, we will integrate the Jenkins pipeline with the Cypress Cloud Grid like TestMu AI.

TestMu AI is an AI-powered test orchestration and execution platform enabling developers and testers to perform Cypress testing at scale on a remote test lab of real browsers like Chrome, Firefox, Edge, and WebKit. It offers a Jenkins plugin allowing testers to run Cypress tests through the Jenkins pipeline.

Install the TestMu AI Jenkins Plugin

Below are the steps to configure TestMu AI with the Jenkins pipeline:

• Click Manage Jenkins > Plugins.
• Click the Available tab.
• In the filter box, type TestMu AI.
• You will encounter a list of plugins for which you need to select TestMu AI.
• To install the TestMu AI Jenkins plugin, select the checkbox in front of TestMu AI. After successfully installing the plugin, you can find the TestMu AI Jenkins plugin under your installed plugins.

Configure the Jenkins Pipeline

Here is the Jenkins file for the pipeline:

pipeline {
  agent any
  tools {nodejs "Node"}
  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....'
          }
      }
  }
}

Create Jenkins Freestyle Project

Below are the steps to create the Jenkins Freestyle project:

• Let’s create a Freestyle project.

• Scroll down to the Pipeline option and specify the details of your Git repository in the SCM section.

• Click on Save and Apply. Your Jenkins file will now have the selected configuration.

• The cypress:lambda task will be executed by the e2e Tests step in the Jenkins pipeline. Now click on the Build Now option in Jenkins to get the following result:

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

As we can notice from the above snapshot, our build was successfully executed, and the tests were uploaded to our TestMu AI Web Automation Dashboard.

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