Cypress Studio - the underrated feature speeding up e2e testing

Testing is basically a requirement for modern software today, not a nice-to-have. In the past, end-to-end testing was hard to set up, flaky, and generally a pain to deal with, but it's the best automated testing option to confirm software works. Cypress.io continues to improve the e2e testing experience and its new feature Cypress Studio takes it a step further to make writing tests quicker and easier too.

The unsung feature dramatically cutting down the time it takes to write end-to-end tests: Cypress Studio.#


Photo by Farzad Nazifi on Unsplash

Cypress.io just keeps raising the bar on end-to-end testing#

When Cypress.io first hit the scene in 2015, it made a splash because it fixed so many of the issues that existed with other end-to-end testing (e2e) competitor frameworks.

Between good documentation, intuitive syntax, improved debugging, and no reliance on Selenium under-the-hood - everything about Cypress was a major step forward for e2es, but it wasn't content just to stop there.

The team behind Cypress regularly keeps releasing new features and functionality to make it more and more useful for devs, and make e2e testing (traditionally kind of a pain) easier and easier as well.

One recent release that's currently tucked behind a feature flag is called Cypress Studio, and it's an absolute game changer.

With Cypress Studio, you can show Cypress exactly how to test by recording interactions against the application under test. You click around in the DOM, and Cypress generates the test code to mimic what you're doing. Test written. Done.

Today, I'll show you how to add Cypress to an existing JavaScript project, enable Cypress Studio, and let it help do the heavy lifting of writing end-to-end tests.

It's such a cool feature to help dev teams save time on testing, deliver new features faster, and still ensure the mission critical functionality of the app continues to work as expected.

Add Cypress to a Project#

Although Cypress is kind enough to provide a host of sample scripts to show many of its features in action, it really shines with a local app to test against, and I just so happen to have one that fits the bill.

If you'd like to download a working version of the finished code and follow along, I have a link to the GitHub repo here.

Get an app to test#

The app I'm using is a React-based movie database that allows users to see upcoming movies and movies in theaters now, browse movies by genre, and search for movies by title. This will be a good app to demonstrate Cypress Studio's power.


Download Cypress to your app#

Once we've got an app to add Cypress to, the first thing we'll need to do is download Cypress to it.

This is another reason Cypress stands head and shoulders above its competitors: one npm download gives you all the tools you need to start writing e2es. No dev dependencies, no extra libraries with mismatched package versions, none of that nonsense to deal with.

At the root of your project, where your package.json file lives, run the following command from the terminal:

This will add a bunch of new Cypress-based folders and files to your app, and with just a few small configuration changes we'll be ready to go.

See all those new folders under cypress/? That's what you should see after initial installation.

Add Cypress scripts to the package.json to make it easier to run#

For ease of use, I like to add npm scripts for the two main Cypress commands we'll be using:

  • cypress open, which is used to open the Cypress Test Runner where we can watch tests run locally, debug them, and where we'll show Cypress how to test our app

  • cypress run, which runs our e2es in "headless mode", which is how they'd run in a build pipeline 

In your package.json file, add the following two lines in your "scripts" section.

Now when we need to run the tests, a simple npm run cy:run or npm run cy:open, straight from the command line, will do the trick. 

Run Cypress's test scripts to make sure everything works#

Ok, before we get to writing our own tests, let's run the pre-populated tests in Cypress to get familiar with the its Test Runner.

From your command line, run the following shell command:

This should open the Cypress Test Runner, and from here, click the Run integration spec button in the top right hand corner to run through all the pre-made tests once.

Note: Run cypress open first

When we run cypress open for the first time, a new cypress.json file is created at the root of our project. Even though it begins its life empty, this file is required for the headless version of Cypress (cypress run) to work.

So don't try to run Cypress in headless mode until after you've done cypress open in your project at least once. Otherwise, it will throw an error in the console.

After all the Cypress tests run and pass, we're ready to delete them and get to work on our own tests for our app.

Enable Cypress's experimental feature mode#

Go ahead and clear all the files out of the Cypress folders of fixtures/ and integration/.

You'll probably also want to add the folders of cypress/screenshots/ and cypress/videos/ to your .gitignore file just so you don't commit those screenshots and videos that Cypress automatically takes during test runs to your GitHub repo (unless you want to, of course).

Add baseUrl variable

With that taken care of, let's set up a baseUrl in our cypress.json file and enable Cypress Studio there too.

Setting this baseUrl variable just means we won't have to type cy.visit('http://localhost:3000/'); in every test. Instead, we'll be able to just write cy.visit('/'); and save ourselves some code.

Turn on experimentalStudio

To enable Cypress studio, just add "experimentalStudio": true to our cypress.json file.

So here's what the cypress.json file will end up with.

Now we can write our first test file and test.

Create a new test file#

Inside of the cypress/integration/ folder in your project, create a new test file named movie-search-spec.js. This folder is where Cypress will look for all your e2e test files when it runs.

Give it a placeholder test: we have to tell Cypress where we want it to record the test steps we're going to show it.

So just create a typical describe test block and inside of that, create an it test.

Cypress accepts all the traditional testing syntaxes familiar to those who've used Jasmine, Chai, Mocha and Testing Library testing frameworks before. Whether you prefer describe, it, or test - they're all good.

A good first test would be to test that a user can navigate to the movie search option, search for a particular movie name, and click into the results based on that search.

Here's what my empty testing placeholder looks like in the movie-search-spec.js file.

I think we're about ready to go.

Start the app & show Cypress how to test#

One thing you must do before starting up Cypress to run tests against your local app is to start the app locally.

For Cypress, it's an anti-pattern to start the app from a test, so just fire it up in a separate terminal, then open up the Cypress Test Runner.

Start the movie app

In one terminal run our movie app: