Update Cypress to latest version (10)

This is a follow-on Cypress enhancement request from the closed issue “Cypress migration to 10.2?” https://github.com/corona-warn-app/cwa-website/issues/2980.

In the meantime the npm package Cypress 10.11 has been released. No further releases of the Cypress 9.x series are expected.

Issue

cwa-website is currently configured to use Cypress version 9.7.0 This version does not support the Apple M1 ARM architecture natively and requires Rosetta to run. (See blog Running Cypress on the Apple M1 ARM Architecture using Rosetta 2).

Cypress 10.2.0 introduces M1 support and alleviates this issue for this version and later versions. See blog Cypress 10.2.0: Run tests up to 2x faster on Apple silicon (M1)

Suggested change

Update cwa-website to the latest version of Cypress, which is currently 10.11.0.

See Cypress Changelog.

Impact

Cypress 10 introduces breaking changes due to the new functionality of component testing which is added alongside the existing end-to-end testing (e2e). For instance, new folders are introduced, so that the existing cypress/integration folder is migrated to cypress/e2e. Also test specs are renamed: app_to_web.js becomes app_to_web.cy.js. See the Cypress Migration Guide for more detail.

In Cypress 10 the “Run all specs” is no longer available in the UI. Only individual tests can be run from the UI. To run all tests the CLI needs to be used. See Discussion: ‘Run all specs’ removal in Cypress 10.

Migration Steps

Close or merge any existing PRs relating to Cypress tests otherwise these PRs will become stranded and will not work as intended if merged without modification after the Cypress version is migrated.

Install Cypress 10

1. npm install -D cypress@latest (installs cypress@10.11.0 - see Changelog)
2. npx cypress open
3. Click “Continue to Cypress 10”

Migration tool

In the migration tool which automatically starts in the Cypress UI:

1. Click “Rename these specs for me”
2. Click “Rename the support file for me”
3. Click “Migrate the configuration for me”

• “E2E Testing” is now marked as “Configured”
• “Component Testing” is left as “Not Configured”

1. Close Cypress test runner window

Post installation

1. Edit .github/workflows/cypress-test-prod.yml
   • change cypress spec folder from integration to e2e i.e. spec: cypress/e2e/*.js
   • ensure cypress-io/github-action@v4 with v4 or later version of the action is specified (see https://github.com/cypress-io/github-action/releases)
2. Modify the cypress:open script in package.json to use e2e and browser Chrome i.e. "cypress:open": "cypress open --e2e --browser chrome"
3. Update README.md regarding change of folder and removal of “all tests” option in open command.

Verification

Execute the following and check that all tests pass:

npm run test:chrome
npm run test:firefox
npm run test
npx cypress run -s 'cypress/e2e/*.js' -c baseUrl=https://coronawarn.app --headless --browser chrome

Execute npm run test:open and check that the list of e2e test specs is shown immediately and the default browser is Chrome. Select and run one of the tests listed, such as mime.cy.js.

Test on:

• Windows 11
• Ubuntu 20.04
• macOS

Test the workflow .github/workflows/cypress-test-prod.yml and ensure that it passes.

---

• Note that there is currently an issue with a warning message “Couldn’t find tsconfig.json. tsconfig-paths will be skipped”. See issue 22273 in https://github.com/cypress-io/cypress/issues/22273. This warning can be ignored.

---

Internal Tracking ID: EXPOSUREAPP-14080

[Ein-Tim]

@MikeMcC399

I re-checked just now, everything works on my environment.

[MikeMcC399]

• Issue #3202 is now resolved and https://github.com/corona-warn-app/cwa-website/blob/master/README.md#requirements has had the following text added to it:

“In case you use a Mac computer with Apple Silicon, make sure that Rosetta is installed.”

macOs users with M1 ARM hardware should be able to use:

npm test

to build and test the cwa-website now.