Cypress Tests - bcgov/PIMS GitHub Wiki

What is Cypress?

Cypress is a testing framework that we are using for End to End testing.

Writing Tests

Read up on Cypress Best Practices before creating a test.
One of the key points here, is that we want to clean up tests before the tests happen.
For an example, look at frontend/cypress/e2e/DisposalProjects/createDraft.cy.ts

Read our Commenting Standards for Cypress Tests.

Selecting Elements:
Every test you write will include selectors for elements. To save yourself a lot of headaches, you should write selectors that are resilient to changes.

+ Use data-* attributes to provide context to your selectors and isolate them from CSS or JS changes.
Selector Recommended Notes

cy.get('button').click()

 🚩 Never Worst - too generic, no context.

cy.get('.btn.btn-large').click()

 🚩 Never Bad. Coupled to styling. Highly subject to change.

cy.get('#main').click()

 ⚠️ Sparingly Better. But still coupled to styling or JS event listeners.

cy.get('[name="submission"]').click()

 ⚠️ Sparingly Coupled to the name attribute which has HTML semantics.

cy.contains('Submit').click()

 ✅ Depends Much better. But still coupled to text content that may change.

cy.get('[data-testid="submit"]').click()

 ✅ Always Best. Isolated from all changes.

Running Tests

Run npm run cypress:open in frontend to open the cypress application window.
Run npm run cypress:e2e in frontend to run the end to end tests in CLI.

Select E2E Testing:

Select the browser to test on:

Select the test you want to run:

⚠️ **GitHub.com Fallback** ⚠️