Learning Cypress Automation with Cypress Studio

By Josh Trench On April 08, 2021

Learning Cypress Automation with Cypress Studio

Just like in the world of development, efficiency and speed are integral parts of the QA process at BizStream! In the never-ending process to improve our speed and efficiency, we got to a point where we knew automation could help enhance our testing. More specifically, we wanted to improve and automate our manually repetitive and regression types of testing. A variety of languages and testing tools were explored to help us do just that. After some searching, a colleague of mine, Tyler Pfohl, came across Cypress. It immediately started to check a lot of boxes for us, as mentioned in his blog post, Cypress Automated Testing for Kentico 12.
 
As a non-developer, it has been quite an adventure (and a steep learning curve) but has also been a lot of fun learning a coding language. Haha...what I am really trying to say is that it does not look like I am going to be a developer anytime soon. How do you bridge that learning gap without slowing down your QA process? Let’s welcome in Cypress Studio!
 
Back in January, Cypress released a new feature called Cypress Studio. With the help of a starter script, as shown below, you can start a screen recorder that will record your keystrokes and user movements around a site. Cypress Studio takes those recordings, converts them into Cypress commands, and places them right into your script. This has really helped me learn a variety of those commands that are useful for other scripts I am working on. Slowly but surely, I am able to start editing scripts on my own from those commands that I have learned. The recorder also allows for a quicker turnaround time in getting an automated test up and running.

example of script 
 
There is a little bit of learning involved with getting Cypress itself started up, but Cypress Docs have some great documentation to help get you up and running. With Cypress and Cypress Studio running, you can run your startup script. Within the Cypress Test Runner, there is now a little magic button that allows you to start recording, as seen here. Follow the prompts and start recording your script.

screengrab showing recording button


Cypress Studio In Action

Let’s say you have been hearing about how awesome this team at BizStream is, so let's check them out! Using that magical “Add Commands to Test” button in Cypress Studio, here is a small script that would take you to the BizStream team page so you can check out the team. The generated code is even inserted with comments so that you know where the generated script has been added.

screengrab of script 

With some basic Cypress familiarity and the use of Cypress Studio, I was able to generate a reproducible automated script within minutes. With a script now in hand, you can easily go back to review and make sure items like your URLs, and element selectors were recorded correctly. Additional assertions or commands can also now be added to your script and then simply just re-run it from there. Overall, Cypress Studio has proven to be a very useful tool in growing my Cypress skills over the past few months. Happy scripting, everyone!

Click here to read more Advice posts
Start a Project with Us
Photo of the author, Josh Trench

About the author

Josh hails from the early days of BizStream. Josh was brought back to drive developers crazy with endless screen captures and loads of constructive criticism. When he's not finding software bugs, you will most likely find him running around, making sure our building is in prime condition. Outside of work, Josh can be found, exploring the Grand Rapids scene with his wife, Rori. He also enjoys backpacking, restoring estate pipes, practicing surfing, and finessing his mountaineering skills.

View other posts by Josh

Subscribe to Updates

Stay up to date on what BizStream is doing and keep in the loop on the latest with Kentico.