How to migrate your Test Automation Suite to Cypress 10

Cypress is an open source, NodeJS-based test automation framework. It gives the flexibility to customize, such as adding custom reporters, commands, etc. Cypress can be used for API Testing, End to End Testing, Unit Testing, and Component Testing. 

Cypress periodically releases updates to bring new features and bug fixes to the user. It’s a common industry practice that whenever a new version has breaking changes user has to migrate the project rather than just updating the version. This happens very rarely, not all version upgradation requires migration.

Cypress’s latest version brings a completely new experience, It has released a bundle of features. To align with the new feature, It has made some changes in the project structure. This includes folder name, file name, and configuration options. Cypress also introduced a new feature called component testing. Cypress 10 clearly differentiates end-to-end and component testing.

Why do you need to migrate the automation project to the latest version?

As there are breaking changes in the Cypress latest version, if you don’t update the project to the latest version, you must continue to use the Cypress version 9 or below. Cypress doesn’t release any new features or bug fixes to the lower version hence, you will not receive any new features. Also, if any breaking issues and challenges, for whatever reason, you will not be able to resolve them. 

Cypress always recommends using the latest version as there will be a lot of bug fixes and user-friendly features. So it’s recommended to update and migrate your project to the latest Cypress Version.

How to Migrate Test Automation suite to Cypress 10 or Latest Version

Cypress’s latest version has breaking changes. There are many new features and bug fixes released. So, If you update your dependency with Cypress’s latest version and try to execute without migrating, then your project will not work. Once you update the Cypress latest version, you need to migrate your existing project. Cypress provides an automatic migration option all you need to do, is the review and add it to your project.

A step-by-step guide to migrating Cypress 9 or below to the latest version of Cypress 10.

Step 1: Update Cypress dependency in your project

The Cypress dependency needs to be updated to migrate your project to the latest version. Use the below command to update the Cypress Version.

npm install cypress@latest

Step 2: Open Cypress

Open the Cypress, which will launch the introduction video. Optionally, you can watch the video and Just click on Continue then.

npx cypress open

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

Step 4: Migration Helper window opens up

Once you click on Continue to Cypress 10, the migration helper opens up. 

Step 5: Rename existing Specs

The migration window suggests a change in the spec files folder name 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: Change the Cypress support file

The latest version of Cypress has changed the support files. cypress/support/index.js is changed to cypress/support/e2e.js, so you need to change them accordingly. Click on Rename support file for me, as seen below.

Step 7: Update Configuration Settings

One of the major changes in Cypress’s latest version is the configuration file. The latest version doesn’t support .json extension, and also introduces the dedicated configuration settings for e2e and component testing. However, you don’t have to worry about modifying these. The migration helper makes it for you. To adopt all these changes 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 migrated files

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

Step 10: Select the browser

Cypress lists all the installed browsers. Click on the Browser of your choice and Click on Start E2E Testing.

Step 11: Choose Cypress Specs to run tests

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

Cypress Command Line (CLI) option changes in Cypress latest version

Cypress CLI option continues to work the same as before. However, Cypress has introduced new options. As Cypress is now supporting Component and End to End testing, your project might have both types of tests. You can use the CLI commands (provided by Cypress out of the box) based on your need.

• Execute all e2e tests in Cypress CLI

npx cypress run --e2e

• Execute all component tests in Cypress CLI

npx cypress run --component

Cypress Test Automation Best Practices

• If your application is using third-party APIs for login functionality, do not use the UI-based login, instead, use the programmatic way of login. For example, Using API calls.
• Ask your developers to add data-* attributes that help in the stable execution of automation scripts.
• Do not target text content if they are dynamic.
• Choose the best locators. Attributes like class, id, etc., may change dynamically if you are using a modern framework, so choose the best-suited locator for your project.
• If there is code if you want to reuse it in many tests, use it in the before and beforeEach blocks.
• Avoid using static waits (cy.wait()), which may cause slowness in your tests. Instead, wait for the element dynamically.

Cypress supports multiple operating systems such as Windows, mac, and Linux. Cypress tests can be executed on Electron, Chromium, Chrome, Edge, and Firefox. The modern development framework provides supports all popular browsers in the market, so the organizations support all major browsers whenever they launch the product. 

When you launch the product, the user might use any platform and browser of his choice, you cannot predict them. However, your application should work seamlessly, irrespective of the platform or browser combination. To ensure the application’s stability and robustness, the product needs to be tested across the operating system and browser combinations. 

Though Cypress supports major OS and browsers such as firefox, chrome, and chromium family browsers, you need a supportive infrastructure if you want to execute the tests in different combinations. This brings up the question of Build vs Buy. Setting up your own infrastructure always involves cost and is difficult to maintain in the long term. 

The modern web is moving towards cloud-based options. BrowserStack Automate is one such platform it provides thousands of real devices, multiple operating systems, and browser combinations without any hassles of maintenance anymore. Cypress with BrowserStack is the best choice for the organization to achieve a high-quality result at less cost.

Run Cypress Tests on BrowserStack for free