End-to-end testing with Cypress

End-to-end testing on VA.gov is accomplished using browser tests written with Cypress.

Cypress is a testing tool that is used to test the entire frontend flow of a product (this is often referred to as end-to-end testing). As opposed to unit testing, which tests the smaller units of logic that comprise the product, end-to-end tests validate the behavior of the product at a higher level by simulating how a user might interact with it.

Frontend developers building products on VA.gov write Cypress tests alongside the source code for their applications. Additionally, there is a form tester that automates Cypress end-to-end tests on VA.gov form applications. In the tests, developers define the user actions to be performed on the application and the expected results of those actions. The tests can then be run to follow all the defined user actions and report any deviations from the expected results.

The Platform requires all teams building on VA.gov to use Cypress for newly written functional tests. In addition, each page should have an automated accessibility check run as part of its functional tests. The Platform has accessibility testing helper functions which make the Axe accessibility testing engine available to Cypress for this purpose. Axe is capable of finding many WCAG and accessibility best practice violations.

Initial setup

Cypress tests should be written in the tests directory of the application. Cypress tests should also have the file extension .cypress.spec.js (e.g. my-test-name.cypress.spec.js).

The overall folder structure for Cypress in the vets-website repo is as follows:

vets-website
|
└───src/platform/testing/e2e/cypress
│   |
│   └───plugins
│   |   │   index.js
|   |
│   └───support
│       │   commands
│       │   index.js

• plugins contain custom tasks that allow you to tap into the Node environment. This is valuable because all Cypress test code is executed in the browser, so plugins allow us to execute code in the Node process running outside of the browser.

• support contains custom Cypress commands. By default, the custom commands imported in commands/index.js are available to all of our Cypress tests. These commands can be invoked similarly to the built-in commands. This is also where custom commands from Cypress plugins are imported. One important command is injectAxeThenAxeCheck which should be called on every page and which runs an automated accessibility check.

For a list of currently used custom written Cypress helpers and mocks for vets-website, browse the Cypress Resources Overview & Guide.

Help and feedback

• Suggest content changes to this page.

• Submit new Platform Website content.

• Get help from the Platform Support Team in Slack.

• Submit a feature idea to the Platform.