QA Automation Labs

Cypress Dashboard Configuration and Execute the Test cases

image-768x335

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”, () => {
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

Cypress Dashboard

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

Cypress dashboard
Cypress dashboard

Reference

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

Leave a Comment

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

Recent Posts

image-629

Mocking API Response In Cypress

What is Mocking ? Mocking, in a broader software development and testing context, is a technique used to simulate the behavior of certain components o
Read More

Cypress 13 Integration With BDD/Cucumber & POM

Problem Statement After Cypress version 10, there are some changes needed to integrate Cucumber/BDD with Cypress effectively. In this blog post, we wi
Read More
image-20-768x394

Running End-to-End Cypress Test cases in a Google Cloud Pipeline

Cypress is an end-to-end testing framework that is used to test web applications. It is an open-source JavaScript-based framework that enables de
Read More