Cypress Studio: Record Your First E2E Test

To record your first end-to-end test with Cypress Studio, open the Cypress Test Runner, launch a browser, click the “Add New Test� button in the Studio toolbar, then interact with your app while Cypress records your actions as test code. This guide explains the full workflow, prerequisites, and tips for getting reliable, maintainable tests from the recorder.

What Is Cypress Studio?

Cypress Studio is a built-in feature (available since Cypress 9.3.0) that lets you create end-to-end tests by simply interacting with your application. Instead of writing every command manually, you click, type, and navigate in the browser, and Cypress generates the corresponding test code in real time. It’s especially useful for beginners, for quickly prototyping a test, or for exploring an app you didn’t write.

Studio works with the Cypress Test Runner (the interactive GUI) and is not available in headless mode. You can use it to create new tests or to extend existing ones. The generated code is standard Cypress commands (like cy.visit(), cy.get(), cy.click()), so you can edit or refactor it later just like any other test.

Prerequisites and Setup

Before you start, you need:

• Cypress 9.3.0 or later – check with npx cypress --version. If you’re on an older version, update to the latest stable release.
• A running application – either a local dev server or a publicly accessible URL. Cypress can visit any URL, but it must be reachable from the machine running Cypress.
• An existing Cypress project – if you haven’t set one up, run npx cypress open in your project folder and follow the prompts to create the default cypress/ folder structure.

No extra plugins or configuration are required. Studio is enabled by default in the Test Runner. If you don’t see the Studio toolbar, make sure you are using a recent version and that you’re in the “E2E Testing� view (not Component Testing).

Step-by-Step: Recording Your First Test

1. Launch Cypress – in your terminal, run npx cypress open and choose “E2E Testingâ€�.
2. Select a browser – pick Chrome, Edge, or Electron. Firefox also works, but some commands may behave slightly differently.
3. Create a new spec file – in the Test Runner, click “Create new specâ€� and give it a name like my-first-studio-test.cy.js. Cypress will create the file and show it in the list.
4. Open the spec – click on the spec file name. The browser window will open and show your application (or a blank page if your baseUrl is not set).
5. Click “Add New Test� – in the toolbar at the top of the browser, click the “Add New Test� button. This enters Studio mode.
6. Interact with your app – click buttons, type into fields, navigate to pages. Each action is recorded as a Cypress command. You’ll see the commands appear in a small panel on the right.
7. Add assertions (optional) – right-click on any element and choose “Add Assertion� to check its text, visibility, or other properties.
8. Finish and save – click “Save Test� in the Studio toolbar. Give the test a name, then Cypress writes the code to your spec file.

That’s it – you now have a working E2E test. You can run it anytime by clicking the spec in the Test Runner or via npx cypress run.

Understanding the Generated Code

Studio produces plain Cypress commands. For example, if you visited https://example.com, clicked a link, and typed into a search box, the generated test might look like this:

it('my first studio test', () => {
  cy.visit('https://example.com')
  cy.get('a').contains('More information').click()
  cy.get('input[type="search"]').type('cypress studio')
})

Studio uses the same selectors you would write manually – often CSS selectors, but sometimes more specific ones like data-cy attributes if they exist. The code is saved directly into your spec file, so you can review, edit, or reorganize it as needed.

One thing to note: Studio records the exact sequence of your actions, including any waits or delays. It does not automatically add assertions for page loads or content changes. You may want to add explicit assertions yourself to make the test more robust.

Tips for Reliable Recorded Tests

• Use stable selectors – Studio often picks generic selectors like .btn or div.container. If possible, add data-cy attributes to your elements before recording – they make tests far less brittle.
• Record one logical flow per test – keep tests focused on a single user journey (e.g., login, search, add to cart). This makes failures easier to diagnose.
• Add assertions – Studio can add assertions on right-click, but it’s a good habit to verify key outcomes (e.g., “Welcomeâ€� text appears after login).
• Edit the generated code – after saving, review the test. Remove any unnecessary steps or hard-coded waits. Studio does not add cy.wait() by default, but if you pause too long, you might get implicit waits that slow the test.
• Run the test multiple times – a test that passes once might fail on a second run due to timing or state. Run it a few times to check stability.

Common Problems and How to Fix Them

Problem: Studio doesn’t record my clicks. This usually happens if the element is not visible or is covered by another element. Make sure the app is fully loaded and the element is clickable. Also check that you’re in the correct browser – some older Electron versions have issues.

Problem: The generated test fails when run later. The most common cause is a change in the app’s UI (different text, new element, changed URL). Studio records the exact state at the time of recording. If your app is dynamic, add more robust assertions or use cy.intercept() to wait for network responses.

Problem: Studio is not available in my Cypress version. Upgrade to the latest Cypress. Studio is a stable feature since 9.3.0. If you’re on an older version, update with npm install -D cypress@latest.

Problem: The test is too slow. Studio sometimes records extra commands like cy.scrollTo() or cy.wait() if you scroll or pause. Remove those if they aren’t necessary. Also, avoid using cy.pause() in recorded tests – it will stop the test until you manually resume.

Studio vs. Writing Tests Manually

Studio is great for getting started quickly, but it’s not always the best choice for every situation. Here’s a quick comparison:

• Speed of creation – Studio is faster for simple flows, especially if you’re not familiar with Cypress syntax.
• Maintainability – Hand-written tests are often more maintainable because you can design them with reusable functions and clear assertions from the start.
• Selector quality – Studio picks selectors automatically, which may not be the most stable. Hand-written tests let you choose better selectors (like data-cy).
• Learning curve – Studio can help you learn Cypress commands by seeing what it generates, but you still need to understand the commands to debug or extend tests.

Many teams use Studio for prototyping or for non-technical testers, then refine the generated code later. It’s a complement to, not a replacement for, writing tests manually.

Frequently Asked Questions

Can I use Cypress Studio in headless mode? No. Studio requires the interactive Test Runner because it records your manual actions. You can run the generated tests in headless mode, but you cannot record them there.

Does Studio work with React, Vue, or Angular? Yes, Studio works with any JavaScript application because it interacts with the DOM, not the framework. It will record clicks, typing, and other events regardless of the underlying framework.

Can I record a test that involves file uploads? Yes, but with limitations. Studio can record cy.get('input[type=file]').attachFile() if you have the cypress-file-upload plugin installed. Without the plugin, you may need to add the upload step manually.

How do I add an assertion during recording? Right-click on an element and select “Add Assertion�. You can then choose from common assertions like “visible�, “contain text�, or “have value�. You can also edit the assertion in the generated code later.

Is Cypress Studio free? Yes, it’s a built-in feature of the open-source Cypress Test Runner. No additional license or payment is required.

Can I use Studio to modify an existing test? Yes, open the spec file in the Test Runner, then click “Add New Test� – but instead of creating a new test, you can also click on an existing test name and then click the “Edit� button (pencil icon) to re-record or add steps. Studio will append new commands to that test.

Related

• Why GTA Rarely Appeared on Nintendo Consoles
• Mass to Volume Calculator: Step-by-Step Guide
• Automatically Grade Google Forms: How-To

in t | Finish time | min | 50 | 0
in d | Distance | km | 10 | 0
out pace | Average pace | min/km | t / d | 2
out speed | Average speed | km/h | d / (t / 60) | 2