Hello, testing fam! Yes, we know it's only been a hot minute since Cypress 11 was released, but the team has been cranking hard and wanted to get the latest bits into your hands as soon as possible. So, without further ado, I'm happy to announce Cypress 12 is now available with some great features I'm sure you will love!
Cross-Origin is now Generally Available!
One of the biggest feature requests in Cypress history is now available for all to use! Earlier this year, we released experimental cross-origin support that will allow you to visit another domain, drive the browser, and return to your application.
Crossing origins is super common with sites that use third-party authentication, for example. Before, you would have to use programmatic authentication in Cypress tests, but this wasn't indicative of how a real person would use the app. Now with cross-origin support, you no longer need to work around your login flow:
it('user should be able to login', () => {
cy.visit('https://localhost:3000/');
// clicking sign in button redirects to 3rd party auth site
cy.get('#sign-in').click();
cy.origin('auth.securewebsite.com', () => {
cy.get('input[type="email"]').type('[email protected]');
cy.get('input[type="password"]').type('testpassword', { log: false });
// clicking submit does the auth and redirects back to main site
cy.get('input[type="submit"]').click();
});
// once done testing can continue
cy.contains(`Welcome Tester McTester!`);
});Due to how Cypress executes your tests in a browser, visiting another site was a huge technical hurdle due to cross-origin security limitations. The team put their thinking hats on and nailed this one. If you're curious about their journey, our own Bill Glesias wrote a technical deep dive on how they accomplished it. Check it out here.
With Cypress 12, we are also bringing our cy.session() support out of experimental and into general availability status. Session support can tie closely with cross-origin in that you can save a user session (storage, cookies, etc.) after authentication and restore it in a subsequent test. This cuts down on overall test suite execution time as each test won't need to go through the authentication flow.
Bringing these features out of experimental and into general availability means that the experimentalSessionAndOrigin config flag has been removed and is no longer needed to use them. We feel the features are complete and ready to use, and most of the known issues found during the experimental phase have been addressed. Thank you to everyone who tried out the feature and provided feedback. If you run into any problems, please let us know by filing an issue on GitHub.
Read more about how to use cy.origin() and cy.session() in your apps.
Test Isolation is Now Default
With Cypress 12, end-to-end tests 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.
We recommend that tests not rely on the results from a previously run test, and enabling test isolation helps steer testers towards this best practice. However, we know that some users have elected to rely on the behavior and will need to disable test isolation. Because of that, you can disable test isolation via global config and on a per-suite level. See the Cypress 12 migration guide on test isolation for more information.
The Fix for Dreaded Detached DOM Errors
A big change coming in Cypress 12 is a fix for one of the oldest and most annoying issues with Cypress, the “Detached DOM” error. The DOM resolution logic has been enhanced to requery new elements that might have replaced the older elements due to DOM updates. This will lead to tests being more reliable and stable.
Along with this change, we have better classified Cypress commands, breaking them into distinct sub-categories so you can better reason about their usage. Several commands have been labeled as Assertions, Queries, and Actions to indicate their purpose. With the updated terminology, we have some new guidance on how to best use the commands regarding chaining them together. Please read our updated Retry-ability guide for more info.
For plugin authors, we have a new API for creating custom queries that will help cut down on the complexities of creating new ways to query while taking advantage of our retry logic to avoid detached DOM errors.
Wrapping Up
Visit the changelog for a complete list of all the new stuff, and visit the Cypress 12 migration guide for more info on what changes you might need to make to upgrade.
Thanks for helping make 2022 one of the biggest years ever for Cypress. Join us next week (December 14th) for a webinar as we break down the year and all the great things that have come out. It will be a great discussion featuring members of the Cypress engineering, customer success, and developer experience teams. Register for the event here. In January, we look forward to another event where we will cover Cypress 12 more in-depth. Stay tuned for more details!
Until next time, happy testing!