Skip to content

docs: Breaking: Cypress 15.0.0 #6137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
2 changes: 1 addition & 1 deletion docs/app/component-testing/angular/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ sidebar_label: Overview

## Framework Support

Cypress Component Testing supports Angular 17.2.0+.
Cypress Component Testing supports Angular `^18.0.0` and `^19.0.0`.

## Tutorial

Expand Down
2 changes: 1 addition & 1 deletion docs/app/component-testing/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ following development servers and frameworks:
| [Next.js 14-15](/app/component-testing/react/overview#Nextjs) | React 18-19 | Webpack 5 |
| [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 3 | Vite 4-6 |
| [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack) | Vue 3 | Webpack 4-5 |
| [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 17-19 | Webpack 5 |
| [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 18-19 | Webpack 5 |
| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) <Badge type="info">Alpha</Badge> | Svelte 5 | Vite 4-6 |
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 5 | Webpack 4-5 |

Expand Down
4 changes: 2 additions & 2 deletions docs/app/get-started/install-cypress.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ Cypress supports running under these operating systems:

Cypress requires [Node.js](https://nodejs.org/) in order to install. We support the versions listed below:

- **Node.js** 18.x, 20.x, 22.x and above
- **Node.js** 20.x, 22.x, 24.x and above

Cypress generally aligns with
[Node's release schedule](https://github.com/nodejs/Release).
Expand Down Expand Up @@ -146,7 +146,7 @@ Cypress is [installed](#Install) using one of the following supported package ma

| Package Manager | Version | Installation instructions |
| ------------------------------------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------- |
| [npm](https://docs.npmjs.com/) | `8.6.0` and above | [Downloading and installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) |
| [npm](https://docs.npmjs.com/) | `10.1.0` and above | [Downloading and installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) |
| [Yarn 1 (Classic)](https://classic.yarnpkg.com/) | `1.22.22` and above | [Yarn 1 (Classic) Installation](https://classic.yarnpkg.com/en/docs/install) |
| [Yarn (Modern aka berry)](https://yarnpkg.com/) | `4.x` and above | [Yarn Installation](https://yarnpkg.com/getting-started/install) |
| [pnpm](https://pnpm.io/) | `8.x` and above | [pnpm Installation](https://pnpm.io/installation) |
Expand Down
4 changes: 4 additions & 0 deletions docs/app/references/changelog.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ sidebar_label: Changelog

# Changelog

## 15.0.0

_Released 7/01/2025 (PENDING)_

## 14.3.3

_Released 5/6/2025_
Expand Down
16 changes: 0 additions & 16 deletions docs/app/references/launching-browsers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -190,22 +190,6 @@ of our [docker images](/app/continuous-integration/overview#Cypress-Docker-Image
By default, we will launch Firefox headlessly during `cypress run`. To run
Firefox headed, you can pass the `--headed` argument to `cypress run`.

##### Webdriver BiDi and CDP Deprecation

:::info

Since Firefox 129, Chrome DevTools Protocol (CDP) has been [deprecated in Firefox](https://fxdx.dev/deprecating-cdp-support-in-firefox-embracing-the-future-with-webdriver-bidi/).
In Firefox 135 and above, Cypress defaults to automating the Firefox browser with WebDriver BiDi.
Cypress will no longer support CDP within Firefox in the future and is planned for removal in Cypress 15.

If CDP still needs to be used, you can force enablement via the `FORCE_FIREFOX_CDP=1` environment variable, regardless of Firefox version. For example:

```bash
FORCE_FIREFOX_CDP=1 npx cypress run --browser firefox
```

:::

### WebKit (Experimental)

Cypress has [experimental](/app/references/experiments) support for WebKit,
Expand Down
106 changes: 106 additions & 0 deletions docs/app/references/migration-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,112 @@ sidebar_label: 'Migration Guide'

# Migration Guide

## Migrating to Cypress 15.0

This guide details the code changes needed to migrate to Cypress
version 15.
[See the full changelog for version v15.0](/app/references/changelog#15-0-0).

### Node.js 20 and 22+ support

Cypress requires [Node.js](https://nodejs.org/en) in order to install the Cypress binary and the supported versions are now Node.js 20 and 22+.
Node.js versions 18 and 23 are no longer supported.
[See Node's release schedule](https://github.com/nodejs/Release).

### Webpack `4` is no longer supported

Cypress is no longer supporting Webpack `4` as it is no longer maintained by the core Webpack team and Webpack `5` has been available since Q4 2020. This includes Webpack `4` support for:

- `@cypress/webpack-dev-server` for component testing. This use case is most common and will require an update to Webpack `5`.
- `@cypress/webpack-dev-server` also no longer supports [Webpack Dev Server v4](https://github.com/webpack/webpack-dev-server/tree/v4.15.2). We shipped [Webpack Dev Server v5](https://github.com/webpack/webpack-dev-server/tree/v5.2.1) as the default in Cypress 14 with `webpack-dev-server@4` being an option.
- `@cypress/webpack-preprocessor` for end-to-end testing. Cypress, by default, uses the [Webpack Batteries Included Preprocessor](https://github.com/cypress-io/cypress/blob/@cypress/webpack-batteries-included-preprocessor-v3.0.7/npm/webpack-batteries-included-preprocessor/README.md) to process your files for end-to-end testing, which has used Webpack 5 since Cypress 13. Unless you are already using `@cypress/webpack-preprocessor` as a standalone package, this change likely does not apply.

#### To continue using Webpack `4`

##### Component Testing

If you haven't been able to migrate away from Webpack `4` or Webpack Dev Server `4` and still need to be able to run your component tests with Webpack `4` or Webpack Dev Server `4`, you can install the following packages independently:

```sh
npm install --save-dev @cypress/webpack-dev-server@4
```

and configure the dev server within your `cypress.config.js` or `cypress.config.ts` file:

```js
import { devServer } from '@cypress/webpack-dev-server'
import { defineConfig } from 'cypress'

export default defineConfig({
component: {
devServer(devServerConfig) {
return devServer({
...devServerConfig,
framework: 'react',
webpackConfig: require('./webpack.config.js'),
})
},
},
})
```

Note that this package version is deprecated and no longer supported by Cypress and is intended as a workaround until you can migrate to Webpack `5`. More information on how to configure the dev server can be found in the [Cypress Webpack Dev Server documentation](https://github.com/cypress-io/cypress/blob/@cypress/webpack-dev-server-v4.0.2/npm/webpack-dev-server/README.md) and [Custom Dev Server documentation](/app/component-testing/component-framework-configuration#Custom-Dev-Server).

##### End-to-End Testing

If you haven't been able to migrate away from Webpack `4`, need custom end-to-end spec file preprocessing, are already using `@cypress/webpack-preprocessor` as a standalone package, and still need to be able to run your end-to-end tests with Webpack `4`, you can install the following package independently:

```sh
npm install --save-dev @cypress/webpack-preprocessor@6
```

and configure the preprocessor within your `cypress.config.js` or `cypress.config.ts` file:

```js
import { defineConfig } from 'cypress'
import webpackPreprocessor from '@cypress/webpack-preprocessor'

export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('file:preprocessor', webpackPreprocessor())
},
},
})
```

As stated earlier, this is likely unnecessary unless you are already using `@cypress/webpack-preprocessor` as a standalone package. Cypress by default uses the [Webpack Batteries Included Preprocessor](https://github.com/cypress-io/cypress/blob/@cypress/webpack-batteries-included-preprocessor-v3.0.7/npm/webpack-batteries-included-preprocessor/README.md) to process your spec files for end-to-end testing.

Note that this package version is deprecated and no longer supported by Cypress and is intended as a workaround until you can migrate to Webpack `5`. More information on how to configure the preprocessor can be found in the [Preprocessors API documentation](/api/node-events/preprocessors-api#Usage) and [Webpack Preprocessor documentation](https://github.com/cypress-io/cypress/blob/@cypress/webpack-preprocessor-v6.0.4/npm/webpack-preprocessor/README.md).

### Angular `17` CT no longer supported

With [LTS ending](https://angular.dev/reference/releases#actively-supported-versions) for Angular 17, the minimum required Angular version for component testing is now `18.0.0`.

#### To continue using Angular below 18.0.0

If you haven't been able to migrate away from an older Angular version and still need that test harness, it can be installed independently via the [`@cypress/angular`](https://www.npmjs.com/package/@cypress/angular) `3.x.x` package from `npm`.

Note that this test harness version is deprecated and no longer supported by Cypress. This version is intended to serve as a temporary workaround to migrate your project to Angular v18.0.0+.

```sh
npm install --save-dev @cypress/angular@3
```

Inside your support file (ex: `./cypress/support/component.(js|ts)`), or wherever your mount function is imported, make the following update to add `@`.

<Badge type="danger">Before</Badge>{' '}

```ts
import { mount } from `cypress/angular`
```

<Badge type="success">After</Badge>

```ts
import { mount } from `@cypress/angular`
```

## Migrating to Cypress 14.0

This guide details the code changes needed to migrate to Cypress
Expand Down
37 changes: 12 additions & 25 deletions docs/app/tooling/typescript-support.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ tests in TypeScript.

### Install TypeScript

To use TypeScript with Cypress, you will need TypeScript 4.0+. If you do not
To use TypeScript with Cypress, you will need TypeScript 5.0+. If you do not
already have TypeScript installed as a part of your framework, you will need to
install it:

Expand Down Expand Up @@ -61,8 +61,8 @@ with the following configuration:
```json title="tsconfig.json"
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"target": "es6",
"lib": ["es6", "dom"],
"sourceMap": true,
"types": ["cypress", "node"]
},
Expand Down Expand Up @@ -94,23 +94,9 @@ If that does not work, try restarting the IDE.

### Processing your Cypress configuration and plugins

Cypress needs to be able to transpile your Cypress configuration and plugins written in TypeScript in order to make them executable within Cypress's Node.js runtime. To do this, Cypress will attempt to read the user's TypeScript and project configuration to apply the correct TypeScript loader to Cypress's Node.js runtime.
Under the hood, Cypress uses [tsx](https://tsx.is/) to parse and run the `cypress.config.ts` file.

If your project is an `ESM` package (short for [ECMAScript Module](https://nodejs.org/api/esm.html#modules-ecmascript-modules)), Cypress attempts to apply the [ts-node/esm](https://github.com/TypeStrong/ts-node?tab=readme-ov-file#esm) Node.js loader to resolve the Cypress configuration and plugins. `ESM` is determined by Cypress if you have the `type: "module"` key-value pair present inside your project's `package.json`.

Otherwise, regular [ts-node](https://github.com/TypeStrong/ts-node?tab=readme-ov-file#node-flags-and-other-tools) is required into Cypress's Node.js runtime.
Since Node.js by itself can only interpret CommonJS files, Cypress attempts to make your TypeScript configuration compatible with Cypress' Node.js runtime.
To do this, Cypress overrides the following configuration values found inside your project's `tsconfig.json`:

```json
{
"module": "commonjs",
"moduleResolution": "node",
"preserveValueImports": false
}
```

This does not have an impact on your project or its TypeScript configuration settings. This override only happens within the context of the Cypress runtime.
This allows Cypress to run your TypeScript configuration inside the Cypress runtime without being bound to limitations of Node or other loaders.

## Extending TypeScript Support

Expand Down Expand Up @@ -380,12 +366,13 @@ root `tsconfig.json` file.

## History

| Version | Changes |
| ------------------------------------------ | ------------------------------------------------------------------------------------------ |
| [13.0.0](/app/references/changelog#13-0-0) | Raised minimum required TypeScript version from 3.4+ to 4.0+ |
| [10.0.0](/app/references/changelog#10-0-0) | Update guide to cover TypeScript setup for component testing |
| [5.0.0](/app/references/changelog#5-0-0) | Raised minimum required TypeScript version from 2.9+ to 3.4+ |
| [4.4.0](/app/references/changelog#4-4-0) | Added support for TypeScript without needing your own transpilation through preprocessors. |
| Version | Changes |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| [15.0.0](/app/references/changelog#15-0-0) | Raised minimum required TypeScript version from 4.0+ to 5.0+ and replaced `ts-node` with `tsx` to parse and run the `cypress.config.ts` file. |
| [13.0.0](/app/references/changelog#13-0-0) | Raised minimum required TypeScript version from 3.4+ to 4.0+ |
| [10.0.0](/app/references/changelog#10-0-0) | Update guide to cover TypeScript setup for component testing |
| [5.0.0](/app/references/changelog#5-0-0) | Raised minimum required TypeScript version from 2.9+ to 3.4+ |
| [4.4.0](/app/references/changelog#4-4-0) | Added support for TypeScript without needing your own transpilation through preprocessors. |

## See also

Expand Down