DEV Community

Cover image for Recording a Cypress Test with Cypress Studio
Dennis Whalen for Leading EDJE

Posted on

6 2

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
Enter fullscreen mode Exit fullscreen mode

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:

Image description

The welcome page displays:

Image description

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

Image description

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

Image description

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:

Image description

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:

Image description

So now my commands look like this:

Image description

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 ==== */
  });
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

"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:
Image description

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:

Image description

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

Image description

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!


Smart EDJE Image

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay