2026-01-176 min read

Edit in Studio button on a Cypress test

Q: Q: How do I handle asynchronous actions in my tests?

Cypress provides several methods like `cy.wrap()`, `cy.task()`, and `cy.then()` to handle asynchronous actions in your tests. You can learn more about them in the official Cypress documentation (https://docs.cypress.io/api/api/commands).

Learn Edit in Studio button on a Cypress test step by step with clear examples and exercises.

Title: Edit in Studio button on a Cypress test - Automated Testing with JavaScript

Why This Matters

In web development, ensuring your application works as expected is crucial. Manual testing can be tedious and time-consuming, leading to potential oversights. Automated testing using tools like Selenium, Cypress, Playwright, etc., helps streamline this process, saving you valuable time and resources. In this lesson, we'll focus on the Edit in Studio button on a Cypress test, which can help expedite your test authoring and reduce gaps in coverage.

Cypress is an end-to-end testing solution that runs in the browser and allows you to write tests in JavaScript. One of its powerful features is Cypress Studio, which lets you record real interactions in your app and generate E2E tests. Studio AI adds a layer on top: as you record, it watches what changes in the UI and recommends assertions automatically. You review them, keep what fits, and save.

Prerequisites

To follow along with this tutorial, you should have:

Basic understanding of JavaScript
Familiarity with Node.js and npm (Node Package Manager)
Knowledge of Cypress test runner (https://www.cypress.io/)
A code editor like Visual Studio Code or Atom installed on your machine
Understanding of how to start a local web server using either Node.js (http-server) or Python (built-in HTTP server)
Familiarity with HTML and CSS

Core Concept

To use Cypress Studio, follow these steps:

Install Cypress by running npm install cypress in your project directory.
Open the Cypress Test Runner (cypress open) in your code editor.
Click on the "Record" button in the top right corner of the Test Runner.
Interact with your application as you would normally, and Cypress will record your actions.
Once you're done recording, click on the "Stop Recording" button.
You can now see a new test file created for you in the cypress/integration folder.
Review the generated code and make any necessary adjustments or add assertions as needed.

Worked Example

Let's create a simple example using Cypress Studio:

Create a new HTML file named example.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example</title>
<style>
.clicked {
color: red;
}
</style>
</head>
<body>
<h1 id="welcome">Welcome to my example app!</h1>
<button id="clickMe">Click me!</button>
</body>
</html>

Create a new Cypress test file named example_test.js in the cypress/integration folder with the following content:

describe('Example App', () => {
it('clicks the button', () => {
cy.visit('http://localhost:8080') // Replace with your server's port if different

// Click the "Record" button in Cypress Studio and interact with the app
cy.get('#clickMe').click() // This action will be recorded by Cypress Studio
})

it('checks if the welcome text changes', () => {
cy.visit('http://localhost:8080')
cy.get('#welcome').should('have.class', 'clicked')
})
})

Start a local web server to serve your HTML file:

For Node.js, install http-server globally (npm install http-server) and run http-server example.html.
For Python, use the built-in HTTP server by running python3 -m http.server 8080 and open example.html in your browser at http://localhost:8080.

Open the Cypress Test Runner (cypress open) and click on the "Record" button. Interact with the app by clicking the "Click me!" button. Once you're done, click on the "Stop Recording" button.

Review the generated code in example_test.js. You should see that Cypress has added an assertion to check if the button was clicked successfully and another one to check if the "Welcome to my example app!" header text changes after clicking the button:

describe('Example App', () => {
it('clicks the button', () => {
cy.visit('http://localhost:8080') // Replace with your server's port if different

cy.get('#clickMe').click()
cy.get('#clickMe').should('have.class', 'clicked')
})

it('checks if the welcome text changes', () => {
cy.visit('http://localhost:8080')
cy.get('#welcome').should('have.class', 'clicked')
})
})

Common Mistakes

Not stopping the recording after interacting with the app: Make sure to click on the "Stop Recording" button in the Cypress Test Runner once you're done.
Forgetting to visit the correct URL before interacting with elements: Ensure that the cy.visit() call is pointing to the correct URL where your application is running.
Ignoring AI assertion recommendations: Review the generated assertions and keep those that fit your test case.
Failing to handle asynchronous actions: Learn about Cypress's methods like cy.wrap(), cy.task(), and cy.then() to handle asynchronous actions in your tests. (https://docs.cypress.io/api/api/commands)
Not properly closing the local web server after running tests: Make sure to stop the web server before running subsequent tests or when you're done testing.

Practice Questions

Write a Cypress test for a login form with email, password fields, and a submit button using Cypress Studio.

Visit your application's login page.
Fill in the email and password fields with sample values.
Click the "Submit" button.
Assert that you are redirected to the homepage or dashboard.

Modify the example test to include an additional assertion checking if the "Welcome to my example app!" header text changes after clicking the button and logging in:

Add a login function that fills in email, password fields, and clicks the "Submit" button.
After logging in, add an assertion to check if the "Welcome to my example app!" header text changes.

FAQ

Q: Can I use Cypress Studio without a Cloud account or AI?

A: Yes, Studio alone does not require a Cloud account or AI to be useful. You can record interactions and add assertions manually at any time. AI-powered recommendations are an opt-in layer that requires a Cypress Cloud connection.

Q: How do I handle asynchronous actions in my tests?

A: Cypress provides several methods like cy.wrap(), cy.task(), and cy.then() to handle asynchronous actions in your tests. You can learn more about them in the official Cypress documentation (https://docs.cypress.io/api/api/commands).

Q: How do I run my Cypress tests on a continuous integration (CI) server?

A: To run Cypress tests on a CI server, you can use tools like Mochawesome Reporter to generate report files that can be easily consumed by your CI system. You'll also need to configure the CI environment with the necessary dependencies and scripts. Learn more about this in the official Cypress documentation (https://docs.cypress.io/guides/getting-started/writing-tests#Running-on-a-CI-Server).

Q: How do I debug my Cypress tests?

A: Debugging your Cypress tests can be done using the Chrome DevTools, which are accessible through the Cypress Test Runner. You can also use console.log() statements in your tests to inspect variables and check the state of the application at different points during test execution. Learn more about this in the official Cypress documentation (https://docs.cypress.io/api/api/commands#console-log).

Q: How do I share my Cypress tests with others?

A: To share your Cypress tests with others, you can commit them to a version control system like Git and push them to a repository. You may also want to consider using test isolation tools like cypress run or Cypress Dash to ensure that your tests are isolated from each other during execution. Learn more about this in the official Cypress documentation (https://docs.cypress.io/guides/getting-started/sharing-your-work).