This blog covered how we can set up the Cypress dashboard and run our Cucumber test cases in Cypress Dashboard with the Latest Version of Cypress

This blog is divided into two part

1. First Install the Latest cypress version and create cucumber test cases
2. Set up Cypress Dashboard and run cucumber test cases in Cypress Dashboard

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 their status on a single web window

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. 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.

Installing Cypress

Step 1:

Create a folder and Generate package.json

• Create a project, here naming it as Cypress10_With_Cucumber
• Use the npm init command to create a package.json file

Step 2:

Install Cypress

To install Cypress, still, in the project folder, run > npm install cypress — save-dev

Once installed, Cypress version 10.9.0 is reflected as seen below

Installing Cucumber

We have to install two dev dependencies for Cucumber to run the test case in Cypress 10

Step 1:

Install the @badeball/cypress-cucumber-preprocessor using the command npm install -D @badeball/cypress-cucumber-preprocessor

Step 2:

Next, install one more dependencies ‘@bahmutov/cypress-esbuild-preprocessor’ using the commands npm install -D @bahmutov/cypress-esbuild-preprocessor.

We Can see both above dependencies are installed

Step 3:

Add below lines in cypress.config.js for cucumber preprocessor

const { defineConfig } = require(“cypress”);
const createBundler = require(“@bahmutov/cypress-esbuild-preprocessor”);
const addCucumberPreprocessorPlugin =
require(“@badeball/cypress-cucumber-preprocessor”).addCucumberPreprocessorPlugin;
const createEsbuildPlugin =
require(“@badeball/cypress-cucumber-preprocessor/esbuild”).createEsbuildPlugin;
module.exports = defineConfig({
e2e: {
async setupNodeEvents(on, config) {
const bundler = createBundler({
plugins: [createEsbuildPlugin(config)],
});

on(“file:preprocessor”, bundler);
await addCucumberPreprocessorPlugin(on, config);

return config;
},
specPattern: “cypress/e2e/**/*.feature”,
},
});

Covering the below scenarios in this blog

For demo purposes, I have taken the example of the site
http://qaautomationlabs.com/

Scenario Covered :

Scenario 1
Open the Url http://qaautomationlabs.com/
Verify Menu in Home Page
Validate the Title after login

Scenario 2
Open the Url http://qaautomationlabs.com/
Search the blog
Verify the correct blog name searched

Create Feature file

HomeTest.feature

Create a HomeTest feature file that covers the verification of Menus on the site https://qaautomationlabs.com/ also verify the title of the site

Feature: Home Page

Background:
Given I navigate to the Website
Scenario: I want to verify content in Home Page
Then Validate the menus in home page

| menu_name |
| Home |
| Blogs |
| Contact Us |
Scenario: I want to validate title of home page
Then Validate the title after login
| title |
| About Us — QAAutomationLabs |

SearchProductTest.feature

Create a SearchProductTest feature file which covers searching the blog and verifies the searched text “Cypress” in the search result

Feature: Search Product

Background:
Given I navigate to the Website

Scenario: I want to search the product in home page
Then Search the blog
| blog |
| Cypress |
Then Verify correct blog name searched
| searchValue |
| Cypress |

Folder structure looks like the attached below

Create Cypress Test cases

Create Test Class

Create HomeTest.spec.js under Tests ->HomeTest

/// <reference types=”cypress” />
import { Given, Then } from “@badeball/cypress-cucumber-preprocessor”;
import homePage from “../../Pages/HomePage/HomePage.spec”;
beforeEach(() => {
cy.viewport(1600, 720);
});
Given(“I navigate to the Website”, () => {
homePage.enterURL();
});
Then(“Validate the menus in home page”, (datatable) => {
datatable.hashes().forEach((element) => {
homePage.validateMenus(element.menu_name);
});
});
Then(“Validate the title after login”, (datatable) => {
datatable.hashes().forEach((element) => {
homePage.verifyPageTitle(element.title);
});
});

Create SearchProductTest.spec.js under Tests ->SearchProductTest

/// <reference types=”cypress” />
import { Given, When, Then } from “@badeball/cypress-cucumber-preprocessor”;
import searchProduct from “../../Pages//SearchProductPage/SearchProductPage.spec”;
import homePage from “../../Pages/HomePage/HomePage.spec”;

Given(“I navigate to the Website”, () => {
homePage.enterURL();
});
When(“Search the blog”, (datatable) => {
datatable.hashes().forEach((element) => {
searchProduct.SearchProduct(element.blog);
});
});
Then(“Verify correct blog name searched”, (datatable) => {
datatable.hashes().forEach((element) => {
searchProduct.verifyProduct(element.searchValue);
});
});

Create Page Class

HomePage.spec.js under Pages ->HomePage Folder

/// <reference types =”cypress”/>

class HomePage {
enterURL() {
cy.visit(“https://qaautomationlabs.com/“);
}
validateMenus(menus) {
cy.contains(menus);
return this;
}
verifyPageTitle() {
return cy.title().should(“eq”, “About Us — QAAutomationLabs”);
}
}
const homepage = new HomePage();
export default homepage;

SearchProductPage.spec.js under Pages ->SearchProductPage Folder

class SearchProduct {
SearchProduct(searchProductName) {
cy.get(“#top-nav > .page-item-5 > a > span”).click({ force: true });
cy.get(“[id=’wp-block-search__input-2′]”)
.click({ force: true })
.type(searchProductName);
cy.get(“[id=’search-icon’]”).click({ force: true });
}
verifyProduct(searchProductName) {
cy.get(“[id=’main’]”).contains(searchProductName);
}
}
const searchProduct = new SearchProduct();
export default searchProduct;

Once spec files are created next step we have to configure Cypress Dashboard

Configure Cypress dashboard

Step 1

Run the below commandYarn run cypress openORnpx cypress open

After running the above command below screen screen

Click on E2E Testing and Select Browser e.g Chrome and finally Click on “Start E2E Testing in Chrome”

Below screen is open after clicking on “Start E2E Testing in Chrome”

Step 2

Click on the “Runs” Tab from the above screen

Step 3

Click on “Connect your project to the Cypress Dashboard” from the above screen

Step 4

Click on the “Create New” link and Enter Project Name “Cypress10_With_Cucumber”

Step 5

Click on the “Create project” button and finally from the above screen

The below screen opens with the record — key. About the record, key click on the link

Step 6

View projectId added in cypress.config.js is added

Step 7

Now Copy the command “npx cypress run — record — key 6bd73d67–4003–4393-a972–18cf0bb323f3” and run it locally

As the above command runs Test cases start executing

Finally, all Test cases are executed successfully

In the above screenshot, we can see Recorded Run Url is displaying

Step 8

Click on the link Recorded Run below screen is open

Step 9

Click on any of the four-link by which you want to link your dashboard

NOTE: In My case, I have pushed my code to GitHub so I logged in as “Log In with GitHub”

As we logged in to Cypress dashboard its looks like the attached below

Step 10

Now Run the below command againnpx cypress run — record — key 6bd73d67–4003–4393-a972–18cf0bb323f3

Keep Cypress Dashboard open and run the above command.

As we run the above command test case start executing in Cypress Dashboard

Cypress Dashboard Reports

In the below screenshot, we can see Both Test cases are executed successfully

Both feature files are executed

QAAutomationLabs/Tests/HomeTest.feature

QAAutomationLabs/Tests/SearchProductTest.feature

Cypress Dashboard VIDEO

In the below-attached video, we can see the HomeTest feature file executed successfully

In below-attached Video, we can see the SearchProductTest feature file executed successfully