QA Automation Labs

Cypress Dashboard Configuration and Execute the Test cases


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.

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”, () => {
it(“Login Into Application”, () => {
it(“Logout From Application”, () => {

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

context(‘Viewport’, () => {
beforeEach(() => {

it(‘cy.viewport() – set the viewport size and dimension’, () => {

cy.viewport(320, 480)

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

Cypress Dashboard

Once test case execution has been done we can see the test results

Cypress dashboard
Cypress dashboard


Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Let’s Play with Cypress Feature “Test Replay”

Problem Statement Before Cypress v13, test failures in CI have historically been captured through screenshots, videos, and stack trace outputs, b
Read More

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More