New Cypress Upgrade: Version 12

Cypress announced the new version V12 at end of the last year and it came up with some great features. In this blog we will discuss about the new features of the Cypress Version 12 and steps to upgrade it in your project.

New Features

▪️ Test Isolation

Cypress end-to-end tests are now set test isolation to true by default, which means that we reset the cookies, storage, and the page state before each test. Any tests that relied on the browser to be at a certain state (like from a previous cy. visit() ) will not work with the new test isolation behavior.

▪️ Supports Node.js 14+

Cypress comes bundled with its own Node.js version. When installing the cypress npm package uses the Node.js version installed on our system. The minimum Node.js version supported now to install Cypress is Node.js 14+.

▪️ Behavior Changes in Alias

Cypress always re-queries aliases when they are referenced. This can result in certain tests that used to pass could start to fail. If we want to alias a static value, cypress introduced the type option for .as() to opt into the old behavior.

▪️ New Query Commands

A query is a small and fast command for getting data from the window or DOM. This is important as Cypress can retry chains of queries, keeping the yielded subject up-to-date as a page re-renders. With the introduction of query commands, some commands have been re-categorized and can no longer be overwritten with Cypress.Commands.overwrite():

▪️ Fix for detached DOM errors

The upcoming Cypress 12 release includes a fix for the long-standing and frustrating “Detached DOM” error. The DOM resolution logic has been improved to query new elements that may have replaced older ones due to DOM updates, leading to more reliable and stable tests.

▪️ Cypress API Changes

Cypress has undergone some API changes where commonly used APIs have been replaced with commands.

The Cypress.Cookies.defaults and Cypress.Cookies.preserveOnce APIs have been removed, and the cy.session() command is recommended for preserving cookies, local and session storage between tests.

The cy.server(), cy.route() commands, and the Cypress.Server.defaults API have been removed. The cy.intercept() command should be used instead.

The .invoke() command will throw an error if a function returns a promise, and users should now use .then() instead.

The .should() assertion will now throw an error if Cypress commands are used inside the callback, and users should now use .then() instead.

The .within() command will now throw an error if multiple elements are passed as the subject.

Migration from Version 10 to Version 12

1. You can navigate to package-lock.json file in your project to check your Cypress version. Currently I’m working in Cypress 10.11.0

2. First switch to master and create a branch.

3. Now open the cypress runner. npm cypress openAnd click on the Version upgrade button on the right top.

4. You can see which version you are using currently. Now click the blue button ‘upgrade to 12.8.1’. It will appear the latest available version there.

5. Copy the command npm install -D cypress@12.8.1 as shown here.

6. And paste it in the terminal and click enter to run the command.

7. You can see the package-lock.json and package.json has been updated. Check the dev Dependencies in package-lock.json to see cypress has upgraded to new version. You can see here ‘cypress’: ‘12.8.1’

8. If the branch has no conflicts, commit the changes, and merge the PR.

Thank you and don’t forget to follow for more ! 👍

For Further References :

Migration Guide | Cypress Documentation

Announcing Cypress 12

Upgrade Cypress From Version 9 to Version 12