Cypress 10 was recently released with some long awaited features and bug fixes!
In this article, I will talk about some of the exciting features in the latest releases of 10.3.0, 10.2.0 and 10.1.0. Some of these features include component testing, changes to the Cypress configuration file, a new design for Cypress Onboarding UI Design, enabling Cypress natively for Apple silicon and Linux ARM64 and AArch64 systems, and adding live test data into the Cypress Dashboard!
🔗Critical features of Cypress 10
Cypress 10 release was announced on June 2022. This was a feature-packed release with many community-request features like component testing, TypeScript improvements, improved onboarding experience, improved error messages, Cypress configuration files, and more.
To learn more, check out ChangeLog for a detailed list.
Let’s start with component testing. Component testing is directly integrated into the main Cypress application.
Testing applications to achieve full coverage could be done using many approaches. Major web frameworks focus on breaking applications into components to create a complex functional component. Component testing allows you to test components independently in isolation, and focuses on the functionality of the particular component providing more focused coverage.
End-to-end testing focuses on testing the entire application to ensure the application runs as expected while unit testing breaks down the application into smaller individual units of functions, methods, or modules tested in isolation.
Unit testing provides little interaction between components and the application, which tends to make debugging difficult.
The new Cypress 10 component testing provides component interaction between other components and the entire application. This is rendered in a real browser providing access to dev tools, and making debugging a lot easier during tests.
To learn more about component testing, check out GitHub Issue #21111.
To learn more about Cypress 10 and other included features, you can check out the announcement blog.
🔗Cypress Config File
To provide a flexible and extensible configuration option for testing, Cypress 10 now supports multiple configuration file types, including TypeScript, CommonJS, or ESM Module configuration, and drop the
cypress.json configuration file. The Cypress configuration file can be
cypress.config.mjs file. 20643.
A configuration file is required in a project. Running
cypress open will walk you through to set up your Cypress project with specific testing options for your project. 20643.
🔗Cypress Onboarding UI Design
Project set up for Cypress 10 now takes you through a beautiful UI, built with Vue. Running
cypress open renders the on-boarding UI with specific instructions for your test configuration, and allows you to choose between end-to-end testing or component testing.
A minor version release of Cypress 10.2.0 was announced on Jun 21, 2022. This release focuses on machine compatibility for Apple and Linux distros.
Cypress is now available natively on Apple silicon. This means no extra system configuration with emulators, and approximately 2.5x faster testing environment on Apple devices including M1 and M2. 19908 20686
Cypress is now natively available on ARM64 and AArch64 systems running Linux 22252.
To learn more about the 10.2.0 release read Cypress 10.2.0: Run tests up to 2x faster on Apple silicon (M1)
A minor version release of Cypress 10.3.0 was announced on Jun 28, 2022. This version focuses on improving the cloud testing developer experience workflow.
Cypress added actionable test data in the Cypress Dashboard from the test runs. Cypress Dashboard is a service by Cypress to provide access to recorded test results when running Cypress tests from a CI provider, giving insight to the tests which helps with tracking and debugging.
With Cypress 10.3.0, test result data are directly retrieved and cached whenever possible to provide real-time metrics for test coverage. New columns include #21250:
Latest runs to monitor, run, and fix tests locally within CI workflows. Average duration to help quickly identify and take action to improve the performance. To learn more check out Cypress 10.3.0: Speed up testing workflows with improved visibility into your test results
What do you think of these new features and the latest release?
Make sure to read the ChangeLogs for a complete list of features in the releases including bug fixes. To start using the latest Cypress, run
npm install cypress@latest --save-dev from your browser.