Cypress Studio: A Beginner’s Guide to Recording Tests

Cypress Studio turns interactions in a running application into editable Cypress end-to-end test commands. Open a project in the Cypress App’s Open Mode, choose New Test from a spec or suite, name the test, and enter the application URL. Interact with the app; Studio adds commands to the spec as you go. You can add assertions manually, edit the generated code, and then run the test to check that it expresses the behavior you intended.

Basic recording and manual assertions do not require Cypress Cloud. Studio AI is a separate, optional feature that recommends assertions from visible DOM changes and does require a linked Cloud project. Cypress says Studio became default behavior in version 15.4.0, so historical instructions to enable the experimentalStudio flag are obsolete. See the current Cypress Studio guide.

1. What Cypress Studio records

Studio captures supported interactions in the browser and writes corresponding Cypress commands into your spec. Its documented recorded actions are clicks, typing, checking and unchecking checkboxes, and selecting options. The generated code is ordinary editable Cypress test code: recording creates a starting point, not a guarantee that the test checks the right behavior.

Interaction	Typical command
Click a button or link	`.click()`
Type into an input	`.type()`
Check a checkbox	`.check()`
Clear a checkbox	`.uncheck()`
Choose a select option	`.select()`

Studio also chooses selectors for recorded elements and supports adding assertions through its interface. You can inspect and edit the generated commands before saving them to the spec file.

2. Requirements before you start

Use the Cypress App in Open Mode with a project and E2E spec.
Studio requires internet access and sourcemaps. Sourcemaps are enabled by default in most Cypress configurations. If Studio cannot load the test code accurately, it reports an error.
Studio supports E2E tests. It does not support Cucumber-style tests.
Recording interactions across multiple origins is unsupported. Iframes and Shadow DOM are also outside the documented recording support.
Basic Studio recording and manual assertions work without Cloud. AI recommendations require Cypress 15.11.0 or later, a Cloud account, and a project linked to Cloud.

Check the current guide for version-specific details and AI limits before relying on them; those can change.

3. Record a new test, step by step

Open your project in the Cypress App. Use Open Mode and locate the spec or suite for the behavior you want to cover.
Choose New Test. Enter a descriptive test name. Prefer a name that describes the behavior, such as “submits a valid contact form,” rather than “test 1.”
Enter the application URL. Studio adds a cy.visit() command and opens the app at that URL.
Perform the user journey. Click, type, check, uncheck, and select as needed. Studio records supported interactions into the test as Cypress commands.
Add assertions. Right-click an element in the app and choose an assertion that matches the expected state, such as visibility, text, value, or class.
Review the generated code. Edit selectors or commands inline if needed. Use Studio’s undo, redo, and reset controls to correct the recording.
Save and run the spec. Confirm that the test passes and that its assertions would fail if the intended behavior were broken.

A useful test checks an outcome, not only a sequence of actions. For example, after submitting a form, assert that a success message appears or that the expected next page is visible. Choose the assertion from the behavior your application promises; Studio cannot make that product decision for you.

4. Extend an existing test

Run the spec in the Cypress App.
In the Command Log, hover over the test and choose Edit in Studio.
Studio runs the existing commands and enters recording mode after the last command.
Perform additional interactions and add assertions. Studio appends them after the existing commands.
Review, save, and run the updated test.

This workflow is useful when a test already reaches the right page or state and you want to add the next part of the journey. If the existing test fails, resolve that failure first: Studio recording and AI suggestions are disabled while the test is failing.

5. Selectors and generated code

Studio tries to find a unique selector using this priority order:

data-cy
data-test
data-testid
data-qa
name
id
class
tag
other attributes
nth-child

Review selectors for stability. A generated class or positional selector can change when styling or markup changes, even if the user-facing behavior stays the same. If your project uses a consistent test attribute, Cypress documents Cypress.ElementSelector for prioritizing project-specific selector conventions. See the Studio guide for setup details.

Studio’s panel lets you edit generated commands inline. Pausing recording allows you to inspect elements in DevTools. After saving, the commands live in your spec file and can be maintained like the rest of your tests.

6. Add assertions: manual workflow and Studio AI

Manual assertions

Right-click an element and choose an assertion that reflects its current state, such as whether it is visible or what text, value, or class it has. Then inspect the assertion and make sure it captures the behavior that matters. A visible confirmation may be useful, for example, but the right condition depends on your application and test purpose.

Optional Studio AI recommendations

Studio AI observes DOM changes after recorded interactions and recommends possible assertions. It bases suggestions on visible UI changes; it does not inspect your application code, business logic, or backend rules. Review every suggestion, keep only assertions that represent the expected behavior, and run the test.

Basic recording and manual assertions do not need Cloud. AI recommendations require Cypress 15.11.0 or later and a Cypress Cloud account with a linked project. The current documentation describes an anonymous trial of up to six accepted recommendations before sign-in is requested. It also lists recommendation limits of 60 per hour for a free Cloud account and 300 per hour for a paid account or free trial, with up to 10 parallel requests across plans. These are operational limits, not test-quality guarantees, and may change; verify the current documentation before planning around them.

7. Studio versus Cypress Cloud

“Recording” refers to two different activities in Cypress:

Feature	What it does	Cloud required?
Cypress Studio	Records browser interactions to help author or extend a test.	No for basic recording and manual assertions.
Studio AI	Suggests assertions based on visible DOM changes.	Yes; requires an account and linked project.
Cypress Cloud run recording	Stores CI test-run results and provides run history and analytics.	Cloud is the service for these capabilities.

Cloud run recording is separate from Studio’s authoring workflow. For CI context, see Cypress’s CI overview. For Open Mode context, see Open mode in the Cypress App.

8. Limitations and edge cases

Multiple origins: Studio does not record interactions across multiple origins. Keep the recorded flow within its supported origin context or author the cross-origin portion directly.
Iframes and Shadow DOM: Studio does not support recording interactions in these contexts.
Cucumber: Studio is for E2E tests, not Cucumber-style tests.
Animations and transitions: For Studio AI, a changing or transitional DOM can lead to suggestions based on an intermediate state. Wait for the stable state, then inspect the recommendation.
Large pages: Studio AI may not produce suggestions if the page is too large for its context window.
No automatic crawling: Studio AI does not explore the application on its own; it responds to the interactions you record.
Failed test: Recording and AI recommendations are unavailable until the failure is fixed.
Sourcemaps: Studio needs them to load test code accurately. Check the project’s Cypress configuration if Studio reports that it cannot load the code.

9. Troubleshooting

Symptom	Likely cause	What to do
There is no Studio option or New Test entry point.	You may be following old experimental setup instructions, using an older Cypress version, or not viewing a supported spec or suite in Open Mode.	Open the project in the Cypress App’s Open Mode and check the installed version and current Studio guide. Studio became default behavior in version 15.4.0; do not add the obsolete `experimentalStudio` flag based on old instructions.
Studio reports it cannot load test code accurately.	Sourcemaps are unavailable or the project cannot provide them as expected.	Check the Cypress configuration and ensure sourcemaps are enabled. Most configurations enable them by default.
Recorded commands target the wrong element or use a fragile selector.	The element is ambiguous or the chosen selector depends on styling or position.	Inspect the generated selector, add stable test attributes where appropriate, and configure `Cypress.ElementSelector` if your project has a selector convention.
Clicks inside an iframe or Shadow DOM are not recorded.	These contexts are unsupported by Studio recording.	Write and maintain that portion of the test directly using the Cypress APIs appropriate to your app.
Recording stops around navigation to another origin.	Studio does not support recording across multiple origins.	Keep Studio recording within the supported origin flow and code the remaining steps directly.
AI suggestions are unavailable.	Studio AI has version, Cloud-linking, and test-pass requirements.	Check for Cypress 15.11.0 or later, sign in to Cloud and link the project. Fix any failing test before recording or requesting suggestions.
AI produces no assertion or a poor suggestion.	The page may be large, still animating, or have no useful visible DOM change; AI also cannot infer business rules.	Wait for stable UI, make the relevant interaction explicit, add a manual assertion, and judge suggestions against the intended behavior.
AI recommendations stop after repeated requests.	You may have reached the current hourly or parallel-request limit.	Check the current Studio guide for limits; they can change. Continue with manual assertions if needed.

10. Reliability, maintenance, and cost

Recording can reduce the typing needed to create a first draft, but reliability comes from the choices made during review. Use selectors that represent the intended element, assert meaningful outcomes, and run the test after saving. A sequence of clicks that passes today can still be brittle if it depends on incidental layout, transient animation states, or text that changes often.

Basic Studio recording and manual assertions do not require a Cloud account. Cloud is required for Studio AI recommendations, and Cloud separately provides CI run history and analytics. The research materials do not establish a universal cost for these services, so check Cypress’s current plan information before choosing a paid plan. AI recommendation limits and beta terms may change.

11. Example review checklist

Does the test name describe a user-visible behavior?
Does the test visit the correct application URL?
Are selectors stable and unique in the context where they run?
Does each assertion check an expected outcome rather than merely repeat the action?
Have any animation, navigation, iframe, Shadow DOM, or multiple-origin limitations affected this flow?
Does the saved test pass when run from the spec?
If using Studio AI, have you checked each recommendation against the actual product requirement?

12. Or skip the browser setup

If you need a screenshot of the application or a web page while documenting a test, ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Does Studio change my application?

Studio records interactions to author commands in a Cypress spec. The test author still needs to decide which behavior and assertions the test should cover.

Can Studio AI replace a human review?

No. Its recommendations come from visible DOM changes and do not encode backend rules or product intent. Review suggestions and run the test.

Do I need Cloud just to save a Studio test?

No. Cloud is required for AI recommendations, while basic Studio recording and manual assertions do not require it.

Where should I check for changes to Studio behavior?

Use the official Studio guide, especially for version requirements, AI limits, and supported workflows.