Pre-Condition:

Please go through the below blog to know how we set up Cypress Dashboard https://qaautomationlabs.com/cypress-dashboard-configuration-and-execute-the-test-cases/

What is Cypress Dashboard?

Cypress Dashboard is a web-based component that provides various features related to projects and test runs in Cypress.

Cypress Dashboard increases test velocity while giving total visibility into tests running in your CI pipeline. Additionally, it provides the visual representation of the test runs, their reports, and status on a single web window

Why Cypress Dashboard?

Cypress dashboard is helpful

1. Test Stats We can view the number and details of all failed, passed, pending, and skipped tests.
2. Stack Trace We can view the complete stack trace of the failed test cases.
3. View Screenshots We can view all the screenshots taken for the test cases during the test run.
4. View video We can watch a complete video of the test run. Additionally, you can also watch just a clip out of the entire test run.
5. Parallel Tests We can run multiple tests in parallel while running them on CI.
6. Grouping Tests We can group tests based on specific parameters and run them in one test run.

Cypress Project Set-Up

Create below two test cases login_page.spec.js and viewport.spec.js under the integration folder

login_page.spec.js/// <reference types=”cypress” />

describe(“Test login funcationlity : login into the application and logout “, () => {
it(“Open URL”, () => {
cy.visit(“http://www.testyou.in/Login.aspx”);
});
it(“Login Into Application”, () => {
cy.get(“#ctl00_CPHContainer_txtUserLogin”).type(“xxxxxx”);
cy.get(“#ctl00_CPHContainer_txtPassword”).type(“xxxx);
cy.get(“#ctl00_CPHContainer_btnLoginn”).click();
});
it(“Logout From Application”, () => {
cy.get(“#ctl00_headerTopStudent_lnkbtnSignout”).click();
});
});

viewport.spec.js/// <reference types=”cypress” />

context(‘Viewport’, () => {
beforeEach(() => {
cy.visit(‘https://example.cypress.io/commands/viewport’)
})

it(‘cy.viewport() – set the viewport size and dimension’, () => {
// https://on.cypress.io/viewport

cy.get(‘#navbar’).should(‘be.visible’)
cy.viewport(320, 480)

// the navbar should have collapse since our screen is smaller
cy.get(‘#navbar’).should(‘not.be.visible’)
cy.get(‘.navbar-toggle’).should(‘be.visible’).click()
// lets see what our app looks like on a super large screen
cy.viewport(2999, 2999)
});
});

Package.json

In Package.json we have added the required dependency already i.e mochawesome,mochawesome-merge, etc.

Also, we have added a record key, within continuous Integration, or from your local computer’s terminal, we need to pass Record Key while running the cypress run command.

The record key is used to authenticate that your project is allowed to record tests to the Dashboard Service.{
“name”: “cypress_dashboard”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“cleanup”: “rm -fr cypress/reports”,
“merge_reports”: “mochawesome-merge cypress/reports/mochawesome-report/*.json > output.json”,
“mochawesome_report”: “marge –reportDir cypress/reports/mochawesome-html-report -t Cypress_Test_Report -p Cypress_HMTL_Report -f Cypress_HMTL_Report –charts true output.json”,
“cy_dashboard”: “cypress run –record –key aeed922c-98af-4143-9e77-f97c6c900754”,
“cy:report”: “npm run cleanup && npm run cy_dashboard && npm run merge_reports && npm run mochawesome_report”
},
“author”: “Kailash”,
“license”: “ISC”,
“devDependencies”: {
“cypress”: “^9.7.0”,
“mocha”: “^8.3.2”,
“mochawesome”: “^6.2.2”,
“mochawesome-merge”: “^4.2.0”
}
}

Cypress.json

Once you set up your project to record, we generate a unique projectId for your project and automatically insert it into your Cypress configuration file.{
“reporter”: “mochawesome”,
“reporterOptions”: {
“reportDir”: “cypress/reports/mochawesome-report”,
“overwrite”: false,
“html”: false,
“json”: true,
“timestamp”: “mmddyyyy_HHMMss”
},
“projectId”: “y1sg2j”
}

Set up Jenkins to run Cypress test cases

Step 1 Install Jenkin in mac

To run the cypress test case in Jenkin’s first step to installing Jenkins, 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 the cypress and run test case from executing 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 Jenkins 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 is generated.