Cypress Dashboard Configuration and Execute the Test cases

This blog covered how we can set up the Cypress dashboard and run our 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.

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

Reference

https://www.cypress.io/dashboard/