diff --git a/docs/app/guides/cypress-studio.mdx b/docs/app/guides/cypress-studio.mdx index 6e73ce3b63..cd29911e0d 100644 --- a/docs/app/guides/cypress-studio.mdx +++ b/docs/app/guides/cypress-studio.mdx @@ -1,6 +1,6 @@ --- -title: 'Cypress Studio: Record Interactions & Generate Tests in Cypress' -description: 'Learn how to use Cypress Studio to record interactions and generate tests in Cypress.' +title: 'Cypress Studio: Build Tests by Interacting with Your App' +description: 'Create, extend, and refine Cypress tests without writing commands by hand.' sidebar_label: 'Cypress Studio' e2eSpecific: true --- @@ -14,36 +14,45 @@ e2eSpecific: true ##### What you'll learn - 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 +- How to add assertions by right-clicking elements +- How to quickly extend or edit tests without leaving Cypress ::: -## Overview +## Why Use Cypress Studio -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 right-click and fine-tune your tests inline. +Cypress Studio turns test creation into a natural part of exploring your app. +Instead of manually typing every `.get()`, `.click()`, or `.type()` command, you can **record interactions in real time**, automatically generate Cypress code, and fine-tune your test inline. -It is ideal for bootstrapping new tests or extending existing ones without writing every `.get()`, `.click()`, or `.type()` command by hand. +- **Save time**: Skip manually typing `.get().click().type()` sequences +- **Stay in the flow**: Build and extend tests without leaving the Cypress App +- **Boost coverage**: Add new checks to existing tests in seconds -:::caution + - **Experimental** +## 🚀 Quickstart: Try Studio in 60 Seconds -Cypress Studio is an experimental feature and can be enabled by adding the -[experimentalStudio](/app/references/experiments#End-to-End-Testing) -attribute to your Cypress configuration. +:::success -::: +1. **Enable Studio:** + Add to your `cypress.config.js` (Cypress Studio is currently experimental): + + ```js + { + e2e: { + experimentalStudio: true + } + } + ``` -:::cypress-config-example +2. **Run a Spec:** + Open Cypress, run a spec file, and click New Test or Edit in Studio. -```js -{ - e2e: { - experimentalStudio: true - } -} -``` +3. **Interact & Save:** + Click, type, and right-click to add assertions. Click Save to save your test. ::: @@ -51,53 +60,120 @@ attribute to your Cypress configuration. When Studio is enabled, you can: -- 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 +- **Record:** Interact with your app in the Cypress browser to capture test commands +- **Assert:** Right-click any element to add built-in assertions +- **Edit:** Adjust tests inline without switching tools Supported action commands include: [`.click()`](/api/commands/click), [`.type()`](/api/commands/type), [`.check()`](/api/commands/check), [`.uncheck()`](/api/commands/uncheck), [`.select()`](/api/commands/select) -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. +### Start Studio + +You can start Studio in several ways: + +- Click **Edit in Studio** on a test in the Command Log. +- Click **New Test** on the running spec or suite. +- Click **Studio Beta** in the Studio panel. -![Cypress Studio button](/img/app/cypress-studio/cypress-studio-beta-button.png) + -## Recording new tests +### Record a new test -You can record a new test with Cypress Studio inside any describe or context block. +1. Click **New Test** on the file or suite you want to work in +2. Give your test a clear, descriptive name -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 +Studio will automatically create a new test definition for you. -## Extending existing tests + -You can also extend and update existing tests using Cypress Studio. +### Extend an existing test + +You can 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 +3. Click **Edit in Studio** + +Studio runs your test up to the last command and lets you keep building from there. + + + +### Set a URL + +Studio needs a `cy.visit()` before it can record. If your test doesn't have one yet, Studio will prompt you to enter a URL so it can start recording. + + + +### Record actions + +Record actions by interacting with the application under test. + +- **Clicks:** Click buttons, links, or interactive elements +- **Typing:** Enter text into inputs and text areas +- **Selections:** Use dropdowns, checkboxes, and radio buttons -### How are selectors determined? +Studio translates your actions into Cypress commands in real time. -Cypress will automatically calculate a **unique selector** to use for a targeted -element by running through a series of selector strategies. + + +### Add assertions + +Right-click any element in your app to instantly add an assertion. + +For example, confirm text is visible, a checkbox is checked, or an element has a specific CSS class. Assertions are added directly in your test code, ready to save and run. + +Assertions available are dynamically generated based on the element you right-click. + + + +## How selectors are chosen + +Cypress automatically generates a **unique selector** for each element you interact with, using a priority strategy to ensure accuracy. -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. +Want more control? Use the [`Cypress.ElementSelector`](/api/cypress-api/element-selector-api) API to customize selector priority for your project. ## 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 +- Works only in E2E tests (Component Testing not yet supported) +- Cannot record across [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. + +## Coming Soon: AI in Studio + +Imagine Studio suggesting the most relevant assertions for every step you take. Cypress AI is a feature that's **coming soon** that will recommend relevant assertions in real time based on your interactions. + + + + + +## See also + +- [Element Selector API](/api/cypress-api/element-selector-api) diff --git a/src/components/docs-video/index.tsx b/src/components/docs-video/index.tsx index d7eb29a367..56a60ae43d 100644 --- a/src/components/docs-video/index.tsx +++ b/src/components/docs-video/index.tsx @@ -4,7 +4,7 @@ import LocalVideo from "@site/src/components/video-local"; import VideoYouTube from "@site/src/components/video-youtube"; import VideoVimeo from "@site/src/components/video-vimeo"; -export default function DocsVideo({ src, title }: DocsVideoProps) { +export default function DocsVideo({ src, title, autoPlay = false }: DocsVideoProps) { const isYouTube = src.includes("youtube"); const isVimeo = src.includes("vimeo"); const isLocalVideo = !src.includes("youtube") && !src.includes("vimeo"); @@ -13,7 +13,7 @@ export default function DocsVideo({ src, title }: DocsVideoProps) { <> {isYouTube && } {isVimeo && } - {isLocalVideo && } + {isLocalVideo && } ); } diff --git a/src/components/docs-video/types.d.ts b/src/components/docs-video/types.d.ts index 44d521d9a2..9bb8626aa2 100644 --- a/src/components/docs-video/types.d.ts +++ b/src/components/docs-video/types.d.ts @@ -1,4 +1,5 @@ export interface DocsVideoProps { src: string - title: string + title?: string + autoPlay?: boolean } diff --git a/src/components/video-local/index.tsx b/src/components/video-local/index.tsx index ec4a8474e9..035b5d84cc 100644 --- a/src/components/video-local/index.tsx +++ b/src/components/video-local/index.tsx @@ -2,12 +2,23 @@ import React from "react"; import s from "./style.module.css"; import { VideoProps } from "./types"; -export default function LocalVideo({ src }: VideoProps) { +export default function LocalVideo({ src, title, autoPlay = false }: VideoProps) { return (
-
); } diff --git a/src/components/video-local/types.d.ts b/src/components/video-local/types.d.ts index ec47ae30a2..f9bee19b70 100644 --- a/src/components/video-local/types.d.ts +++ b/src/components/video-local/types.d.ts @@ -1,4 +1,5 @@ export interface VideoProps { src: string title?: string + autoPlay?: boolean } diff --git a/static/img/app/cypress-studio/create-new-test-in-suite-with-cypress-studio.mp4 b/static/img/app/cypress-studio/create-new-test-in-suite-with-cypress-studio.mp4 new file mode 100644 index 0000000000..9ae854c074 Binary files /dev/null and b/static/img/app/cypress-studio/create-new-test-in-suite-with-cypress-studio.mp4 differ diff --git a/static/img/app/cypress-studio/cy-visit-url-in-studio.mp4 b/static/img/app/cypress-studio/cy-visit-url-in-studio.mp4 new file mode 100644 index 0000000000..0e3e88c724 Binary files /dev/null and b/static/img/app/cypress-studio/cy-visit-url-in-studio.mp4 differ diff --git a/static/img/app/cypress-studio/cypress-studio-ai-illustration.gif b/static/img/app/cypress-studio/cypress-studio-ai-illustration.gif new file mode 100644 index 0000000000..a1861a75ff Binary files /dev/null and b/static/img/app/cypress-studio/cypress-studio-ai-illustration.gif differ diff --git a/static/img/app/cypress-studio/cypress-studio-assertions-demo.mp4 b/static/img/app/cypress-studio/cypress-studio-assertions-demo.mp4 new file mode 100644 index 0000000000..ffe1416d8c Binary files /dev/null and b/static/img/app/cypress-studio/cypress-studio-assertions-demo.mp4 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 deleted file mode 100644 index fb073b4302..0000000000 Binary files a/static/img/app/cypress-studio/cypress-studio-beta-button.png and /dev/null differ diff --git a/static/img/app/cypress-studio/cypress-studio-recording-assertions-editing.mp4 b/static/img/app/cypress-studio/cypress-studio-recording-assertions-editing.mp4 new file mode 100644 index 0000000000..b4b3184f9d Binary files /dev/null and b/static/img/app/cypress-studio/cypress-studio-recording-assertions-editing.mp4 differ diff --git a/static/img/app/cypress-studio/edit-in-studio-button-on-cypress-test.mp4 b/static/img/app/cypress-studio/edit-in-studio-button-on-cypress-test.mp4 new file mode 100644 index 0000000000..0d894d29cb Binary files /dev/null and b/static/img/app/cypress-studio/edit-in-studio-button-on-cypress-test.mp4 differ diff --git a/static/img/app/cypress-studio/studio-recording-typing.mp4 b/static/img/app/cypress-studio/studio-recording-typing.mp4 new file mode 100644 index 0000000000..fa6a8c26ca Binary files /dev/null and b/static/img/app/cypress-studio/studio-recording-typing.mp4 differ