Cypress v10 - What's new?

Greetings CyHeads!!

Given that I recently joined Cypress.io 's Ambassador Program; it came with a few perks one of them is a sneak peek into Cypress.io new releases before Public release and I got my hand-on with Cypress v.10-beta and here is my take on the v10 release.

A list of new/removed features

Cypress v10 offers :

• Component Test is now part of Cypress v10 as Beta
• Change to configuration files
• Let's you choose between E2E Testing or Component Testing
• Cypress Studio experimental support has been removed
• A refreshed Test Runner UI

A list of new/removed features Cypress v10 offers :

• Component Test is now part of Cypress v10 as Beta
• Changes to configuration files
• Let’s you choose/segregate between E2E Testing or Component Testing
• Cypress Studio experimental support has been removed
• A refreshed Test Runner UI

• With new enhancements you see your tests run history from the Cypress Dashboard (you have to be logged in)

- During cypress open, the ability to "Run all specs" and "Run filtered specs" has been removed.

- New --e2e and --component CLI flags were added to cypress run and cypress open to allow a user to run or launch Cypress for a specific testing type. If a testing-type specific CLI flag is not provided when running cypress run, Cypress will run end-to-end tests by default.

Upgrading to Cypress v10

You have to first install the latest cypress dependency to v10.x.x and run npm install or yarn install based on your framework.

Then just open Cypress using cypress open command

Once you select E2E testing, it will lead you to a migration helper screen, which will help you migrate your tests with a click of a button:

1) You have to rename your existing tests, (which is more of a directory change really):
In v10, the default spec folder has been changed from: cypress/integration -> cypress/e2e

So your new updated tests should look like below:

2) Existing support files have also been changed:

So basically as Tests are clearly distinguised among E2E and Component Tests, So your existing cypress/support/index.js is changed to either cypress/support/e2e.jsor cypress/support/componenet.js

3) Migrate your Configuration file:

• Using a cypress.json configuration file is no longer supported. Replace this configuration file with a cypress.config.js, cypress.config.ts, cypress.config.cjs or cypress.config.mjs file. This change provides better flexibility and extensibility of configuration.
• The testFiles , ignoreTestFiles option was removed. This option was replaced with the new specPattern, excludeSpecPattern option respectively
  The specPattern option is a new testing-type specific configuration option that must be defined within the e2e and/or component configurations.

Issues you might face with Cypress v10

Below is a list of issues I have encountered so far with the Beta version:

1. I had Cypress Test Runner crash multiple times during headless and open test runs.(which you can avoid with an npm cache clean — force command as per info available on internet, but didn’t work for me) https://github.com/cypress-io/cypress/issues/22002
   EDIT: it is fixed in v10.0.1

2. To those who use cypress with cucumber will face issues with Cypress being not able to identify tests as after migration “integration” folder is replaced with “e2e” and cypress-cucumber-preprocessor still searches for an “integration” folder for step-defs.

Workaround for this is keep your .feature files in the cypress/e2e folder under cypress directory and all your test-definitions under the cypress/integration folder, until cypress-cucumber-preprocessor supports v10

3. Cypress on the first launch might throw an error like the below related to plugins/index.js file.

To resume you will need to comment out your plugins file content and later use setupNodeEvents() or devServer() option based on your testing type to reference any plugins files

3) Cypress on the first launch might throw an error like the below related to plugins/index.js file.
To resume you will need to comment out your plugins file content and later use setupNodeEvents() or devServer() option based on your testing type to reference any plugins files

...
e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      return require('./cypress/plugins/index.js')(on, config)
    },
    specPattern: 'cypress/e2e/**/*.{feature,features}',
    excludeSpecPattern: ['**/stepDefinitions/*', '*.js', '*.md'],
  },

Closing Notes:

All in all Cypress v10 is a promising new update for Cypress.io and would be a great step (My self prejudice aside) for people looking for a new E2E/Component Test tool for their application.

Happy Upgrading!

Links:

Cypress v10 Changelog:

Official Announcement: