Cypress Studio provides a visual way to generate tests within the Test Runner, by recording interactions against the application under test. This is an experimental feature, hence you have to add experimentalStudio attribute in your cypress.json file like this:

1
"experimentalStudio": true

 
At the time of writing this article (Cypress v6.4.0) cypress studio supports only these commands – .click(), .type(), .check(), .uncheck(), and .select()

cypress studio available commands

Let’s automate a simple login and logout scenario using cypress studio.

Step 1: Create a spec file with the following code. Here we have just one it block and inside that we are visiting the URL.

1
2
3
4
5
6
describe('Example to Demonstrate Cypress Studio', () => {

    it('Extend Test via Cypress Studio', () => {
        cy.visit('https://opensource-demo.orangehrmlive.com/index.php/dashboard')
    })
})

cypress studio preexisting test

Step 2: Now run the spec file using the cypress open command:

1
npx cypress open

 
Step 3: Once the website is loaded, hover over the Command Log to reveal an “Add Commands to Test” button and then click on it. The cypress studio would be launched.

Add commands to test button in cypress studio

Step 4: Now once the cypress studio is enabled we will just be interacting with the web elements and our code will be automatically generated. For this step, we will click on the username field and then write ‘Admin’.

cypress studio click and write username

As you can see in the screenshot that our click and type actions were recorded successfully.

Step 5: Next step we click on the password field and type ‘admin123’.

cypress studio click and write password

Step 6: Next we will click on the ‘Login’ button and then the ‘Logout’ button.

cypress studio login and logout

Step 7: Next, we will click on the ‘Save Commands’ button and the test code will be saved to our spec file.

cypress studio save commands

Step 8: Open your spec file and checkout the generated code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
describe('Example to Demonstrate Cypress Studio', () => {

    it('Extend Test via Cypress Studio', () => {
        cy.visit('https://opensource-demo.orangehrmlive.com/index.php/dashboard')
        /* ==== Generated with Cypress Studio ==== */
        cy.get('#divUsername > .form-hint').click();
        cy.get('#txtUsername').type('Admin');
        cy.get('#txtPassword').type('admin123');
        cy.get('#btnLogin').click();
        cy.get('#welcome').click();
        cy.get('#welcome-menu > :nth-child(1) > :nth-child(2) > a').click();
        /* ==== End Cypress Studio ==== */
    })
})

generated code with cypress studio

After Execution:

Successful Test Execution for cypress studio generated code
 
Update 31 Jul 2022: With version 10 cypress has removed cypress studio completely. But the good news is, there is now an open source alternative – Cypress Recorder.

To install the plugin:

1
npm install -D @deploysentinel/cypress-recorder

Add the plugin to your cypress.config.js file:

1
2
3
4
5
6
7
8
9
10
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // Add plugin import here 👇
      require("@deploysentinel/cypress-recorder")(on, config);
    },
  },
});

To use the recorder, you have to run cypress in Open mode. If everything is set up correctly, you should see a record button like this:

record button for cypress recorder

Once you click on the Record button an overlay bar would be opened and the screen will be ready to record the user interactions:

record start for cypress recorder

On Opening the overlay you can see the features that this plugin provides:

1. It gives you the Human readable user actions and the generated code, just with a click of a button.

Cypress Recorder code

Cypress Recorder user actions

2. It also gives you the option for capturing screenshot, end recording and copy code.

cypress recorder features

3. Apart from cypress, it also allows you to generate codes for Playwright and Puppeteer as well.

code generate for playwright with cypress recorder

Once the recording is complete, we can simply copy the code and add it to our test file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
it('Written with DeploySentinel Recorder', () => {
  // Load "https://opensource-demo.orangehrmlive.com/index.php/dashboard"
  cy.visit('https://opensource-demo.orangehrmlive.com/index.php/dashboard')

  // Resize window to 1000 x 660
  cy.viewport(1000, 660)

  // Click on <input> #txtUsername
  cy.get('#txtUsername').click()

  // Fill "Admin" on <input> #txtUsername
  cy.get('#txtUsername').type('Admin')

  // Click on <input> #txtPassword
  cy.get('#txtPassword').click()

  // Fill "admin123" on <input> #txtPassword
  cy.get('#txtPassword').type('admin123')

  // Click on <input> #btnLogin
  cy.get('#btnLogin').click()

  // Click on <a> "Welcome Paul"
  cy.get('#welcome').click()

  // Click on <a> "Logout"
  cy.get('[href="/index.php/auth/logout"]').click()
})

cypress code generated by cypress recorder

With this plugin you can do all user interaction which you could do with cypress studio like type, click, select, check, uncheck etc. Also like cypress studio with this plugin you cannot create assertions as of writing this article. But I hope this might change in future.

Do check out 🙂

Github: https://github.com/alapanme/Cypress-Automation
All Cypress Articles: https://testersdock.com/cypress-tutorial/