Cypress 11 is the new version of Cypress, released on 11 August, 2022 with breaking changes. It is the upgraded version of Cypress 10 released on 1st June 2022 and migrated to huge changes. New changes have been made in Cypress by fixing the issues in Cypress. To effectively use Cypress, it is important for you to get an idea of the stable versions of Cypress 11.
It will help you get started. Though initially, you might be using Cypress 10 and not upgraded to Cypress 11 for a short period. Eventually, you are required to update the Cypress version to Cypress 11 to align and utilize the latest features of Cypress. Hence, it is quite important for you to note new changes in Cypress 11 and the way it is impacting the tests.
The present blog is focused on this and will detail the new modification, features, and aspects of the Cypress 11.
Before initiating with Cypress 11, you actually need to know what exactly Cypress is and why we require this.
What is Cypress?
In simple language, Cypress is Front end testing tool based on JavaScript programming language for building modern web. It works directly in the browsers with the use of DOM manipulation techniques and allows front-end developers to write automated web tests. It operates on the Mocha framework, which runs on and in the browser, making asynchronous testing convenient and easy.
Need of Cypress
Cypress is needed to test a wide range of applications operating in the browser. The best part of Cypress is that it is free, and we do not require a license to use it. It also comes with dashboard services which help us to record the test execution. In other words, it gives us a platform where debugging is easy and fast, and we can maintain code efficiently.
Some of the crucial aspects of Cypress are highlighted below:
You can capture the snapshot of the test during the execution.
It has error and stack traces, which makes debugging fast and easy.
It has an automation wait option for the test cases.
It has the ability to test the edge test cases by mimicking the server time response.
It also allows cross-browser testing and supports Firefox, Chrome, and others.
The above information has given you a quick overview of Cypress, which will help you learn new features of Cypress 11.
New in Cypress 11
Cypress Component Testing
Compared with the previous Cypress 10, Component Testing was introduced into beta. In the new release of Cypress 11, Component Testing has taken to general availability (GA) from beta. First, you need to understand what component testing is. Component Testing helps to build and test specific components with the use of a front-end framework in isolation. Test running in the browser and allows you to test the behavior of the components with familiar tools.
In promoting the feature beta of Component Testing, time is given to real users to gather feedback, iterate on the structure, and complete any issue which is needed generally. In moving Component Testing to GA, there is no break in API and its related functionality.
On beta release, there has been constant repetition on Component Testing by supporting the new frameworks like Svelte and fixing the bugs along with stabilizing API. With Component Testing going to GA in Cypress 11, there is the availability of general support for React, Next.js, Vue, and Angular and Component Testing. There is a minor list of breaking changes in Component Testing in Cypress 11 to the mount API and development servers that are required for upgradation. Some of the small changes to the mount API are below:
cssFile, cssFiles, style, styles, stylesheet, and stylesheets removed from the “options “argument to cy.mount() function. This is done to provide a consistent experience across all the frameworks and lowers the number of ways to perform the same thing.
Within the similar test, following cy.mount calls, the last mounted component is removed from DOM.
mountHook from Cypress/react and unmount from Cypress/react been removed.
An illustration migration looks like this:
Before Cypress 10
Image source: https://www.Cypress.io/
After Cypress 11
Image source: https://www.Cypress.io/
in practice, it was noted that Cypress exposed to the mountCallback function is rarely used and gives rise to confusion like when to use mount vs. mountCallback? Thus, in order to keep the API consistent, the mountCallback option has been removed.
Example:
Before Cypress 10
Image source: https://www.Cypress.io/
After Cypress 11
Image source: https://www.Cypress.io/
The above changes give a foundation for supported libraries like React, Vue, Angular, and Next.js, along with third-party integration and future officials.
Changes for angular user
In Cypress 10, providers passed as part of the MountConfigwere considered and superseded the component providers through the TestBed.overrideComponent API.
However, in Cypress 11, providers passed as part of the MountConfig were assigned at the level of the module with the use of TestBed.configureTestingModule API. This indicates that it is possible to override the module-level providers (resolved from imports or @Injectable({providedIn: ‘root’ }). However, it is not possible to override the providers specified in @Component({ providers: […] }) with the use of cy.mount(MyComponent, { providers: […] }). Thus, for using component level providers, it is suggested to use TestBed.overrideComponent API.
Example for the above changes in Cypress 11
Image source: https://www.Cypress.io/
After Cypress 11
Image source: https://www.Cypress.io/
Change to the Vite Dev Server
In Cypress, small changes have been made to the @Cypress/vite-dev-server package. As shown in the below image, there was a possibility to provide an inline dev server configuration, and this would merge with any of the vite.config file.
Image source: https://www.Cypress.io/
Sometimes, this created confusion due to the availability of multiple places to define the configuration. Thus, to overcome this, in Cypress 11, on giving inline viteConfig to the configuration file, there will be no automatic merging of the vite.config.
However, if there is a requirement to merge two configurations, you can do this by importing and merging manually, as shown below:
Image source: https://www.Cypress.io/
Improvement in start-up performance
In Cypress 11, massive improvement has been made in start-up performance. Now we can see an 85% faster start-up time. This is done by migrating a snapshot of Cypress’s binary instead of the source file. The boost in the performance applies to the times when the Cypress command is running (Cypress open) till the time the Cypress app is opened.
It has merged V8 snapshots into the build process for Electron Binary to improvise the start-up time and lower the time for downloading and unzipping the binary during installation.
Image source: https://www.Cypress.io/
Other changes in a newer version of Cypress 11
The release of Cypress 11 was further modified, and its related version was brought into existence. Some of the new changes in the versions of Cypress 11 are explained below:
Cypress 11.0.1
It was released on 11 September, 2022. It has fixed the regression noted in Cypress 11.0.0, which often led to the enabling of experimentalSessionAndOrigin. This showed a webpack error. It has also fixed 11.0.0 regression where the use of the custom reporters often leads to the “Cannot find module” bug in Cypress.
Earlier, Cypress needed to be started to allow configuration updates. In Cypress 11.0.1 testIsolation configuration validation is fixed, which does not require any restarting.
Cypress 11.1.0
The newer version of Cypress 11.1.0 supports Next.js v13, which was unsupported in Cypress 10. It has the option of accepting the extension.directives option by using the mount() command. It is registered globally for Vue2 component testing.
It is now possible to overcome the issue of reloading the failed session in the next test. It is done as sessions are not being stored if validation fails. Further, fixes to the Cypress 11.0.0 regression are done where an error could show a migration workflow and hang for TypeScript projects.
Updating the Cypress has improved cy.session () and improved error experience. Such changes would no longer show any failure of the validation at the time when false is reverted from validating callback.
Cypress 11.2.0
In Cypress 10, the feature of “Run All Specs” was removed and later added in Cypress 11 for performing end-to-end testing with the purpose of running multiple tests sequentially in open mode.
It now gives visual warnings in the command Log on the failure of the cy.session(). It restores the session to cover issues of users with their setup and validation. This cy.session() no longer removes the page between setup and validation. Now, it will always clear the page at the culmination of the command at the time of test isolation.
Conclusion
The blog has presented detailed information on new changes made in Cypress 11. However, the latest update to Cypress is Cypress 12, which was launched on 8th December 2022. It is not that widely used now as Cypress 11 is considered to be the most stable version after Cypress 10. Most of the organizations have used Cypress 11 for an end to end testing due to the needed changes made.
Cypress 11 is bundled with long-awaited aspects, as many of us think that it is only a visual user interface change. However, it is not 100% true. Cypress 11 has made considerable changes to internal API, and such modifications are needed to support IFrame Support, Webkit support, and others. You can now make hassle-free migration to Cypress 11, which has laid the foundation for new interesting features in the coming days.
Considering the functional testing, the application should work across different browsers and platforms. It is highly recommended to test the application on real devices and browsers to ensure that the test is reliable. LambdaTest is a cloud-based automation testing platform for performing end-to-end testing as it provides online use of Cypress. Although it supports Cypress 10, it still provides a seamless experience on the end to end testing as it is easily integrated with CI/CD tools like Azure, CircleCI, and others. However, updating is suggested.
Top comments (0)