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.
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.
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.
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.
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
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.
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:
and most importantly, migrate your
cypress.json to a
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.
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.