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 the Jenkins dashboard.
Step: 1 Create a project and install cypress
Step to create package.json
- Create a new folder, I called mine project cypress_jenkin
- Type npm init (package.json) is created
Step to Install cypress
- Installing Cypress
- 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 and generate HTML mochawesome report with the below command
yarn run cy: report
Step: 5 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 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 the test case from executing 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 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.
