Recording a Cypress Test with Cypress Studio

Introduction

Cypress Studio is tool that is packaged with Cypress, and allows you to record a Cypress test while interacting with your application. As of this writing, Cypress Studio is still an "experimental feature".

Let's take a look at how it works.

To Record or not to Record?

Record and playback capabilities are common with test automation tools. Like any tool in your toolbox, there are times to use it and times to avoid it.

For me, the recorder is the right tool when I want to:

• get a better understanding of the tool's scripting syntax
• identify element locator options
• create a quick 1-time-use automation script

For me, the recorder is the wrong tool if I want to:

• create a maintainable test automation suite via recording only

I have seen record/playback used to create an entire test automation suite. It was chosen as an "inexpensive" way to quickly get test automation off the ground and providing value.

Unfortunately the maintenance costs associated with this decision quickly overtook any savings, mainly due to element locator strategies that became invalid over time. Eventually the whole thing was scrapped.

If you are planning to use recorded automation code in your test automation suite, think very carefully about the long term cost of that decision. Ok, I will get off my soapbox. Let's record a test!

Record a test

Step 1 is to enable Cypress Studio. You can do that with a simple update to your cypress.json file:

"experimentalStudio" : true

You can then launch Cypress Studio after running a test in Test Runner. In this example I am going to record a new test, so after running a test I click this interesting little icon to the right of my test suite name:

The welcome page displays:

I click the "Get Started" button above and I'm then prompted to enter the URL I want to visit. The recording is starting!

After clicking "Go" above I'm in Cypress Studio. I can interact with the application and it will record my actions.

I can add a new todo and things start to get interesting. I am eventually going to need to "cut the grass", so let's add that. Note that my actions are recorded in Cypress lingo in the "Studio Commands" section of the left panel:

I also would like to assert that the item I added is the last one on the list. I can do that right-clicking on the object I want to assert and then describing the assert:

So now my commands look like this:

I'm going to click the blue "Save Commands" button and name the test. Here's what my recorded test looks like:

/* ==== Test Created with Cypress Studio ==== */
  it('my new recorded test is fresh', function() {
    /* ==== Generated with Cypress Studio ==== */
    cy.visit('http://localhost:3000/');
    cy.get('input').clear();
    cy.get('input').type('Cut the grass');
    cy.get('form > button').click();
    cy.get(':nth-child(1) > span').click();
    cy.get('.done').click();
    cy.get('#app').click();
    cy.get(':nth-child(2) > span').should('have.text', 'Cut the grass');
    /* ==== End Cypress Studio ==== */
  });

There we go, a recorded test. When I run it, I am pretty confident it will pass. These recorded tests always start out great!

This test looks shady

Let's take a closer look at lines 2 and 3 of this test:

cy.get('input').clear();
cy.get('input').type('Cut the grass');

"cy.get('input')" is getting the <input> field and entering the new ToDo. This works fine if the new ToDo is always the ONLY <input> field, but what if that changes in the future? This test is brittle and will fail.

Cypress Best Practices to the rescue!

If you checkout out the Cypress Best Practices page you'll see this:

The above is a screen shot from the Cypress website. If you take nothing else from this blog post, please remember these best practices regarding element selectors.

So our recorded element is not ideal, but really what else could the recorder do? It really has nothing else to work with. Fortunately, WE can help the recorder. As mentioned in the best practice, let's go into the code and tag that control with a data-* attribute:

Let's record again, after adding the new attribute:

As you can see, Cypress Studio is smart enough to use the data-* attribute as the locator. Adding those locators to your code will make your recorded tests, and your manually created tests, much less brittle.

Wrap-up

So in conclusion:

• Cypress Studio is a great tool when used for the right purpose
• don't use brittle locators in your application, instead use the data-* attribute

Check out the Cypress Studio doco for more details regarding Cypress Studio.

Also, I know there are some Chrome plug-ins that support recording Cypress tests. I have not looked at those, but I may take a look in the future.

And finally, to get notifications for my future posts, feel free to subscribe to my blog site. Thanks!