Just a few hours ago Cypress officially debuted their biggest release ever. Cypress version 10 has some powerful new features, headlined by new component testing functionality and a completely redesigned UI. There’s a lot to unpack, so let’s take a look together.
Component Testing
While component testing was present in previous versions of Cypress as an experimental feature, with Cypress 10 it is getting much more of a spotlight. This will make a lot of developers happy. Being able to render components in a real browser, debug them using Chrome DevTools and access different states is a real game changer.
With this feature Cypress is entering into a competition with tools like Jest or Storybook, which are very popular with developers.
The best part about this is that instead of testing your components with the terminal (where you can’t really see them) you are testing your components inside a browser. You can interact with them too, which adds up to an amazing developer experience.
The main difference between end-to-end testing and component testing is that instead of using cy.visit() to open your application, you use cy.mount() to render out your React, Vue, Angular or other component and test it in isolation.
If you are just getting started with component testing, Cypress has got you covered. They have included a really nice setup wizard to help you setup your project for component testing. This will help you install the dependencies you’ll need and set up your cypres.config.js configuration file for you.
Project Structure
With previous versions, you might have been used to seeing these items in every Cypress project:
This is no longer the case for Cypress 10. Your configuration will now be stored in cypress.config.js instead of the cypress.json file. This is a pretty familiar pattern used with different web development tools.
Your plugins/index.js file is now part of this file as well. With this function you can tap into different node events that happen during a Cypress test run (like auto-opening dev tools when browser opens, or dynamically resolving configuration) or trigger node scripts right from your test.
Naming Conventions
With component testing brought into the game, developers and testers need to distinguish between different types of tests and be able to keep the whole project clean and easy to navigate. That’s why Cypress now recommends naming your end-to-end tests as test.cy.js and your component tests as test.spec.js. This is of course just a recommendation, and you can specify any pattern using specPattern option in the cypress.config.js file.
Besides this naming convention, the oddly named integration folder where the test files are will now become the e2e folder. support/index.js will now become support/e2e.js. Of course, all of these can be configured in the cypress.config.js file and there’s no need to follow these conventions if your project uses another.
Migration Assistant
Feeling overwhelmed by all the changes? No need to be! The Cypress team has prepared a migration assistant that will make sure the transition of your project is seamless. In three easy steps you can change the names and folder of your e2e tests:
rename the support/index.js file:
and most importantly, migrate your cypress.json to a cypress.config.js file.
Deprecations
With the new version, Cypress users will say goodbye to some of the features that were not widely used. Most notably, Cypress’ test recorder called Cypress Studio will no longer be present in v10. This was communicated in a recent blogpost in Cypress which communicates some of the reasoning behind the decision. There’s also an open discussion for those who might miss this feature.
If you still need a record and replay tool for your Cypress testing, you can use the brand new functionality of DevTools Recorder. Since v100 it can generate Cypress code that you can import in your tests. We took a look at this with Mike Cataldo in our recent podcast. For more about it you can also check out this post to learn how to get started with the DevTools Recorder, or this webinar on automating tests using DevTools Recorder with Google’s Jecelyn Yeen.
Cypress is also pushing towards using cy.session(), which is a great command for caching your browser state and avoiding having to log in before every test. This solution will soon become the preferred way of handling cookies, local storage and session storage, making APIs like Cypress.Cookies() obsolete. This deprecation was in fact announced in version 9.7.0. The good news is that using cy.session() pairs greatly with Cypress’ recently released 3rd party domain support. To avoid doing 3rd party login multiple times, you can cache it with cy.session() and limit the number of login actions that could otherwise cause rate-limiting.
Going Forward
Cypress 10 was a version long in the making. While there are many changes that might feel like just visual changes there’s more to this update than meets the eye. The Cypress team has also made many changes “under the hood” which prepare ground for some long awaited features such as native iframe support, or WebKit support. While working with iframes is possible now, it requires some workarounds and does not provide the same debugging features as rest you’ll get for the rest of your site. With WebKit support, you’ll be able to test against a Safari-like browser, which is widely used, especially with Apple users. Since Cypress is open source, you can check out the progress on these features on their roadmap, where you can find links to the open issues.
Learn More and Get Started with Cypress 10
If you are interested in exploring what’s new with the latest versions of Cypress, join me live on YouTube, where Mike Cataldo and I will discuss the updates and explore what’s new in Cypress 10 together. We start the stream on June 1st, but you can check out the recording after the stream ends as well.
You can download the latest version of Cypress directly from their website or by running npm install cypress in your terminal, starting today. Of course, if you’re using Applitools for visual testing, it’s compatible with all versions of Cypress, including v10. Learn more about how to get started with Cypress and Applitools, or if you’re new to Applitools you can sign up for a free account today.
