Cypress E2E Test Automation with TestGrid

Overview

Cypress is a well-known end-to-end testing framework that allows frontend developers and test automation engineers to run Web and API tests. Because it is a JavaScript-based test automation framework, it is popular among developers. Cypress is a testing tool aimed at developers and QA engineers. It operates directly in the browser and employs a novel DOM manipulation technique. It is well-known for its simplicity, speed, and ability to provide developers with real-time feedback. It supports various browser versions of Google Chrome and Mozilla Firefox on the TestGrid platform. 

Prerequisites

a) Ensure that you understand Cypress fundamentals and how Cypress runs tests.
b) NodeJS version 12 or higher is installed.
c) Log in to the TestGrid Portal with your valid credentials and check to see if the Cypress option is available in your current account plan.

Step 1: The TestGrid platform includes Cypress CLI tool support for your custom Cypress test automation project. From the dashboard, select the Cypress feature.

Step 2: Click the “Generate TestGrid JSON File” button to create your run environment configuration.

Step 3: Fill in the details below.

a) Project Name, Build Name, and select browsers from the available options (Chromium or Firefox).
b) Select the available version and click the “Submit” button to generate JSON.

Step 4: After downloading the testgrid.json file, follow the below steps:

1. Please update cypress_config_file path as per your project
2. Place the testgrid.json file in Cypress Project Directory

Step 5: Now install TestGrid’s Cypress CLI using the below command.

$ npm install -g testgrid-cypress-cli
or 
$ sudo npm install -g testgrid-cypress-cli

Step 6: After successfully installing all required dependencies using the above command, run your project with the following Cypress CLI command.

$ testgrid-cypress run

Step 7: After running successfully, view the results on TestGrid’s dashboard with a test summary and step execution video.

Note: Cypress does not support video recording for Firefox. Currently, TestGrid supports Chrome and Firefox.

View your test results :

All the tests run as part of each spec file are grouped by the browser combination. When you click any browser combination, you can see the detailed view that includes video logs, text logs, etc. If any tests run into an error, relevant screenshots are captured in the Screenshots tab.

On your command-line tool, you can see the completed tests along with their current status as the build execution progresses. After the tests are executed, you can access the results with the build summary.

Happy Testing!