How to migrate your Test Automation Suite to Cypress 10

Cypress 10 was a major update to the Cypress testing framework enforce in 2022. This update included many important enhancements and changes in the project structure that simplified developer experiences and improved their examination capabilities. This included standout functionality like extensive configuration pick, component testing, and more.

This usher teaches you how to upgrade and migrate from Cypress Version 9 to Cypress Version 10.

Why Update and Migrate Your Automation Project to Cypress Version 10?

As there are breaking modification in the Cypress 10, if you don ’ t update the project to align with it, you must continue to use the Cypress version 9 or below.

Cypress doesn & # 8217; t release any new features or bug fixes to the low-toned 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.

So it & # 8217; s recommended to update and migrate your project to the latest Cypress Version.

Features of Cypress 10

Here are the standout characteristic of Cypress 10:

• Unified Testing Experience: Cypress 10 get with a unified interface that merges (E2E) and to reduce the need for separate form.
• New Cypress App UI: The redesigned Cypress app delivers an intuitive interface, facilitating easy navigation between test modes and configure settings.
• Project-level Configuration: Cypress 10 introduces centralized configuration options via project-level configuration, which allows exam settings to be managed from a single place.
• Improved ‘ cy.intercept ’: cy.intercept contains additional capabilities, like conditional stubbing, that allow you to customize network request stubs according to conditions, so enhancing tractability in test setups.
• Auto-Updating Configuration Files: Cypress 10 lets you auto-update configuration files to retain compatibility with the latest Cypress version, making the ascent sander.

How to Update and Migrate Your Test Automation Suite to Cypress 10

Cypress version 10 many unique features and bug fixture released. So, If you update your dependency with Cypress ’ s adaptation 9 and try to execute without migrating, then your project will not work.

Once you update the Cypress latest version, you want to migrate your existing project. Cypress cater an automatic migration choice all you demand to do, is the followup and add it to your undertaking.

A step-by-step guidebook to migrating Cypress 9 or below to the up-to-the-minute version of Cypress 10.

Step 1: Update Cypress habituation in your project

The Cypress dependency want to be updated to migrate your project to adaptation 10. Use the below dictation to update the Cypress Version.

npm install cypress @ latest

Step 2: Open Cypress

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

npx cypress open

Step 3: The new Cypress window outdoors, observe the video (optional), and pawl on Continue to Cypress 10

Step 4: Migration Helper window open 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 thespecfile folder name from integrating to e2e. Next, the appellative conventions fromxyz.js to xyz.cy.js file.

Click on Rename these specs for me

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Step 6: Change the Cypress support file

The latest version of Cypress has changed the support files.cypress/support/index.jsis alter tocypress/support/e2e.js, so you need to change them accordingly. Click onRename support file for me,as realize below.

Step 7: Update Configuration Settings

One of the major changes in Cypress & # 8217; s latest version is the configuration file. The latest adaptation doesn & # 8217; t support.jsonextension, and also inclose the dedicated constellation settings for e2e and component testing. However, you don & # 8217; t hold to worry about modifying these. The migration helper makes it for you. To adopt all these changes Click on Migrate theConfiguration File For me.

Step 8: Configure End-to-End Tests

Once you dispatch the above Tests, you will be landed on the welcome page.Click on the E2E Testing tileto Configure end to end Tests.

Step 9: Review migrated files

Cypress windows Open up with the Title & # 8220; Configuration Files & # 8221;. Now review all the files and folder names, then detent onContinue.

Step 10: Select the browser

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

Step 11: Choose Cypress Specs to run tryout

Once the Cypress Specs window open up, choose the Spec from the available tilt. Cypress Test runner starts executing examination.

Talk to an Expert

Cypress Command Line (CLI) alternative changes in Cypress Version 10

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) establish on your demand.

• Execute all e2e tests in Cypress CLI

npx cypress run -- e2e

• Execute all component exam in Cypress CLI

npx cypress run -- component

Cypress Test Automation Best Practices

• If your covering is utilise 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 adddata-*attributes that help in the stable execution of automation book.
• Do not place text content if they are dynamic.
• Choose the best locators. Attributes likeclass, id, etc., may change dynamically if you are using a mod fabric, so choose the best-suited locator for your project.
• If there is code if you want to reprocess it in many tryout, use it in thebefore and beforeEach blocks.
• Avoid using static waits(cy.wait ()), which may cause slowness in your tests. Instead, wait for the element dynamically.

Why Run Your Cypress Tests with BrowserStack

Here ’ s why you should use BrowserStack for running your Cypress tests:

• : Cypress run on limited browsers, mainly Chrome-based ace. BrowserStack helps you expand your Cypress tests to many other browsers, such as Safari, Edge, IE, and more.
• Cloud Infrastructure: BrowserStack is a cloud-based platform that doesn ’ t require setting up or maintaining browsers or physical device locally.
• Parallel Testing: With, you can run multiple Cypress tests concurrently, speeding up test performance and eventually the release cycles.
• Real-device examination: BrowserStack offer you a vast, letting you run Cypress tests on 3500+ real device, browser, and OS combination, thus allowing you to test under.
• Integrations: BrowserStack offers seamless with respective like, Circle CI, Bamboo and more.
• Scalability: By supporting real-device and parallel testing on a cloud-based substructure, BrowserStack permit you run hundreds of Cypress tests across different surroundings.

Conclusion

When you found a product, the exploiter might use any platform and browser of his choice and your application should work seamlessly, irrespective of the program or browser combination.

Though Cypress supports major OS and browsers such as, chrome, and chromium family browsers, you need a supportive infrastructure if you require to execute the tests in different combinations.

This brings up the inquiry of. Setting up your own infrastructure always involves cost and is unmanageable to maintain in the long term.

The modernistic web is moving towards cloud-based options. is one such platform it provides thousands of existent device, multiple operating systems, and browser combinations without any tussle of alimony anymore. is the best selection for the organization to achieve a high-quality result at less cost.

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides