Skip to main content
Cypress App
End-to-End Only

Cypress Studio

info
What you'll learn​
  • How to generate Cypress tests by interacting with your app
  • How to add assertions by right-clicking elements
  • How to quickly extend or edit tests without leaving Cypress

Why Use Cypress Studio​

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.

  • 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

🚀 Quickstart: Try Studio in 60 Seconds​

success

  1. Run a Spec: Open Cypress and run a spec file

  2. Open Studio: Click Edit in Studio on a test in the Command Log or click Studio Beta in the Studio panel.

  3. Interact & Save: Click, type, and right-click to add assertions. Click Save to save your test.

How Cypress Studio works​

When Studio is enabled, you can:

  • 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(), .type(), .check(), .uncheck(), .select()

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.

Record a new test​

  1. Click New Test on the file or suite you want to work in
  2. Give your test a clear, descriptive name

Studio will automatically create a new test definition for you.

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

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

Studio translates your actions into Cypress commands in real time.

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.

Default Selector Priority​

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

Want more control? Use the Cypress.ElementSelector API to customize selector priority for your project.

Limitations​

  • Works only in E2E tests (Component Testing not yet supported)
  • Cucumber tests are not yet supported
  • Cannot record across multiple origins.
  • See issues labeled with experiment: studio for other known issues.

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.

Join the waitlist ➜
Cypress AI in Studio generating assertions

See also​

Contents