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.
▪️ 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
▪️ 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.
Cypress.Cookies.preserveOnceAPIs have been removed, and the
cy.session()command is recommended for preserving cookies, local and session storage between tests.
cy.route()commands, and the
Cypress.Server.defaultsAPI have been removed. The
cy.intercept()command should be used instead.
.invoke()command will throw an error if a function returns a promise, and users should now use
.should()assertion will now throw an error if Cypress commands are used inside the callback, and users should now use
.within()command will now throw an error if multiple elements are passed as the subject.
Migration from Version 10 to Version 12
- 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 email@example.com 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 :
Announcing Cypress 12
Hello, testing fam! Yes, we know it's only been a hot minute since Cypress 11 was released, but the team has been…