Automating your Automated Tests with Cypress Studio
I’ve been a Web Dev for awhile now, and one pain point I’ve faced repeatedly is front-end automated testing. I have used Jest and Mocha, and while they are useful, they don’t scratch the itch that my application is being tested well-enough
Luckily, Cypress has come into the fold as of late, providing a solution for end-to-end testing. What is end-to-end testing? In a nutshell, Cypress will click around your web application for you, and if you so desire, will send actual network requests to your server or database and wait for responses. It’s pretty amazing.
After writing a few Cypress tests, I was very happy with my results, but noted that it is still cumbersome to write the test setup to click around my UI. Then I found Cypress Studio, a way to automate (most of) your automated test writing.
Cypress Studio
Cypress Studio is an experimental feature in Cypress that will help you write your tests for you. With minimal configuration setup, Cypress Studio will allow you to click around your UI, and it will generate the element selectors for you.
For example, I wrote a test to ensure that when I clicked a button, a particular modal would appear. After following the Cypress Studio documentation, I wrote a test shell and clicked the save button in my UI. After finalizing my commands, I came back to my tests and found that Cypress had generated the selector code for me! (It also generates those comment dividers).
All I needed to do was to write the assertion statement, and I was done. (If the day comes where we don’t need to write our own assertions, we may need to start looking for new jobs as web developers)
This is a simple example where the selector is not very complex, but it saved me some keystrokes and mental effort to just click the button in the UI instead of writing out the entire setup. If you have multiple commands, Cypress will log them all, so you could click multiple buttons and have it generate the selectors for you.
Conclusion
Automated tests have come a long way, and while there’s still more that could be done, Cypress has taken a massive leap forward and Cypress Studio is the cherry on top. Enjoy letting your computer help you write your automated tests!
Read more at plainenglish.io
