docs: Breaking: Cypress 15.0.0

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
 

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) <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 |
 

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)                                                               |

docs/app/guides/cypress-studio.mdx

@@ -13,11 +13,19 @@ e2eSpecific: true
 
 ##### <Icon name="question-circle" color="#4BBFD2" /> 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
 
 <Icon name="exclamation-triangle" /> **Experimental**
@@ -40,303 +48,50 @@ 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 <Icon name="github" />
-[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 <Icon name="github" inline="true" contentType="rwa" /> 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.
+## How Cypress Studio works
 
-Once the browser is open, run the spec created in the previous step.
+When Studio is enabled, you can:
 
-<DocsImage src="/img/app/cypress-studio/run-spec-1.png" alt="Cypress Studio" />
+- 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
 
-#### Step 2 - Launch Cypress Studio
+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 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.
+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.
 
-Clicking on **Add Commands to Test** will launch the Cypress Studio.
+![Cypress Studio button](/img/app/cypress-studio/cypress-studio-beta-button.png)
 
-:::info
+## Recording new tests
 
-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).
+You can record a new test with Cypress Studio inside any describe or context block.
 
-:::
+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
 
-<DocsImage
-  src="/img/app/cypress-studio/extend-activate-studio.png"
-  alt="Activate Cypress Studio"
-/>
+## Extending existing tests
 
-Next, Cypress will execute the test in isolation and pause after the last
-command in the test.
+You can also extend and update existing tests using Cypress Studio.
 
-Now, we can begin updating the test to create a new transaction between users.
-
-<DocsImage
-  src="/img/app/cypress-studio/extend-ready.png"
-  alt="Cypress Studio Ready"
-/>
-
-#### 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.
-
-<DocsImage
-  src="/img/app/cypress-studio/extend-click-new-transaction.png"
-  alt="Cypress Studio Recording Click"
-/>
-
-Next, we can start typing in the name of a user that we want to pay.
-
-<DocsImage
-  src="/img/app/cypress-studio/extend-type-user-name.png"
-  alt="Cypress Studio Recording Type"
-/>
-
-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).
-
-<DocsImage
-  src="/img/app/cypress-studio/extend-assert-user-name.png"
-  alt="Cypress Studio Add Assertion"
-/>
-
-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.
-
-<DocsImage
-  src="/img/app/cypress-studio/extend-type-transaction-form.png"
-  alt="Cypress Studio Recording Type"
-/>
-
-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.
-
-<DocsImage
-  src="/img/app/cypress-studio/extend-assert-button-enabled.png"
-  alt="Cypress Studio Add Assertion"
-/>
-
-Finally, we will click the "Pay" button and get presented with a confirmation
-page of our new transaction.
-
-<DocsImage
-  src="/img/app/cypress-studio/extend-save-test.png"
-  alt="Cypress Studio Save Commands"
-/>
-
-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.
-
-#### Generated Test Code
-
-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 ==== */
-  })
-})
-```
+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
 
 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.
-
-<DocsImage
-  src="/img/app/cypress-studio/add-test-1.png"
-  alt="Cypress Studio Add Test"
-/>
-
-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
-   <DocsImage
-     src="/img/app/cypress-studio/add-test-2.png"
-     alt="Cypress Studio Begin Add Test"
-   />
-2. Click the "Create" button on Bank Accounts page
-   <DocsImage
-     src="/img/app/cypress-studio/add-test-create.png"
-     alt="Cypress Studio Add Test Create Bank Account"
-   />
-3. Fill out the bank account information
-   <DocsImage
-     src="/img/app/cypress-studio/add-test-form-complete.png"
-     alt="Cypress Studio Add Test Complete Bank Account Form"
-   />
-4. Click the "Save" button
-   <DocsImage
-     src="/img/app/cypress-studio/add-test-form-save.png"
-     alt="Cypress Studio Add Test Save Bank Account"
-   />
-
-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.
-
-<DocsImage
-  src="/img/app/cypress-studio/add-test-save-test.png"
-  alt="Cypress Studio Add Test Completed Run"
-/>
-
-Once saved, the file will be run again in Cypress.
-
-<DocsImage
-  src="/img/app/cypress-studio/add-test-final.png"
-  alt="Cypress Studio Add Test Completed Run"
-/>
-
-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.
+[`Cypress.ElementSelector` selector priority](/api/cypress-api/selector-playground-api#Default-Selector-Priority).
 
-```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
 
-Clone the <Icon name="github" inline="true" contentType="rwa" /> 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.