Now that we have created our first command, it's time for us to proceed to the next ones.
Cypress has this really neat feature that can help us make it easier - it's called Cypress Studio.
If we go to the "Settings" and take a look at "Project settings", we can get a nice overview of what we have set up in the Cypress config.
Since there's not much happening in here, just a baseURL
and viewportHeight
and viewportWidth
, we can take a look into this panel and see all the defaults.
One of the interesting parts of the defaults is these Experiments.
Cypress Studio - that I mentioned - is part of these.
Let me go ahead and enable this in my settings with experimentalStudio: true
.
As soon as I do that, Cypress is going to restart.
I will open my spec, and at a first glance, nothing much has changed.
But, when I hover over the name of my test, I now have this magic wand icon.
So I can add commands to my tests.
When I click that, Cypress is going to rerun my test and I can now start interacting with my page.
Whenever I click on anything, it's going to get recorded into my timeline.
If I go ahead and create a new list and hit "enter", everything is going to get recorded.
When I click on "Save Commands", Cypress is going to rerun my test.
Of course, now it's going to fail, because the state of my application has changed.
Normally, when my board doesn't contain any new lists and I open it, this "Enter list title…" field is going to automatically show.
This is why record and replace tools can be helpful, but only up to a point - that point is usually data management.
But it's still a useful feature.
Let's now take a look into what has happened in our spec file.
If I go back, I can see that I have some commands that were generated with Cypress Studio.
I have clicked on my h2 element, then selected an input element, which I cleared, and then typed into it.
This clear('n')
doesn't really make sense, and it's a good testimony into the fact that the Cypress Studio is still an experimental feature.
The inevitable step after we record our test is to enhance it.
But of course, depending on the application, it can get you pretty far.