Getting Started With The Cypress Recorder

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:

• Free - Cypress is free but there are some paid features, like the Dashboard which can provide extra structure and reporting for your tests
• Easy to install  - Currently Cypress supports the following operating systems
  • macOS 10.9 and above (64-bit only)
  • Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
  • Windows 7 and above (64-bit only)
• Features aimed at reducing automation pain points - For example “Automatic waiting” - Cypress automatically waits for commands and assertions before moving on
• Support for different testing types
  • Component testing
  • API testing
  • E2E testing 
• Good community support
  • https://www.cypress.io/support/
  • https://stackoverflow.com/questions/tagged/cypress
• Good and up to date documentation
  • https://docs.cypress.io/guides/overview/why-cypress

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 :

• IDE ( I will use Visual Studio Code - https://code.visualstudio.com/ ) 
• Node JS - https://nodejs.org/en/ .

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

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.

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)

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).

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

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

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

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

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.

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.

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.

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.

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.

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.

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.

• 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

• Introduction to Cypress by Marie Drake