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
- Launch the test runner in the desired mode
- Quickly change the testing type
- Run all specs
- Run E2E and component tests on CI
- Check the mode from the config file
- Set the user values using the env block
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 | // cypress/plugins/index.js |
In Cypress v10 it should be registered as
1 | // cypress.config.js |
Tip: the Cypress migration wizard moves the plugins file automatically and it worked pretty well for me.
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
1 | { |
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.
This brings the testing type modal dialog where you can switch to E2E testing
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 | - name: Run E2E tests ๐งช |
Similarly, if you use Cypress CircleCI Orb, you would need to use v2
1 | version: 2.1 |
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.
1 | module.exports = defineConfig({ |
Set the user values using the env block
Read the blog post Cypress v10 Environment Variables.