Experimenting with Cypress Studio

I have been exploring Cypress Studio, one of Cypress' experimental features and I have to say that this is currently one of my favourite features at the moment. It's perfectly suitable for beginners and to anyone who wants to quickly automate some tests with less or no coding at all.

In this blog post, I'll give you an overview as to what Cypress Studio is, how to integrate it on your projects, some limitations that you need to be aware of and an in-depth look at its features.

Cypress Studio

Cypress Studio lets you write automated tests with minimal coding by recording your interaction to the application under test. Think of Cypress Studio as Cypress' version of Selenium IDE. It's essentially a record and playback tool so you can write automated tests quicker, especially the repetitive steps! Cypress Studio automates most of the steps required to interact with your application such as clicking buttons, typing strings to an input field, checking radio buttons and selecting options from a drop down menu. Apart from these interactions, Cypress Studio also lets you write assertions quickly.

Enabling Cypress Studio

Since this is still an experimental feature, a minimal configuration is required and when I say minimal, it's really minimal! On your cypress.json, you just need to set the `experimentalStudio` key to be true. The other requirement is that you should have installed a later version of Cypress as this was introduced on version 6.3.0.

Setting experimentalStudio to true in your cypress.json

Writing Tests with Cypress Studio

There are a couple of ways to get started with Cypress Studio.

You can start by updating an existing test or use Cypress Studio to add a new test from scratch. Whichever way you choose, you should see an icon that looks like a magic wand beside the test name, as seen from the screenshot below.

Enable Cypress Studio by clicking on the Add Commands to Test icon

When you click this icon, this will enable the Cypress Studio feature.

Cypress Studio feature enabled

After this, interact with your application just like you would normally do and Cypress will automatically generate the commands. For this test, I have clicked the search input, typed the keyword pancakes and hit enter. This has generated a couple of steps on the studio commands view as seen from the screenshot below.

Automatically generated commands from Cypress

You can then either copy these commands or save it. When you save the commands, these will be added to your test. The example that I demonstrated is pretty simple but imagine the time that you can save! This is particularly useful if you just want to quickly verify a feature with minimal amount of effort.

Cypress Studio commands added to your test automatically

If you also want to write assertions quickly, you can also do this by right clicking on the element that you want to assert and then select from the pre-generated assertions that Cypress Studio can detect.

Generate assertions automatically from Cypress Studio

Limitations

As it's a record and playback tool, there are of course some limitations to Cypress Studio. If you want to write more complex tests where you need to intercept network connections and either spy or stub some API calls, this is not possible. Apart from assertions, Cypress Studio can only support the following commands (for now!):

• .click()

• .type()

• .check()

• .uncheck()

• .select()

Wrapping up

Cypress Studio is a great tool for generating code for your automated tests quickly. If you want to quickly verify your website's features and don't want to write some code, then give this a try. To find out more information about this feature, check out Cypress Studio's official documentation.