Cypress v10 Tips and Tricks

A few tips on getting the most out of E2E testing tool Cypress v10+

This blog post collects my tips for using Cypress v10+ which is a large step after the previous versions of Cypress. I plan to add more tips to this blog post as I use v10 more. See my post Cypress Tips and Tricks for more content; most of it still applies to Cypress v10+ tests.

Register the plugins

Cypress v10+ has merged the cypress.json and the cypress/plugins/index.js files into a single cypress.config.js file. The plugins that you have registered before now should be registered in the e2e / setupNodeEvents method. For example, the cypress-high-resolution used to be registered like this:

1
2
3
4
5
// cypress/plugins/index.js
module.exports = (on, config) => {
// https://github.com/bahmutov/cypress-high-resolution
require('cypress-high-resolution')(on, config)
}

In Cypress v10 it should be registered as

1
2
3
4
5
6
7
8
9
10
// cypress.config.js
const { defineConfig } = require('cypress')

module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
return require('./cypress/plugins/index.js')(on, config)
},
},
})

Tip: the Cypress migration wizard moves the plugins file automatically and it worked pretty well for me.

The migration wizard moving the plugins file to the config file

Launch the test runner in the desired mode

When using cypress open command, we have to pick the testing type and then pick the browser before we can click on the spec to run. This requires extra clicks just to get to the desired list of specs. You can shorten the process via command line arguments (which you can always look up using cypress open --help), for example to open e2e tests using the Electron browser:

1
cypress open --e2e --browser electron

If you want to start component testing using the Chrome browser:

1
cypress open --component --browser chrome

Tip: you can still use start-server-and-test to launch the application server when doing e2e testing. For example, here are my NPM scripts from the package.json file

package.json
1
2
3
4
5
6
7
8
9
10
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"dev": "start-test 3000 cy:e2e",
"e2e": "cypress open --e2e --browser electron",
"comp": "cypress open --component --browser electron"
}
}

If I want to run just the component tests, I use npm run comp command. If I plan to run the E2E tests, I use npm run dev script which starts the application and opens Cypress in the E2E testing mode.

Quickly change the testing type

When running the tests, you can quickly switch from E2E to Component testing and back. Click on the test type icon in the top left corner.

Click on the testing type icon

This brings the testing type modal dialog where you can switch to E2E testing

Pick the other testing type

Run all specs

Cypress v10 has removed the "Run all specs" button. To learn how to get around it, read my blog post Run All Specs in Cypress v10.

Run E2E and component tests on CI

If you are using the Cypress GitHub Action, you need to upgrade to v4 to correctly install the dependencies and run the tests. For example, if you plan to run the component tests before running e2e tests (because it is faster), then do the following in your GitHub workflow

1
2
3
4
5
6
7
8
9
10
11
12
13
- name: Run E2E tests ๐Ÿงช
uses: cypress-io/[email protected]
with:
# to run component tests we need to use "component: true"
component: true

- name: Run Component tests ๐Ÿงช
uses: cypress-io/[email protected]
with:
# we have already installed everything
install: false
# start the application before running
start: npm start

Similarly, if you use Cypress CircleCI Orb, you would need to use v2

1
2
3
4
5
6
7
8
9
10
version: 2.1
orbs:
cypress: cypress-io/[email protected]
workflows:
build:
jobs:
# check out the code, install the dependencies
# and run just the component tests
- cypress/run:
component: true

Check the mode from the config file

If you are trying to decide if the user is running cypress using the cypress open or the cypress run command, you can look at the config.isTextTerminal property. It is set to true during the run non-interactive mode.

cypress.config.js
1
2
3
4
5
6
7
8
9
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
if (config.isTextTerminal) {
console.log('cypress run!)
}
},
}
})

Set the user values using the env block

Read the blog post Cypress v10 Environment Variables.