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
- Test Stats We can view the number and details of all failed, passed, pending, and skipped tests.
- Stack Trace We can view the complete stack trace of the failed test cases.
- View Screenshots We can view all the screenshots taken for the test cases during the test run.
- 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.
- Parallel Tests We can run multiple tests in parallel while running them on CI.
- Grouping Tests We can group tests based on specific parameters and run them in one test run.
Project Set-up
Create two spec files login_page.spec.js,viewport.spec.js
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(“xxxxx”);
cy.get(“#ctl00_CPHContainer_txtPassword”).type(“xxxxxx”);
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)
cy.viewport(‘macbook-15’)
cy.wait(200)
cy.viewport(‘macbook-13’)
cy.wait(200)
cy.viewport(‘macbook-11’)
cy.wait(200)
cy.viewport(‘ipad-2’)
cy.wait(200)
cy.viewport(‘ipad-mini’)
cy.wait(200)
});
});
Once spec files are created next step we have to configure Cypress Dashboard
Configure Cypress Dashboard
Step 1
Open Cypress runner and Click on the “Runs” Tab
Step 2
Click on “Connect to Dashboard” and Enter the project name
Step 3
Click on “Create Organization” from the above screen which gives us an option with the below options
Step 4
Login with e.g gitHub account from the above screen
Step 5
Create the project by clicking on “Create New Project” from the above screen
Steps 6
To record your first run, complete the below 2 steps
1) Insert ProjectID into your cypress.json file
2) Run cypress while passing the record key. with command
Steps 7
Run the command “yarn cypress run –record –key aexxxd922c-xxx98af-4143-9e77-f97c6c900754”
Test case start executing in cypress dashboard
Once test case execution has been done we can see the test results
