Skip to content

Key Features of Cypress 10

Cypress is a test automation tool for end-to-end testing, UI testing, regression suites, Component testing (new for Cypress 10), integration, and unit testing. Cypress 10 was released on June 1st 2022, with exciting new features and capabilities. In this article, I will highlight some of the key features.

Component Testing

It is exciting that we finally get to see Component testing in this release. Although it is still in beta status, we can still go ahead and use this feature.

With Cypress 10 component testing, developers can test front-end components of web applications using the same Cypress end-to-end testing API. Applications are most times broken into smaller units as components like a button, with Component testing developers will be able to test the component independently.

To start using Cypress component testing, install Cypress in your application:

npm install –save-dev cypress

Edit package.json file, and add “cypress”: “cypress”

Then, run npm and Cypress open.

Screenshot 2022-06-14 2.32.18 PM

You should see “Not Configured”. Let's go ahead and configure it. Click on Component Testing, and follow the instructions. After clicking through, it will generate a file cypress.config.js or cypress.config.ts.

The file should look like this:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  component: {
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
    },
  },
});

The above example is for create-react-app. For other frameworks, check out the Cypress page.

To learn more about Cypress Component Testing, Check GitHub Issue #21111.

Cypress Config File

If you are familiar with Cypress, you may know that using the cypress.json configuration file is no longer the supported config file formats are cypress.config.js, cypress.config.ts, cypress.config.cjs, or cypress.config.mjs. A default configuration file will no longer be auto-generated with Cypress. To get a configuration file, run npm run cypress open. This will open up an interactive application in the browser that will walk you through the configuration for End-to-End or Component testing.

https://github.com/cypress-io/cypress/pull/20643

Configuration Options

Cypress 10 has specified configuration options for either End-to-End or Component Testing #20667. This will be auto-set for you when you run npm run cypress open or you could check out the recommended configuration.

To learn more about Cypress 10 and other included features, you can check out the announcement blog.


This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.

We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.

You might also like

Javascript

Getting Started with RxJS

Javascript

Testing Web Components with Cypress and TypeScript

Javascript

Web Components Integration using LitElement and TypeScript

Javascript

Navigation Lifecycle using Vaadin Router, LitElement and TypeScript