Cypress is an automation tool to perform automation in web applications. Cypress comes with many features like time travel, dynamic wait, screenshot, video capture, direct interaction with the browser, etc. As the cypress versions got updated they also introduced many features as part of that version. One latest version in Cypress12.
In this blog, we will discuss the important features that cypress provides us in its 12th version.
Cypress version 12 features
The features of Cypress version 12 are
- Availability of cross-origin support
- Default test isolation
- Fix for detached DOM errors
Availability of cross-origin support
One of the biggest feature requests in Cypress history is cross-origin support that will allow us to visit another domain, drive the browser, and return to our application. Crossing origins is very common with sites that use third-party authentication.
Earlier, we had to use programmatic authentication in Cypress tests. Now with cross-origin support, we no longer need to work around our login flow.
Example
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!`);
});
In the above code, we are visiting an URL and clicking the sign-in button. This redirects to the authentication application and we enter the user name, and password and then click “Submit”, which will do the authentication. After completing authentication, it will come back to the original application and will execute commands in the application.
Due to how Cypress executes our 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 found this solution.
With Cypress version 12, we have session support closely tied with a cross-origin so that we 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 doesn’t need to go through the authentication flow.
Default test isolation
With Cypress12, end-to-end tests now set test isolation to true by default, which means we reset the cookies, storage, and 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 new test isolation behavior.
Cypress recommends that tests should not depend on the results from a previously run test, and enabling test isolation helps steer testers toward this best practice. However, some users have elected to rely on the behavior and will need to disable test isolation. Because of that, we can disable test isolation via global configuration.
Fix for detached DOM errors
A big change that came in Cypress12 is a fix for one of the oldest and most annoying issues with Cypress, the “Detached DOM” error. The DOM resolution logic is enhanced to requery new elements that might have replaced the older elements because of DOM updates. This leads to tests being more reliable and stable.
Cypress has a lot of commands and version 12 separates commands that change the application (like cy.click, cy.type, cy.task) from queries: the commands that do NOT change the application.
For example, the ‘cy.get’ command is a query, since it only inspects the DOM, and never changes it. Other common query commands are cy.contains, cy.find, cy.its, and cy.invoke. With such separation, Cypress12 changed the way it re-runs the command when an assertion fails: it re-runs the entire chain of queries attached to the assertion.
To make this concept clear, consider the scenario of a list of data showing in UI one after the other i.e. 1st element will show first then after some milliseconds show 2nd element then after some milliseconds show 3rd element as shown in the images below.
1st Image
2nd Image
3rd Image
In the first image only “Orange” is there. In the second image “Orange” and “Mango” are there and in the third image “Orange”, “Mango” and “Potatoes” are there. Here we can realize that the list has elements one after the other.
Consider we are giving a cypress assertion to check whether we have “Potatoes” in the list. The code for this is.
cy.get(‘#prices li’) // command
.should(‘have.length’, 3) // assertion
.last() // command
.should(‘contain’, ‘Potatoes’) // assertion
Before the implementation of Cypress12, this code will break and cause the script to fail. This is because the assertion for “Potatoes” happens before it gets loaded on the page.
But this issue is solved in v12 of Cypress. In v12, cypress will re-run the entire query again until we get the full elements shown in the list. So this makes the script identify the “Potatoes” in the list and will make the script pass. This feature is one of the top features by cypress v12.
Conclusion
To conclude, the features in cypress v12 are most useful for all automation QAs who are using cypress as their automation tool in their projects.
Need help? Perfomatix |Software Testing
We are Perfomatix, a top Software Testing company. We specialize in building highly scalable APIs and Mobile apps and we also have strong expertise in IoT apps, Virtual Reality apps, and Augmented Reality apps. Get in touch with us to find out how we can help in shaping your disruptive idea into a prototype, MVP and finally into a killer product.
Visit our success stories section to find out more about some of the startups which made it big with us.
