Execute cypress test cases in Jenkin with Integrating mochawesome report

https://kailash-pathak.medium.com/execute-cypress-test-case-in-jenkin-with-integrating-mochawesome-report-ca5e91a5afc4

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 jenkin 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 with 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 and generate HTML mochawesome report with the below command yarn run cy: report Step: 5 Install Jenkin in mac To run cypress test case in Jenkin's first step to install jenkin, below are the steps for Jenkin installation. Step 5.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 5.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 5.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 5.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: 6 Configure Jenkin Once you have installed Jenkins in any of the ways presented, it is time to do the final setup. Step 6.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 6.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 6.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 7: Source Code Management setting in Jenkin Step 7.1: Install node from Global tool configuration Step 7.2: Provide repository URL, credential, and branch name of the git repository under source code management Step 7.3: Provide the below commands to install cypress and run test case from execute shell section. Step 7.4: Provide the below path in post-build (Make sure path should match with workspace) for report generation Step 8: 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 9: Now run build in Jenkin Below report generated in Jenkin dashboard with the name (Cypress Report) Click on Cypress Report on above screenshot we can see below mochawesome report of executed test cases in jenkin.