Execute cypress test cases in Jenkin Pipeline by Integrating mochawesome report

What this blog covered :

How to execute cypress test cases locally with generating mochawesome report

How to set-up Jenkins to run cypress test cases

How to execute cypress test cases in CI/CD Jenkins with generating mochawesome report

Overview

In this blog going to cover the complete flow from cypress project creation to the execution of cypress test cases in Jenkin with mochawesome report generation in Jenkins dashboard.

Step: 1 Create a project and install cypress

Step to create package.json

1. Create a new folder, I called mine project cypress_jenkin
2. Type npm init (package.json) is created

Step to Install cypress

1. Installing Cypress
2. To install Cypress, still in the project folder, run:npm install cypress — save-dev

Step: 2 Open Project (cypress_jenkin) in vs code

Step : 3 Integrating Mocha with Cypress

Since Cypress is built on top of Mocha, we can use Mochawesome with Cypress. The first thing that you need to do is install the required dependencies.

npm i — D mocha mochawesome mochawesome-merge mochawesome-report-generator

Essential packages

Report configuration setting in cypress.json

Script configuration in package.json

Step: 4 Run the test [Locally ] and generate HTML mochawesome report with the below command

yarn run cy: report

Set-up Jenkins and Execute test cases

Step: 1 Install Jenkin on mac

To run the cypress test case in Jenkin's first step to install jenkin, below are the steps for Jenkin installation.

Step 1.1: Install Homebrew

If you don’t already have the Homebrew package manager installed, you will first need to follow the installation steps from https://brew.sh/

You can check if Homebrew is already installed by opening a terminal by typing

brew — version

Step 1.2: Install Jenkins

Once Homebrew is installed, you can run the following command which will download and install the current Long-term support (LTS) version of Jenkins.

brew install jenkins-lts.

Step 1.3: Start the Jenkins server

The next step is to actually start the Jenkins server. You can do that with this command:

brew services start jenkins-lts

This will start the Jenkins server in a few seconds. You can check if it is properly working by visiting http://localhost:8080/

Step 1.4: Get the installation password

To get the password needed to run the installation process, just check the content of the file mentioned on the screen.

Step: 2 Configure Jenkin

Once you have installed Jenkins in any of the ways presented, it is time to do the final setup.

Step 2.1: Install plugins

Jenkins is composed of multiple components called plugins. The next step asks you which plugins you would like to install. Just install the suggested plugins. Don’t worry about this — you can easily add or remove plugins later. Just install the suggested plugins.

Step 2.2: Create a Jenkins User

The next step is to create a Jenkins admin user. Make sure you write down the username and password as you will need them later.

Step 2.3: Configure the Jenkins URL

The final step is to configure the URL for the Jenkins server. This would be prefilled for you. So all you need to do is to click “Save and continue“.

Soon the server will be configured and it's ready for action.

Step 3: Source Code Management setting in Jenkin

Step 3.1: Install node from Global tool configuration

Step 3.2: Provide repository URL, credential, and branch name of the git repository under source code management

Step 3.3: Provide the below commands to install cypress and run test case from execute shell section.

Step 3.4: Provide the below path in post-build (Make sure path should match with workspace) for report generation

Step 4: Jenkins HTML Publisher Plugin (Very important step)

We have to do the below setting to generate HTML reports in jenkin dashboard

Go to “Manage Jenkins” -> “Script console” and run the below command:

System.setProperty(“hudson.model.DirectoryBrowserSupport.CSP”, “”)

Step 5: Now run build in Jenkin

Below report generated in the Jenkin dashboard with the name (Cypress Report)

Click on Cypress Report on the above screenshot we can see below mochawesome report of executed test cases in Jenkins.

See more blogs on Cypress and other tools Under the below link

Blogs - QAAutomationLabs