diff --git a/docs/api/cypress-api/element-selector-api.mdx b/docs/api/cypress-api/element-selector-api.mdx
new file mode 100644
index 0000000000..c07aa88076
--- /dev/null
+++ b/docs/api/cypress-api/element-selector-api.mdx
@@ -0,0 +1,101 @@
+---
+title: 'Cypress.ElementSelector | Cypress Documentation'
+description: 'The Element Selector exposes APIs that enable you to change the default selector strategy and override the selectors that are returned per element.'
+sidebar_label: ElementSelector
+sidebar_position: 105
+---
+
+
+
+# Cypress.ElementSelector
+
+The Element Selector API is used to get the selector priority for selecting elements in [Cypress Studio](/app/guides/cypress-studio) and [Selector Playground](/app/core-concepts/open-mode#Selector-Playground).
+
+## Syntax
+
+```javascript
+Cypress.ElementSelector.defaults(options)
+Cypress.ElementSelector.getSelector($el)
+```
+
+### Arguments
+
+ **options _(Object)_**
+
+An object containing any or all of the following options:
+
+| Option | Accepts | Description |
+| ------------------ | ------------------ | -------------------------------------------------------------------------------- |
+| `selectorPriority` | `Array of strings` | Determines the order of preference for which selector is chosen for the element. |
+
+`selectorPriority` accepts the following strings:
+
+- `attribute:${string}`
+- `attributes`
+- `class`
+- `data-${string}`
+- `id`
+- `name`
+- `nth-child`
+- `tag`
+
+
+
+ **$el _(Object)_**
+
+The [jQuery element](http://api.jquery.com/Types/#jQuery) that you want to get
+the selector value for.
+
+## Examples
+
+### Selector Priority
+
+Set the selector priority to favor role, then aria-label, then name, then classes, then attributes.
+
+```javascript
+Cypress.ElementSelector.defaults({
+ selectorPriority: [
+ 'attribute:role',
+ 'attribute:aria-label',
+ 'name',
+ 'class',
+ 'attributes',
+ ],
+})
+```
+
+### Get Selector
+
+Returns you the selector value for a given element as determined by the selector
+strategy. This is useful for debugging custom selector priorities you have set.
+
+For example, consider this HTML fragment:
+
+```html
+
+```
+
+With the default selector strategy, the selector value will be `'#bingo'`
+because IDs have priority over classes.
+
+```js
+const $el = Cypress.$('button')
+const selector = Cypress.ElementSelector.getSelector($el) // '#bingo'
+```
+
+With a custom selector strategy that favours classes, the selector value will be
+`'.number3'`.
+
+```js
+Cypress.ElementSelector.defaults({
+ selectorPriority: ['class', 'id'],
+})
+
+const $el = Cypress.$('button')
+const selector = Cypress.ElementSelector.getSelector($el) // '.number3'
+```
+
+## See also
+
+- [Cypress Studio](/app/guides/cypress-studio)
+- [Selector Playground](/app/core-concepts/open-mode#Selector-Playground)
diff --git a/docs/api/cypress-api/selector-playground-api.mdx b/docs/api/cypress-api/selector-playground-api.mdx
deleted file mode 100644
index b2b700a060..0000000000
--- a/docs/api/cypress-api/selector-playground-api.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: 'Cypress.SelectorPlayground | Cypress Documentation'
-description: 'The Selector Playground exposes APIs that enable you to change the default selector strategy and override the selectors that are returned per element.'
-sidebar_label: SelectorPlayground
----
-
-
-
-# Cypress.SelectorPlayground
-
-The [Selector Playground](/app/core-concepts/open-mode#Selector-Playground)
-exposes APIs that enable you to:
-
-- Change the default selector strategy
-- Override the selectors that are returned per element
-
-## Syntax
-
-```javascript
-Cypress.SelectorPlayground.defaults(options)
-Cypress.SelectorPlayground.getSelector($el)
-```
-
-### Arguments
-
- **options _(Object)_**
-
-An object containing any or all of the following options:
-
-| Option | Accepts | Description |
-| ------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `selectorPriority` | `Array of strings` | Determines the order of preference for which selector is chosen for the element. |
-| `onElement` | `function` | A function called with the element that should return a unique selector string for the element. If a falsey value is returned, the default selector function is used. |
-
-
-
- **$el _(Object)_**
-
-The [jQuery element](http://api.jquery.com/Types/#jQuery) that you want to get
-the selector value for.
-
-## Examples
-
-### Selector Priority
-
-Set the selector priority to favor IDs, then classes, then attributes.
-
-```javascript
-Cypress.SelectorPlayground.defaults({
- selectorPriority: ['id', 'class', 'attributes'],
-})
-```
-
-### onElement Callback
-
-Set a custom function for determining the selector for an element. Falls back to
-default behavior if returning a falsey value.
-
-```javascript
-Cypress.SelectorPlayground.defaults({
- onElement: ($el) => {
- const customId = $el.attr('my-custom-attr')
-
- if (customId) {
- return `[my-custom-attr=${customId}]`
- }
- },
-})
-```
-
-### Get Selector
-
-Returns you the selector value for a given element as determined by the selector
-strategy.
-
-For example, consider this HTML fragment.
-
-```html
-
-```
-
-With the default selector strategy, the selector value will be `'#bingo'`
-because IDs have priority over classes.
-
-```js
-const $el = Cypress.$('button')
-const selector = Cypress.SelectorPlayground.getSelector($el) // '#bingo'
-```
-
-With a custom selector strategy that favours classes, the selector value will be
-`'.number3'`.
-
-```js
-Cypress.SelectorPlayground.defaults({
- selectorPriority: ['class', 'id'],
-})
-
-const $el = Cypress.$('button')
-const selector = Cypress.SelectorPlayground.getSelector($el) // '.number3'
-```
diff --git a/docs/api/table-of-contents.mdx b/docs/api/table-of-contents.mdx
index 01c2a7f43f..3eb8becefb 100644
--- a/docs/api/table-of-contents.mdx
+++ b/docs/api/table-of-contents.mdx
@@ -190,29 +190,29 @@ The _key_ difference between Cypress APIs and Cypress commands is that Cypress
APIs execute the moment they are invoked and are **not** enqueued to run at a
later time.
-| Property | Usage |
-| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
-| [`Cypress.arch`](/api/cypress-api/arch) | CPU architecture name of the underlying OS, as returned from Node's `os.arch()`. |
-| [`Cypress.browser`](/api/cypress-api/browser) | Information about the current browser, such as browser family and version. |
-| [`Cypress.Commands`](/api/cypress-api/custom-commands) | Create new custom commands and extend or override existing ones. |
-| [`Cypress.config()`](/api/cypress-api/config) | Get and set Cypress configuration from inside your tests. |
-| [`Cypress.Cookies.debug()`](/api/cypress-api/cookies) | Generate console logs whenever a cookie is modified. |
-| [`Cypress.currentRetry`](/api/cypress-api/currentretry) | A number representing the current test retry count. |
-| [`Cypress.currentTest`](/api/cypress-api/currenttest) | An object with information about the currently executing test. |
-| [`Cypress.log`](/api/cypress-api/cypress-log) | This is the internal API for controlling what gets printed to the Command Log. Useful when writing your own custom commands. |
-| [`Cypress.dom`](/api/cypress-api/dom) | A collection of DOM related helper methods. |
-| [`Cypress.env`](/api/cypress-api/env) | Get environment variables from inside your tests. |
-| [`Cypress.isBrowser()`](/api/cypress-api/isbrowser) | Checks if the current browser matches the given name or filter. |
-| [`Cypress.isCy()`](/api/cypress-api/iscy) | checks if a variable is a valid instance of cy or a cy chainable. |
-| [`Cypress.Keyboard.defaults()`](/api/cypress-api/keyboard-api) | Set default values for how the `.type()` command is executed. |
-| [`Cypress.platform`](/api/cypress-api/platform) | The underlaying OS name, as returned by Node's `os.platform()`. |
-| [`Cypress.require`](/api/cypress-api/require) | Enables utilizing dependencies within the [cy.origin()](/api/commands/origin) callback function. |
-| [`Cypress.Screenshot.defaults()`](/api/cypress-api/screenshot-api) | Set defaults for screenshots captured by the `.screenshot()` command and the automatic screenshots taken during test failures. |
-| [`Cypress.SelectorPlayground`](/api/cypress-api/selector-playground-api) | Configure options used by the [Selector Playground](/app/core-concepts/open-mode#Selector-Playground). |
-| [`Cypress.session`](/api/cypress-api/session) | A collection of helper methods related to the `.session()` command. |
-| [`Cypress.spec`](/api/cypress-api/spec) | An object with information about the currently executing spec file. |
-| [`Cypress.testingType`](/api/cypress-api/testing-type) | The current testing type, eg. `"e2e"` or `"component". |
-| [`Cypress.version`](/api/cypress-api/version) | The current Cypress version. |
+| Property | Usage |
+| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`Cypress.arch`](/api/cypress-api/arch) | CPU architecture name of the underlying OS, as returned from Node's `os.arch()`. |
+| [`Cypress.browser`](/api/cypress-api/browser) | Information about the current browser, such as browser family and version. |
+| [`Cypress.Commands`](/api/cypress-api/custom-commands) | Create new custom commands and extend or override existing ones. |
+| [`Cypress.config()`](/api/cypress-api/config) | Get and set Cypress configuration from inside your tests. |
+| [`Cypress.Cookies.debug()`](/api/cypress-api/cookies) | Generate console logs whenever a cookie is modified. |
+| [`Cypress.currentRetry`](/api/cypress-api/currentretry) | A number representing the current test retry count. |
+| [`Cypress.currentTest`](/api/cypress-api/currenttest) | An object with information about the currently executing test. |
+| [`Cypress.log`](/api/cypress-api/cypress-log) | This is the internal API for controlling what gets printed to the Command Log. Useful when writing your own custom commands. |
+| [`Cypress.dom`](/api/cypress-api/dom) | A collection of DOM related helper methods. |
+| [`Cypress.ElementSelector`](/api/cypress-api/element-selector-api) | Configure selector priority used by [Cypress Studio](/app/guides/cypress-studio) and [Selector Playground](/app/core-concepts/open-mode#Selector-Playground). |
+| [`Cypress.env`](/api/cypress-api/env) | Get environment variables from inside your tests. |
+| [`Cypress.isBrowser()`](/api/cypress-api/isbrowser) | Checks if the current browser matches the given name or filter. |
+| [`Cypress.isCy()`](/api/cypress-api/iscy) | checks if a variable is a valid instance of cy or a cy chainable. |
+| [`Cypress.Keyboard.defaults()`](/api/cypress-api/keyboard-api) | Set default values for how the `.type()` command is executed. |
+| [`Cypress.platform`](/api/cypress-api/platform) | The underlaying OS name, as returned by Node's `os.platform()`. |
+| [`Cypress.require`](/api/cypress-api/require) | Enables utilizing dependencies within the [cy.origin()](/api/commands/origin) callback function. |
+| [`Cypress.Screenshot.defaults()`](/api/cypress-api/screenshot-api) | Set defaults for screenshots captured by the `.screenshot()` command and the automatic screenshots taken during test failures. |
+| [`Cypress.session`](/api/cypress-api/session) | A collection of helper methods related to the `.session()` command. |
+| [`Cypress.spec`](/api/cypress-api/spec) | An object with information about the currently executing spec file. |
+| [`Cypress.testingType`](/api/cypress-api/testing-type) | The current testing type, eg. `"e2e"` or `"component". |
+| [`Cypress.version`](/api/cypress-api/version) | The current Cypress version. |
## Utilities
diff --git a/docs/app/component-testing/angular/overview.mdx b/docs/app/component-testing/angular/overview.mdx
index 29d0bb6a48..6c8761cd90 100644
--- a/docs/app/component-testing/angular/overview.mdx
+++ b/docs/app/component-testing/angular/overview.mdx
@@ -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
diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx
index 143d9bc5e3..6d67320cf6 100644
--- a/docs/app/component-testing/get-started.mdx
+++ b/docs/app/component-testing/get-started.mdx
@@ -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) Alpha | Svelte 5 | Vite 4-6 |
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) Alpha | Svelte 5 | Webpack 4-5 |
diff --git a/docs/app/core-concepts/open-mode.mdx b/docs/app/core-concepts/open-mode.mdx
index ea937ea614..b206e22705 100644
--- a/docs/app/core-concepts/open-mode.mdx
+++ b/docs/app/core-concepts/open-mode.mdx
@@ -559,19 +559,16 @@ interactions.
title="Selector Playground demo"
/>
-### Uniqueness
+### How are selectors determined?
-Cypress will automatically calculate a **unique selector** to use targeted
+Cypress will automatically calculate a **unique selector** to use for a targeted
element by running through a series of selector strategies.
-:::info
-
-Cypress allows you to control how a selector is determined. Use the [Cypress.SelectorPlayground](/api/cypress-api/selector-playground-api)
-API to control the selectors you want returned.
-
-:::
+Cypress allows you to control how a selector is determined. Use the
+[`Cypress.ElementSelector`](/api/cypress-api/element-selector-api) API to control
+the selectors you want prioritized.
### Best practices
diff --git a/docs/app/get-started/install-cypress.mdx b/docs/app/get-started/install-cypress.mdx
index a6f8472eec..f0142440e8 100644
--- a/docs/app/get-started/install-cypress.mdx
+++ b/docs/app/get-started/install-cypress.mdx
@@ -116,7 +116,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).
@@ -149,7 +149,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) |
diff --git a/docs/app/guides/cypress-studio.mdx b/docs/app/guides/cypress-studio.mdx
index 2966a3512f..f3fd044b8b 100644
--- a/docs/app/guides/cypress-studio.mdx
+++ b/docs/app/guides/cypress-studio.mdx
@@ -13,11 +13,18 @@ e2eSpecific: true
##### What you'll learn
-- How to use Cypress Studio by recording interactions and generate tests
-- How to add new tests and extend existing tests with Cypress Studio
+- How to generate Cypress tests by interacting with your app
+- How to add assertions through the browser UI
+- How to extend or edit tests using Cypress Studio
:::
+## Overview
+
+Cypress Studio makes test creation faster and easier. With Studio, you can record user interactions in the browser and instantly generate Cypress test code. Add assertions with a rightclick and fine-tune your tests inline.
+
+It is ideal for bootstrapping new tests or extending existing ones without writing every `.get()`, `.click()`, or `.type()` command by hand.
+
:::caution
**Experimental**
@@ -40,303 +47,57 @@ attribute to your Cypress configuration.
:::
-## Limitations
-
-- Cypress Studio is currently only available for writing E2E tests, and doesn't
- yet work with Component Testing.
-- Cypress Studio does not support writing tests that use domains of [multiple
- origins](/app/guides/cross-origin-testing).
-- Cypress Studio can not interact with elements within a ShadowDom directly, though it can still run tests that do.
-
-## Overview
-
-Cypress Studio provides a visual way to generate tests within Cypress, by
-_recording interactions_ against the application under test.
-
-The [`.click()`](/api/commands/click), [`.type()`](/api/commands/type),
-[`.check()`](/api/commands/check), [`.uncheck()`](/api/commands/uncheck), and
-[`.select()`](/api/commands/select) Cypress commands are supported and will
-generate test code when interacting with the DOM inside of the Cypress Studio.
-
-You can also generate assertions by right clicking on an element that you would
-like to assert on.
-
-The Cypress
-[Real World App (RWA)](https://github.com/cypress-io/cypress-realworld-app) is
-an open source project implementing a payment application to demonstrate
-real-world usage of Cypress testing methods, patterns, and workflows. It will be
-used to demonstrate the functionality of Cypress Studio below.
-
-### Extending a Test
-
-You can extend any preexisting test or start by creating a new test with the
-following test scaffolding.
-
-:::info
-
-Clone the and refer to
-the
-[cypress/tests/demo/cypress-studio.cy.ts](https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/demo/cypress-studio.spec.ts)
-file.
-
-:::
-
-```js
-// Code from Real World App (RWA)
-describe('Cypress Studio Demo', () => {
- beforeEach(() => {
- // Seed database with test data
- cy.task('db:seed')
-
- // Login test user
- cy.database('find', 'users').then((user) => {
- cy.login(user.username, 's3cret', true)
- })
- })
-
- it('create new transaction', () => {
- // Extend test with Cypress Studio
- })
-})
-```
-
-#### Step 1 - Run the spec
-
-We'll use Cypress Studio to perform a "New Transaction" user journey. First,
-launch Cypress and select **End To End testing**, then choose a browser to run specs
-in.
-
-Once the browser is open, run the spec created in the previous step.
-
-
-
-#### Step 2 - Launch Cypress Studio
-
-Once the tests complete their run, hover over a test in the [Command Log](/app/core-concepts/open-mode#Command-Log) to
-reveal an **Add Commands to Test** button.
-
-Clicking on **Add Commands to Test** will launch the Cypress Studio.
-
-:::info
-
-Cypress will automatically execute all hooks and currently present test code,
-and then the test can be extended from that point on (e.g. We are logged into
-the application inside the `beforeEach` block).
-
-:::
-
-
-
-Next, Cypress will execute the test in isolation and pause after the last
-command in the test.
-
-Now, we can begin updating the test to create a new transaction between users.
-
-
-
-#### Step 3 - Interact with the Application
-
-To record actions, begin interacting with the application. Here we will click on
-the **New** button on the right side of the header and as a result we will see our
-click recorded in the Command Log.
+## How Cypress Studio works
-
+When Studio is enabled, you can:
-Next, we can start typing in the name of a user that we want to pay.
+- Generate test steps by interacting with your app in the Cypress browser
+- Add assertions by right-clicking DOM elements
+- Save or edit tests without leaving Cypress
-
+Supported action commands include: [`.click()`](/api/commands/click), [`.type()`](/api/commands/type), [`.check()`](/api/commands/check), [`.uncheck()`](/api/commands/uncheck), [`.select()`](/api/commands/select)
-Once we see the name come up in the results, we want to add an assertion to
-ensure that our search function works correctly. **Right click** on the user's
-name to bring up a menu from which we can add an assertion to check that the
-element contains the correct text (the user's name).
+Click the Studio panel button in the top right of the Cypress browser to open the Studio panel. You can also open the Studio panel by clicking **Edit in Studio** or **New test** in the Command Log.
-
+
-We can then click on that user in order to progress to the next screen. We'll
-complete the transaction form by clicking on and typing in the amount and
-description inputs.
+## Recording new tests
-
+You can record a new test with Cypress Studio inside any describe or context block.
-Now it's time to complete the transaction. You might have noticed that the "Pay"
-button was disabled before we typed into the inputs. To make sure that our form
-validation works properly, let's add an assertion to make sure the "Pay" button
-is enabled.
+1. Click **New Test** under the desired block
+2. Add a name for the test
+3. Enter the URL of the page you want to test (if not on the current page)
+4. Interact with your app (click, type, select elements)
+5. Right-click elements to add assertions
+6. Click **Save** to save the changes to your spec file
-
+## Extending existing tests
-Finally, we will click the "Pay" button and get presented with a confirmation
-page of our new transaction.
+You can also extend and update existing tests using Cypress Studio.
-
+1. Run the spec in Cypress
+2. Hover over the test in the Command Log
+3. Click **Edit in Studio** to open Cypress Studio
+4. Interact with your app to record actions
+5. Right-click to add assertions
+6. Click **Save** to save the changes to your spec file
-To discard the interactions, click the **Cancel** button to exit Cypress Studio.
-If satisfied with the interactions with the application, click **Save Commands**
-and the test code will be saved to your spec file. Alternatively you can choose
-the **copy** button in order to copy the generated commands to your clipboard.
+### How are selectors determined?
-#### Generated Test Code
+Cypress will automatically calculate a **unique selector** to use for a targeted
+element by running through a series of selector strategies.
-Viewing our test code, we can see that the test is updated after clicking **Save
-Commands** with the actions we recorded in Cypress Studio.
+
-```js
-// Code from Real World App (RWA)
-describe('Cypress Studio Demo', () => {
- beforeEach(() => {
- // Seed database with test data
- cy.task('db:seed')
-
- // Login test user
- cy.database('find', 'users').then((user) => {
- cy.login(user.username, 's3cret', true)
- })
- })
-
- it('create new transaction', () => {
- /* ==== Generated with Cypress Studio ==== */
- cy.get('[data-test=nav-top-new-transaction]').click()
- cy.get('[data-test=user-list-search-input]').clear()
- cy.get('[data-test=user-list-search-input]').type('dev')
- cy.get(
- '[data-test=user-list-item-tsHF6_D5oQ] > .MuiListItemText-root > .MuiListItemText-primary'
- ).should('have.text', 'Devon Becker')
- cy.get('[data-test=user-list-item-tsHF6_D5oQ]').click()
- cy.get('#amount').clear()
- cy.get('#amount').type('$25')
- cy.get('#transaction-create-description-input').clear()
- cy.get('#transaction-create-description-input').type('Sushi dinner')
- cy.get('[data-test=transaction-create-submit-payment]').should('be.enabled')
- cy.get('[data-test=transaction-create-submit-payment]').click()
- /* ==== End Cypress Studio ==== */
- })
-})
-```
-
-The selectors are generated according to the
-[`Cypress.SelectorPlayground` selector priority](/api/cypress-api/selector-playground-api#Default-Selector-Priority).
-
-### Adding a New Test
-
-You can add a new test to any existing `describe` or `context` block, by
-clicking **Add New Test** on our defined `describe` block.
-
-
-
-We are launched into Cypress Studio and can begin interacting with our
-application to generate the test.
-
-For this test, we will add a new bank account. Our interactions are as follows:
-
-1. Click "Bank Accounts" in left hand navigation
-
-2. Click the "Create" button on Bank Accounts page
-
-3. Fill out the bank account information
-
-4. Click the "Save" button
-
-
-To discard the interactions, click the **Cancel** button to exit Cypress Studio.
-
-If satisfied with the interactions with the application, click **Save Commands**
-and prompt will ask for the name of the test. Click **Save Test** and the test
-will be saved to the file.
-
-
-
-Once saved, the file will be run again in Cypress.
-
-
-
-Finally, viewing our test code, we can see that the test is updated after
-clicking **Save Commands** with the actions we recorded in Cypress Studio.
-
-```js
-// Code from Real World App (RWA)
-import { User } from 'models'
-
-describe('Cypress Studio Demo', () => {
- beforeEach(() => {
- cy.task('db:seed')
-
- cy.database('find', 'users').then((user: User) => {
- cy.login(user.username, 's3cret', true)
- })
- })
-
- it('create new transaction', () => {
- // Extend test with Cypress Studio
- })
-
- /* === Test Created with Cypress Studio === */
- it('create bank account', function () {
- /* ==== Generated with Cypress Studio ==== */
- cy.get('[data-test=sidenav-bankaccounts]').click()
- cy.get('[data-test=bankaccount-new] > .MuiButton-label').click()
- cy.get('#bankaccount-bankName-input').click()
- cy.get('#bankaccount-bankName-input').type('Test Bank Account')
- cy.get('#bankaccount-routingNumber-input').click()
- cy.get('#bankaccount-routingNumber-input').type('987654321')
- cy.get('#bankaccount-accountNumber-input').click()
- cy.get('#bankaccount-accountNumber-input').type('123456789')
- cy.get('[data-test=bankaccount-submit] > .MuiButton-label').click()
- /* ==== End Cypress Studio ==== */
- })
-})
-```
-
-:::info
+Cypress allows you to control how a selector is determined. Use the
+[`Cypress.ElementSelector`](/api/cypress-api/element-selector-api) API to control
+the selectors you want prioritized.
-Clone the and refer to
-the
-[cypress/tests/demo/cypress-studio.cy.ts](https://github.com/cypress-io/cypress-realworld-app/blob/develop/cypress/tests/demo/cypress-studio.spec.ts)
-file.
+## Limitations
-:::
+- Cypress Studio is currently only available for writing E2E tests, and doesn't
+ yet work with Component Testing.
+- Cypress Studio does not support writing tests that use domains of [multiple
+ origins](/app/guides/cross-origin-testing).
+- Cypress Studio can not interact with elements within a ShadowDom directly, though it can still run tests that do.
diff --git a/docs/app/references/changelog.mdx b/docs/app/references/changelog.mdx
index b0ca2d8284..dfdad48c99 100644
--- a/docs/app/references/changelog.mdx
+++ b/docs/app/references/changelog.mdx
@@ -8,6 +8,10 @@ sidebar_label: Changelog
# Changelog
+## 15.0.0
+
+_Released 7/01/2025 (PENDING)_
+
## 14.5.0
_Released 6/17/2025_
@@ -1826,7 +1830,7 @@ _Released 1/24/2023_
configured to exclude files with those extensions. Addresses
[#24495](https://github.com/cypress-io/cypress/issues/24495).
- Added support for the `data-qa` selector in the
- [Selector Playground](/api/cypress-api/selector-playground-api) in addition to
+ Selector Playground in addition to
`data-cy`, `data-test` and `data-testid`. Addresses
[#25305](https://github.com/cypress-io/cypress/issues/25305).
@@ -10881,14 +10885,14 @@ _Released 3/1/2018_
has been updated to automatically prefer `data-cy`, `data-test` or
`data-testid` attributes when providing the unique selector for an element.
Additionally it now exposes a
- [public API](/api/cypress-api/selector-playground-api) that you can use to
+ public API that you can use to
control how it determines which selector to use. Fixes
[#1135](https://github.com/cypress-io/cypress/issues/1135).
**Documentation Changes:**
- [Added `Selector Playground Guide`](/app/core-concepts/open-mode#Selector-Playground)
-- [Added `Selector Playground API`](/api/cypress-api/selector-playground-api)
+- Added `Selector Playground API`
- [Updated `Best Practices`](/app/core-concepts/best-practices)
- [Updated `FAQ`](/app/faq)
- [Updated `Introduction to Cypress`](/app/core-concepts/introduction-to-cypress)
diff --git a/docs/app/references/launching-browsers.mdx b/docs/app/references/launching-browsers.mdx
index 2d3792e7d2..5c3571234a 100644
--- a/docs/app/references/launching-browsers.mdx
+++ b/docs/app/references/launching-browsers.mdx
@@ -216,22 +216,6 @@ Download the Mozilla geckodriver from the
:::
-##### 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,
diff --git a/docs/app/references/migration-guide.mdx b/docs/app/references/migration-guide.mdx
index 6fdca31c66..e721cc35a1 100644
--- a/docs/app/references/migration-guide.mdx
+++ b/docs/app/references/migration-guide.mdx
@@ -8,6 +8,168 @@ 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).
+
+### `@cypress/webpack-batteries-included-preprocessor` no longer shims all built-ins provided by `webpack` v4
+
+The default file preprocessor, `@cypress/webpack-batteries-included-preprocessor`, no longer shims all built-ins that were previously provided by webpack v4. This is mainly to reduce security vulnerabilities and bundle size within the end-to-end file preprocessor.
+
+However, `@cypress/webpack-batteries-included-preprocessor` still ships with _some_ built-ins, such as `buffer`, `path`, `process`, `os`, and `stream`. If other built-ins are required, install `@cypress/webpack-batteries-included-preprocessor` independently and follow the webpack documentation described in [webpack's resolve.fallback](https://webpack.js.org/configuration/resolve/#resolvefallback) to configure the built-ins you need.
+
+For example, the following code shows how to provide the `querystring` built-in to the preprocessor:
+
+```javascript
+const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
+
+function getWebpackOptions() {
+ const options = webpackPreprocessor.getFullWebpackOptions()
+
+ // add built-ins as needed
+ // NOTE: for this example, querystring-es3 needs to be installed as a dependency
+ options.resolve.fallback.querystring = require.resolve('querystring-es3')
+ return options
+}
+
+module.exports = (on) => {
+ on(
+ 'file:preprocessor',
+ webpackPreprocessor({
+ webpackOptions: getWebpackOptions(),
+ })
+ )
+}
+```
+
+### 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 `@`.
+
+Before{' '}
+
+```ts
+import { mount } from `cypress/angular`
+```
+
+After
+
+```ts
+import { mount } from `@cypress/angular`
+```
+
+### Selector Playground API changes
+
+The `Cypress.SelectorPlayground` API has been renamed to
+[`Cypress.ElementSelector`](/api/cypress-api/element-selector-api). Additionally, the `onElement` function has been removed as an option to the `defaults` method.
+
+This change was made in order to reflect its use in features beyond just the Selector Playground - like Cypress Studio.
+
+The following code shows how to migrate from the `Cypress.SelectorPlayground` API to the
+[`Cypress.ElementSelector`](/api/cypress-api/element-selector-api) API.
+
+Before{' '}
+
+```ts
+Cypress.SelectorPlayground.defaults({
+ selectorPriority: ['class', 'id'],
+})
+```
+
+After
+
+```ts
+Cypress.ElementSelector.defaults({
+ selectorPriority: ['class', 'id'],
+})
+```
+
## Migrating to Cypress 14.0
This guide details the code changes needed to migrate to Cypress
diff --git a/docs/app/tooling/typescript-support.mdx b/docs/app/tooling/typescript-support.mdx
index 87ad0a22c2..89bf5ae148 100644
--- a/docs/app/tooling/typescript-support.mdx
+++ b/docs/app/tooling/typescript-support.mdx
@@ -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:
@@ -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"]
},
@@ -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
@@ -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
diff --git a/docs/partials/_default-selector-priority.mdx b/docs/partials/_default-selector-priority.mdx
index 5940fe01ab..71e8eed843 100644
--- a/docs/partials/_default-selector-priority.mdx
+++ b/docs/partials/_default-selector-priority.mdx
@@ -4,8 +4,9 @@
2. `data-test`
3. `data-testid`
4. `data-qa`
-5. `id`
-6. `class`
-7. `tag`
-8. `attributes`
-9. `nth-child`
+5. `name`
+6. `id`
+7. `class`
+8. `tag`
+9. `attributes`
+10. `nth-child`
diff --git a/static/img/app/cypress-studio/add-test-1.png b/static/img/app/cypress-studio/add-test-1.png
deleted file mode 100644
index 23fd14bafd..0000000000
Binary files a/static/img/app/cypress-studio/add-test-1.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/add-test-2.png b/static/img/app/cypress-studio/add-test-2.png
deleted file mode 100644
index 3af5c01433..0000000000
Binary files a/static/img/app/cypress-studio/add-test-2.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/add-test-create.png b/static/img/app/cypress-studio/add-test-create.png
deleted file mode 100644
index 7c21ca2184..0000000000
Binary files a/static/img/app/cypress-studio/add-test-create.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/add-test-final.png b/static/img/app/cypress-studio/add-test-final.png
deleted file mode 100644
index 9a7fbcc5ea..0000000000
Binary files a/static/img/app/cypress-studio/add-test-final.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/add-test-form-complete.png b/static/img/app/cypress-studio/add-test-form-complete.png
deleted file mode 100644
index e3e4827c48..0000000000
Binary files a/static/img/app/cypress-studio/add-test-form-complete.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/add-test-form-save.png b/static/img/app/cypress-studio/add-test-form-save.png
deleted file mode 100644
index 27887b0d8e..0000000000
Binary files a/static/img/app/cypress-studio/add-test-form-save.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/add-test-save-test.png b/static/img/app/cypress-studio/add-test-save-test.png
deleted file mode 100644
index 1f2895d3f4..0000000000
Binary files a/static/img/app/cypress-studio/add-test-save-test.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/cypress-studio-beta-button.png b/static/img/app/cypress-studio/cypress-studio-beta-button.png
new file mode 100644
index 0000000000..fb073b4302
Binary files /dev/null and b/static/img/app/cypress-studio/cypress-studio-beta-button.png differ
diff --git a/static/img/app/cypress-studio/extend-activate-studio.png b/static/img/app/cypress-studio/extend-activate-studio.png
deleted file mode 100644
index 62565f9085..0000000000
Binary files a/static/img/app/cypress-studio/extend-activate-studio.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/extend-assert-button-enabled.png b/static/img/app/cypress-studio/extend-assert-button-enabled.png
deleted file mode 100644
index 9302784227..0000000000
Binary files a/static/img/app/cypress-studio/extend-assert-button-enabled.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/extend-assert-user-name.png b/static/img/app/cypress-studio/extend-assert-user-name.png
deleted file mode 100644
index 930a301344..0000000000
Binary files a/static/img/app/cypress-studio/extend-assert-user-name.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/extend-click-new-transaction.png b/static/img/app/cypress-studio/extend-click-new-transaction.png
deleted file mode 100644
index ec970bb639..0000000000
Binary files a/static/img/app/cypress-studio/extend-click-new-transaction.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/extend-ready.png b/static/img/app/cypress-studio/extend-ready.png
deleted file mode 100644
index 1df2ed8542..0000000000
Binary files a/static/img/app/cypress-studio/extend-ready.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/extend-save-test.png b/static/img/app/cypress-studio/extend-save-test.png
deleted file mode 100644
index b3e1330fd3..0000000000
Binary files a/static/img/app/cypress-studio/extend-save-test.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/extend-type-transaction-form.png b/static/img/app/cypress-studio/extend-type-transaction-form.png
deleted file mode 100644
index 116634caeb..0000000000
Binary files a/static/img/app/cypress-studio/extend-type-transaction-form.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/extend-type-user-name.png b/static/img/app/cypress-studio/extend-type-user-name.png
deleted file mode 100644
index e89c010bcf..0000000000
Binary files a/static/img/app/cypress-studio/extend-type-user-name.png and /dev/null differ
diff --git a/static/img/app/cypress-studio/run-spec-1.png b/static/img/app/cypress-studio/run-spec-1.png
deleted file mode 100644
index fc4b03c444..0000000000
Binary files a/static/img/app/cypress-studio/run-spec-1.png and /dev/null differ