What’s new in Cypress 10? How it will change your current testing requirements

Cypress 10 was released on 1st, June 2022 with breaking changes. It’s been some time since Cypress has shipped such a huge change. There are a lot of changes in Cypress 10, and it will break your existing Cypress tests. 

Though initially, you might choose not to upgrade for Cypress 10 for a short period, eventually, you would need to update with Cypress 10 to align and use the latest features of Cypress. So, you would need to know what are the new changes in Cypress and how it is going to impact your existing tests. Also, you need to migrate the existing project to Cypress 10.

This article explains the new changes in Cypress 10 and how you can migrate your existing project to Cypress 10.

New features in Cypress 10

There are several new features in Cypress 10, which are intended to make Cypress Test Automation easier for the QAs.  Here are the new features and changes in the latest version of Cypress 10.

1. New Improved User Interface (UI)

Cypress now has a new and improved User Interface that helps you to choose and execute the tests across browsers easily. It now has two different UIs for Component and E2E Testing respectively, which are discussed in detail in the subsequent sections.

2. Component Testing in Cypress 10 (Beta)

Cypress Component Testing allows you to build and test any component quickly. With the components testing offered by Cypress 10, it allows developers to test their application code/components in a real browser. Developers can debug them using Chrome DevTools and fix them instantly. This feature makes Cypress the first choice for both developers and testers and avoids having a different tool for E2E and component testing.

Run Cypress Tests on Real Devices

Cypress provides a User Interface for executing Component Tests, making tests more interactive and providing a rich experience. The developer can render modern framework components such as React, Angular, and Vue components and test them in isolation.

Cypress also provides you with a setup wizard, you can easily set up your project for Component Testing.

3. E2E Testing in Cypress

E2E Testing in Cypress 10 is mostly written by QA/Test Engineers to cover the integrated component tests. Now, end to end testing in Cypress is separated from Component testing. 

Before Cypress 10, the Integration folder was used to put all the end-to-end tests, but with Cypress 10 there is no Integration Folder anymore as it is termed as the e2e folder.

4. File and Folder Structure Changes

Here are a few noteworthy changes in the file and folder structure with Cypress 10:

• The integration folder is renamed the E2E folder. That means cypress/integration is now cypress/e2e
• Spec file extensions have  changed from testfile.spec.js/ts to testfile.cy.js/ts
• cypress/support/index.js and are renamed to cypress/support/e2e.js
• The pluginsFile option is removed. This option is now part of new setupNodeEvents() and devServer() configuration options in your config file
• The testFiles option is removed. This option is replaced with the new specPattern option.
• The ignoreTestFiles option is removed. This option is now replaced with the excludeSpecPattern option
• The baseUrl and experimentalSessionAndOrigin options are no longer available as top-level configuration options and now, it can only be defined within the e2e configuration
• cypress.json file is no longer supported, you need to replace it with one of these file names cypress.config.js, cypress.config.ts, cypress.config.cjs or cypress.config.mjs

Cypress Configuration File will now have the following three parts:

• Global configuration:  Option applicable for both e2e and component
• E2E section: Options that are applicable only for e2e tests
• Component section: Options that are applicable for only component tests

5. Additional flag support for opening Cypress window

Since Cypress has two different parts, component and e2e, if you open the Cypress window with the command npx cypress open, you need to choose manually to land on the specific type of testing. 

Cypress is providing two different flags now, each different for component and e2e as seen below: 

• To open the Cypress E2E Testing window directly
  

  npx cypress open --e2e 

• To open the Cypress component testing window directly.
  

  npx cypress open --component

6. No more Cypress examples downloaded when you download Cypress as a fresh project.

Earlier, when you installed the Cypress by default, there were many example testcases; with Cypress 10 those examples are removed. Now you need to create/download from the Cypress E2E Project setup window.

7. Option to Change the Browser in Test Runner window has been introduced

Earlier, the browser selection option was only at the Cypress Project level window, not the browser selection can be done on the Project window or Test runner window.

Cypress CLI Changes and features in Cypress 10

• Cypress E2E test can be now run with command 

npx cypress run --e2e

• Cypress Component test can be run with command

 npx cypress run –component

• The end-to-end tests by default, without any option, are run using the Cypress CLI command

npx cypress run 

How to Migrate from the Old version of Cypress Test Automation Project to Cypress 10

Cypress 10 has the breaking changes, there are many new features and bug fixes released with Cypress 10. So, If you update your dependency with Cypress 10 and try to execute without migration your project doesn’t work. Once you update the Cypress 10, you need to migrate your existing project to Cypress 10.

Run Cypress Tests on Real Devices

Step 1: Update Cypress dependency in your project

You can update the Cypress dependency to the latest version using the command below: 

npm install cypress@latest

Step 2: Launch the Cypress window

Once the update is complete, launch the cypress window with the command

npx cypress open

Note Sometimes you might face an error, try entering the below command and repeat Step 2.

npx cypress install --force a

Step 3: The new Cypress 10 window Opens, watch the video (optional), and click on Continue to Cypress10.

Step 4: Migration Helper window opens up

Once you click on Continue to Cypress10 the migration helper opens up. 

Step 5: Rename existing Specs

The migration window suggests a spec files folder from integration to e2e

Next, the naming conventions from xyz.js to xyz.cy.js file

Click on Rename These Specs for me

Step 6: Rename the Cypress Support file

As mentioned earlier cypress/support/index.js has changed to cypress/support/e2e.js, so you need to change them accordingly.

Click on Rename support file for me

Step 7: Update Configuration File

The cypress.json is no longer supported in Cypress 10, So you need to migrate the new Cypress configuration file.

Click on Migrate the Configuration File For me

Step 8: Configure End-to-End Tests

Once you complete the above Tests you will be landed on the welcome page.  Click on the E2E Testing tile to Configure End to end Tests

Step  9: Review newly Added files

Cypress windows Open up with the Title “Configuration Files”, Now review all the files and click on Continue

Step 10: Choose the browser

Cypress Lists all the installed browsers on your Machine Click on the Browser of your choice and Click on Start E2E Testing

Step 11: Cypress Specs window

Cypress Specs window opens up, Choose the Spec from the available list. Cypress Test runner starts executing tests

To Sum it up

Cypress 10 is bundled with long-awaited features, one might think Cypress 10 is just a visual User Interface change but that’s not completely true. Cypress has made the changes to internal APIs as well, these changes are required for them to support upcoming long-awaited features such as IFrame Support, Webkit support, etc. 

Cypress wanted to make this migration hassle-free, so it has introduced a migration assistant or migration helper as well which automatically converts your old project into Cypress 10 standards. It has laid a strong foundation for releasing interesting features in the upcoming days.

While Functional Testing is one of the important parts of the Testing application, when performing functional testing you should keep in mind that functionality should work across the browser and platform combinations. This is why Cross Browser testing with Cypress is a must to ensure a seamless user experience.

Moreover, it is recommended that you test on real devices and browsers to ensure that the tests are more accurate when performed under real user conditions. BrowserStack’s real device cloud provides access to 3000+ real devices and browsers to perform end-to-end testing, cross browser testing, and functional testing. It easily integrates with frameworks like Cypress, Selenium, Playwright, etc., and all the major CICD tools like Jenkins, Gitlab, Azure, CircleCI, etc.

Try BrowserStack for free