Reading:
Getting Started With The Cypress Recorder
Share:

Getting Started With The Cypress Recorder

Ioan Solderea shows us how to get started with Cypress' new recorder features

What is Cypress?

At the time of writing this article there is hardly any test automation article, blog or conference that does not mention Cypress. Cypress has gained a lot of popularity in the field of testing in the last few years and is the go to tool for automation for a lot of testers.

However, what is Cypress and why is it so popular? 

To put it in a few words, Cypress is a desktop application, an Electron application to be more exact,  that is installed on your computer. It is a new standard in front-end testing that every developer and QA engineer should be aware of.

As for the reasons behind its popularity, I would say that it is a mixture of the below:

How to quickly install Cypress

In order to show how easy it is to get started with Cypress we will perform an installation from scratch on a Windows machine. 

The only prerequisites for the installation are :

Once you have the above installed you need to create a new folder on your machine and then open that folder in your IDE. With the IDE open type the following command in the terminal in order to create a new node project, and press enter

npm init

Now you will set up your node project with the help of the node utility. At this step you can either enter custom data for your project, leave the default on by pressing enter for each option.

package name: (cypressrecorder)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

Once you have entered all the information you just need to confirm and press enter again. Do not worry about the default, they can be changed at a later point if desired

Is this OK? (yes) y 

You will know that the process has completed successfully once you can see a package.json file in your project

A screengrab of Visual studio code that shows a folder named cypressrecorder and a file named package.json within the folder

For the next step we will actually install Cypress. In order to do this you will need to add the below command in the terminal and press enter

npm install --save-dev cypress@9.7.0 

Breaking the above command down…. Save-dev - will install cypress as a developer dependency and cypress@9.7.0 - Indicates the major version that you want to install. Once the installation has completed, Cypress is now installed and you are almost ready to use it. The only thing left is to start Cypress. In order to do this you need to run the below command and press enter. This might take a few minutes to start, depending if it is the first time you have started Cypress.

npx cypress open

Once Cypress has started you will see the below image and you can start to write and run tests in Cypress.

The initial view of Cypress when it starts up with tabs showing Tests, Runs and Settings. Also contains a banner saying "Welcome to Cypress" and guiding the user to a guide on the Cypress website to create their first test.

Using Cypress Recorder to help with your tests

Now that you have installed and started Cypress, the fun can begin, you can now write and record your own tests. However, like with every new tool there is a learning curve to take until you can actually become comfortable and in most cases the hardest part of the curve is actually getting started. ,

There are a few different ways that you can start creating a test in Cypress

  • You can read the whole “Getting Started” guide from the official Documentation
  • You can explore all of the examples under the Integration Test folder and figure out what each piece of code does
  • Or you could record a test from scratch and have code generated for you based on the actions taken in a webpage

Whilst we all learn differently for me the last one works best for both beginners into test automation but also for Cypress beginners. But before we can run the recorder we first need to do some groundwork.. 

Install the recorder

In order to use the recorder in our Cypress test we need to tell Cypress that we want to activate it. For the activation we first need to locate the cypress.json file in the project and open it ( it should be empty)

A snippet of a visual studio file explorer that shows the folders cypress and node_modules followed by files named cypress.json, package-lock.json and package.json. Cypress.json is selected.

 

To complete the installation we need to add the following entry in the file and save.

{
    "experimentalStudio": true
}

See the recorder

The installation/activation process for the recorder was fast and easy but in order to see the recorder we need to run a test in Cypress. As stated previously we will create a test from scratch and then run it. In order for Cypress to see tests they need, per default, to be located in the integration folder (which is inside the cypress folder).

A snippet of visual studio file explorer with the folder cypress open containing folders named downloads, fixtures, integration, plugins, support. Integration is highlighted

Open the folder and add  file there with the name specs.js as below

A snippet of the file explorer in visual studio that shows the integration folder expanded showing the folders 1-getting-started and 2-advanced-examples and a file named cypressStudio.specs.js

In the specs.js file that you created you need to add the below code

describe('My First Test', () => {
    it('Visit MOT', () => { 
        //The test code goes here   
    })    
})

Again, breaking this command down…. The ‘describe’ block - contains the group of tests and the ‘it’ block contains the actual test code. Once you have added the code in the specs file you can run the test in Cypress by clicking the file ( cypressStudio.specs.js) in the below image

A view of Cypress studio with the spec file cypressStudio.specs.js selected

That will run the test and once the test run has been performed you can see a magic wand if you hover the test. That magic wand is the indication that the Recorder is active and can be used

An example of a test run of cypressStudio.spec.js in which the magic wand icon on the top right is highlighted

Explore the recorder

Now that we know that the recorder is activated the next step is to use it to update a test.

Update a test

To update an existing test we need to click on the magic wand

A screenshot of the cypressStudio.specs.js file within Cypress in which the magic wand is highlighted showing a message saying Add Commands to Test 

Since we are not performing any actions in the test so far the Cypress Recorder will ask us to enter a url for it to load. I will paste the Restful Booker Url, https://automationintesting.online/#/, and click on Go.

A screengrab of a browser showing the url automationintesting.online with a popup saying please enter a valid URL

Once you click on Go the test will restart and navigate to the given URL in the browser. Now at this point the recorder is still running and every action taken on the page will be transformed into Cypress code.

Go ahead and enter values in all of the fields. After that click on the Save Commands button.

A view of Cypress containing various recorded steps that were captured as automationintesting.online was interacted with

This will run the test again with all of the values that you entered before. However this is not all that the Recorder has done. If you open the specs file you will see that it has now been filled with a number of recorded actions.

describe('My First Test', () => {
    it('Visit MOT', () => {
        /* ==== Generated with Cypress Studio ==== */
        cy.visit('https://automationintesting.online/#/');
        cy.get('[data-testid="ContactName"]').clear();
        cy.get('[data-testid="ContactName"]').type('TestName');
        cy.get('[data-testid="ContactEmail"]').clear();
        cy.get('[data-testid="ContactEmail"]').type('email@resterTest.com');
        cy.get('[data-testid="ContactPhone"]').clear();
        cy.get('[data-testid="ContactPhone"]').type('1234567890');
        cy.get('[data-testid="ContactSubject"]').clear();
        cy.get('[data-testid="ContactSubject"]').type('Test');
        /* ==== End Cypress Studio ==== */
    })
})

Generate a new test

Having updated an existing test case it is time to go to the next step and make the recorder generate a full new test for us. To add a new test we need to click on another magic wand, the one located on the group level.

An example of cypressStudio.specs.js in which the magic wand in the top right is highlighted revealing the message Add New Test

Since we are creating a test from scratch the Cypress Recorder will ask us again to enter a url for it to load. I will paste the RestfulBooker Url, https://automationintesting.online/#/, and click on go.

A screengrab of a browser showing the url automationintesting.online with a popup saying please enter a valid URL

Once you click on Go the test will restart and navigate to the given URL. Since this is a new test we will do something different than before and first click on the Submit button. Once we do that we should see a list of Errors and we will want to assert that a specific entry is present.

A view of automationintesting.online in which a Cypress popup has been opened which offers the option Add Assertion

In order to do this we need to right click on the section that we want to check and select the be visible option. After that click on the Save Commands button. Now before you can actually save the commands to your code you will need to give a name to your new test and then most importantly save the test.

A screenshot of cypress that shows a popup requesting the user to save the new test and give it a test name

This will run the both tests with all of the values that you entered before and with the assertion. In addition if you open the specs file you will see that there are two tests.

describe('My First Test', () => {
    it('Visit MOT', () => {
        /* ==== Generated with Cypress Studio ==== */
        cy.visit('https://automationintesting.online/#/');
        cy.get('[data-testid="ContactName"]').clear();
        cy.get('[data-testid="ContactName"]').type('TestName');
        cy.get('[data-testid="ContactEmail"]').clear();
        cy.get('[data-testid="ContactEmail"]').type('email@resterTest.com');
        cy.get('[data-testid="ContactPhone"]').clear();
        cy.get('[data-testid="ContactPhone"]').type('1234567890');
        cy.get('[data-testid="ContactSubject"]').clear();
        cy.get('[data-testid="ContactSubject"]').type('Test');
        /* ==== End Cypress Studio ==== */
    })

    /* ==== Test Created with Cypress Studio ==== */
    it('Assertion', function() {
        /* ==== Generated with Cypress Studio ==== */
        cy.visit('https://automationintesting.online/#/');
        cy.get('#submitContact').click();
        cy.get('.alert > :nth-child(1)').should('be.visible');
        /* ==== End Cypress Studio ==== */
    });
})

Limitations

Like all good things there are certain limitations that need to be clearly known in order to have correct expectations from the Cypress Recorder.

A snapshot of Cypress showing an AssertionError stating that the script timed out trying to find the element #submitContact2
  • The Recorder can only update tests that have passed. In case your test fails then you will not be able to see add a new command to the test. Cypress indicates this clearly in case you try to use the Recorder in a failing test
  • There are a limited number of actions that you can perform with the Recorder on a page:
    • clicking buttons
    • select elements
    • typing text
    • checking and uncheck radio buttons
  • In case there are actions that the Recorder cannot recognize like iframe interaction then you will need to add those yourself.
  • In case there are steps that are performed several times during the recording you will end up with duplicated code that you will need to refactor the code and make it DRY.

Final thoughts

Even though there are some limitations of the Cypress Recorder I consider it a very useful means to start learning test automation with Cypress. Its ease of use and user-friendly interface allows even a total beginner to write a test with multiple assertions in a matter of minutes. Once a test has been saved you can customize it based on your style and desires and have a full set of end to end tests in no time. Give the tool a go and write in the MOT discussion section what your thoughts are on the Cypress Recorder.

 

Further resources

Ioan Solderea's profile
Ioan Solderea

Lead QA

I am one of those people who want to know all about all but will also be happy knowing a lot about a lot. Because of this I choose to be a tester since you get to learn always new technologies, you get to test in the most diverse areas and it is always fun to tell people you found a bug.



Hello, Cypress! - Kate Nesmyelova
Kristof meets Julie Fuelberth and Aaron Stearns from Ranorex
Patterns of a “good” Test Automation Framework, Locators & Data! - Anand Bagmar
Feature Spotlight: Cypress Recorder - Single Test
Staying Tool Aware with Sujith Sukumaran
Launchable Demo
Experience Reports - Teams Challenge
Tighten Your Test Automation Feedback Loop
Experience Reports - JavaScript Edition
Explore MoT
TestBash Brighton 2024
Thu, 12 Sep 2024, 9:00 AM
We’re shaking things up and bringing TestBash back to Brighton on September 12th and 13th, 2024.
MoT Intermediate Certificate in Test Automation
Elevate to senior test automation roles with mastery in automated checks, insightful reporting, and framework maintenance