ScreenshotNeo

BlogGuides

What Is Cypress Studio and How Do You Use It?

Cypress Studio records browser interactions as editable end-to-end tests. Learn how to start or extend a test, add assertions, and troubleshoot its limits.

By the ScreenshotNeo team4 October 20268 min read

Cypress Studio is an interactive feature in the Cypress App’s open mode that records browser interactions as Cypress end-to-end (E2E) test commands. You can add assertions and edit the generated code inline. Studio’s recording and manual assertions work without Cypress Cloud; its optional AI assertion recommendations require a Cypress Cloud account and a linked project.

Use Studio to turn a browser workflow into a starting point for an E2E test, then review and maintain the generated spec like any other test code. Studio is not a replacement for reviewing selectors, deciding what the test should assert, or checking that the workflow fits its supported browser context.

What Cypress Studio does

Studio records supported actions as you interact with your application and adds corresponding Cypress commands to a spec. It supports recording clicks, typing, checking and unchecking controls, and selecting options. You can enter assertions manually; with Studio AI enabled, it can also recommend assertions based on UI changes it observes during recording.

Studio is available in the Cypress App’s open mode. Changes are written into the test spec, where you can inspect and edit the resulting code. Studio AI is an optional recommendation layer: it does not automatically crawl your application, and you choose whether to keep recommendations.

Studio and Studio AI compared

Capability Studio without AI Studio AI
Record interactions as E2E commands Yes Yes
Add assertions Manually Manually, with optional AI recommendations
Edit generated test code inline Yes Yes
Cypress Cloud account and linked project Not required for Studio recording Required for AI recommendations

The recording and editing workflow is the same either way. Choose AI only if recommendations are useful and your project meets its requirements. Cypress documents Studio and Studio AI in its Cypress Studio guide and AI in Cypress overview.

Requirements and supported workflows

  • Studio requires internet access and sourcemaps. Sourcemaps are enabled by default in most Cypress configurations, according to Cypress documentation.
  • Studio AI requires Cypress 15.11.0 or later, a Cypress Cloud account, and a linked project.
  • Studio is for E2E tests. Component Testing and Cucumber-style tests are not supported.
  • Studio cannot record across multiple origins and does not support interactions in iframes or Shadow DOM.

Studio is currently available by default. Do not add the retired experimentalStudio configuration option: current Cypress documentation says it is no longer used and causes Cypress to error if configured. See the experimental features reference and migration guide.

How to create a new test with Studio

  1. Open your project in the Cypress App and locate the spec file or suite where the test belongs.
  2. Choose New Test on that spec or suite, then enter a descriptive test name.
  3. Provide the application URL. Studio adds a cy.visit() command and opens the Studio panel.
  4. Interact with the application. Click, type, check or uncheck controls, and select options as needed. Studio records supported actions as Cypress commands.
  5. Add assertions. Enter them manually, or review Studio AI recommendations if AI is available.
  6. Inspect and edit the generated code. Confirm the selectors, assertions, and test flow express the behavior you intend to protect.
  7. Save the spec and run the test normally to confirm it behaves as expected in your project.

Studio produces editable spec code rather than a separate recording that must be played back. Cypress’s open mode documentation describes how the App runs tests and reflects spec changes.

How to extend an existing test

  1. Run the spec in the Cypress App’s open mode.
  2. In the Command Log, hover over the test you want to extend and choose Edit in Studio.
  3. Studio runs the test through its existing commands. Recording begins from the state reached at the end of that test.
  4. Perform the additional actions you want to include and add assertions.
  5. Review the generated additions in the code panel. Studio appends new actions and assertions to the end of the test; edit them inline if needed.
  6. Save and run the completed test to check the full path, including the setup and actions that were already present.

Record actions, pause, and add assertions

Studio records these documented interactions:

  • .click()
  • .type()
  • .check() and .uncheck()
  • .select()

Use the generated commands as a draft. For example, a recorded click and text entry should still be checked for the right target and for stable behavior if the page layout or content changes. Assertions should verify a meaningful result, such as the expected confirmation or changed state, rather than merely repeating that an action occurred.

You can pause recording to inspect an element or debug in browser DevTools, then resume. This is useful when an interaction targets the wrong element or the page is in a transitional state. Studio AI recommendations can be affected by animation and transitions, so record from a stable UI state and review recommendations before keeping them.

Selectors: inspect what Studio generates

Studio selects a unique element using this documented priority order:

  1. data-cy
  2. data-test
  3. data-testid
  4. data-qa
  5. name
  6. id
  7. class
  8. tag
  9. other attributes
  10. nth-child

The generated selector is a convenience, not a guarantee that it matches your team’s testing conventions. Review it for uniqueness and durability. If your app has dedicated test attributes, use them consistently and check whether the generated command follows that convention. Cypress documents Cypress.ElementSelector as the API for changing selector preferences used by Studio and cy.prompt(); see the Studio guide for details.

When Studio may not fit

  • Component tests: Studio targets E2E tests, not Component Testing.
  • Cucumber-style tests: These are not supported by Studio.
  • Multiple origins: Studio cannot record interactions that cross origins. Split the flow or write the relevant commands and setup yourself using Cypress’s supported testing approach.
  • iframes and Shadow DOM: Studio does not support recording inside them. You will need to author the test using an approach appropriate to your application and Cypress’s supported APIs.
  • Large pages with AI: Studio AI may return no recommendations when a page exceeds its context window. Manual assertions remain an option.
  • Transient UI: Animation or a changing state can affect AI recommendations. Wait for a stable state and inspect the result.

Troubleshooting

Symptom Likely cause What to do
Studio does not appear or recording cannot start The project is offline or sourcemaps are unavailable. Check internet access and verify sourcemaps are enabled in the build served to Cypress. Most Cypress configurations enable them by default, but project settings can differ.
Cypress errors on startup after adding a Studio option The configuration includes the retired experimentalStudio option. Remove that option. Studio is available by default in current documentation.
AI recommendations are unavailable Studio AI requires Cypress 15.11.0 or later, a Cloud account, and a linked project. Check the Cypress version, sign in to Cypress Cloud, and link the project. If you do not need recommendations, use Studio with manual assertions.
No AI assertions are suggested The page may be too large for the AI context window, or the UI may be changing or animated. Record against a stable state, review after transitions finish, and add assertions manually when recommendations are absent or unsuitable.
A recorded action uses an unexpected selector The selected element did not match your preferred test attribute or selector convention. Inspect and edit the generated command. Check the selector preference order and Cypress’s Cypress.ElementSelector configuration guidance.
Recording fails on a portion of the flow The flow may cross origins or interact with an iframe or Shadow DOM. These contexts are outside Studio’s supported recording boundaries. Author that portion manually with a supported Cypress approach or restructure the test around supported contexts.
The saved test passes once but is fragile The recorded path may rely on transient content, brittle selectors, or actions without meaningful assertions. Replace fragile selectors where needed, wait for stable application state, and assert the outcome that matters to the user.

Performance, reliability, and maintenance

Studio speeds up the initial authoring of supported interactions, but it does not make the resulting test inherently reliable. Reliability depends on the application state, selector quality, and assertions. Review generated code for assumptions about timing, dynamic content, and element uniqueness before relying on it in a suite.

Use Studio to establish a first draft, then keep the spec focused: include the setup needed for the scenario, assert user-visible outcomes, and avoid adding unrelated recorded actions. If AI recommendations are slow or absent, the manual assertion workflow lets you continue without waiting for suggestions. Studio requires internet access; AI also depends on Cypress Cloud and a linked project.

Cypress documentation reviewed for this guide does not establish a Studio-specific execution speed benchmark or a separate Studio price. Avoid estimating time saved or treating recommendations as a substitute for review. Check current Cypress documentation for requirements and service terms before relying on version or account details.

Or skip the browser setup

If the job is to capture a webpage image or PDF for a test fixture, report, or agent workflow, ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. It complements Cypress Studio: Studio records E2E test interactions, while ScreenshotNeo returns a webpage screenshot or PDF from a URL. 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}`);

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 take screenshots. 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.

FAQ

Does Cypress Studio write test code or just record a replay?

It writes Cypress commands into the spec, and you can edit the resulting code inline.

Can I use Studio without Cypress Cloud?

Yes. Studio recording and manual assertions do not require Cloud. Studio AI recommendations do require a Cloud account and linked project.

Does Studio automatically explore every page in my app?

No. It records interactions you perform; Studio AI recommendations are based on UI changes it observes during that recording.

Is experimentalStudio still needed?

No. Current Cypress documentation says Studio is available by default and the old option is no longer used.

Primary references