Cypress v10 Tips and Tricks

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:

// 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

// 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.

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:

cypress open --e2e --browser electron

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

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

{
  "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.

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

- 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

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

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.