Link to Cypress Documents for DST tools:

Testing with Cypress - Seeding Rate Calculator

Testing with Cypress - Species Selector

Testing with Cypress - PlantMap3D

Introduction

Why use Cypress?

• Cypress allows us to write the following tests, while giving developers access to its interactive GUI

  • End-to-end tests

  • Component tests

  • Integration tests

  • Unit tests

• Grab a coffee while you go through the features of Cypress.

Setup and Installation

For a quick start and detailed guidance on using Cypress, please refer to the documentation.

Installation Steps

...

Expand
title To open Cypress, run the following command
npx cypress open Image Added

Expand
title Follow these steps in the cypress GUI
Check for a new cypress window popup Image Added Select component testing Image Added For the Project Setup screen, do not change the detected framework (should be create react app) and select Next Step. Install all the dev dependencies (should be already installed, if not just npm install all the required dependencies) and select continue Next screen should show all the Configuration files, select continue Image Added Choose chrome as the browser and Start Component Testing in Chrome Image Added Note Check VSCODE for the project directory, you should see a new cypress folder created in the root folder. If not then the installation was not correct.

...

// code for adding a custom Cypress command
// @Params: [test-id]: string
// usecase: cy.assertByTestId("<test-id>");
// result: gives assertion for element existance
 
Cypress.Commands.add('assertByTestId', (testId) => {
  cy.get(`[data-cy=${testId}]`).should('exist');
});

Intercepting Network Calls

Whenever we write tests and find API calls that render same results, we should use cy.intercept() to intercept these calls and send back the a stored result. This can also be used when an API call has a large response body and the client may be using only a portion of it.

All such responses from API calls must be stored in the fixtures folder located at cypress/fixtures and used in the intercept command as follows:

cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData');

Running Tests

• Open tests in GUI by using the command

• Code Block
  language bash
  npx cypress open --config-file={env}.config.js

• To open tests in headless mode (run in terminal without the GUI) run the following command

• Code Block
  language bash
  npx cypress run --config-file dev.config.js // runs e2e tests npx cypress run --component --config-file=dev.config.js // runs component tests

...