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 

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

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

 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 

 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 

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.

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 

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.

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.

 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.

? That's what you should see after initial installation.

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

 file, add the following two lines in your 

    "cy:run": "cypress run",
    "cy:open": "cypress open"

Now when we need to run the tests, a simple 

, 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.

 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 (

So don't try to run Cypress in headless mode until after you've done 

 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 

You'll probably also want to add the  folders of 

 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).

 file and enable Cypress Studio there too.

 variable just means we won't have to type 

 in every test. Instead, we'll be able to just write 

{
 "baseUrl":"http://localhost:3000", 
 "experimentalStudio": true
}

Now we can write our first test file and test.

 folder in your project, create a new test file named 

. 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.

 test block and inside of that, create an 

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 

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 

describe('Movie app', () => {
  it('should show all results for movies that contain "Star Wars" in their titles', () => {
    
  })
})

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

 to start the app from a test, so just fire it up in a separate terminal, then open up the Cypress Test Runner.

And in a second terminal, open the Cypress Test Runner:

When the Cypress Test Runner is open, enter our test file and click the tiny blue magic wand that says 

For me, I clicked the Movie Search link in the nav bar, typed "Star Wars" into the search box, clicked into one of the results, etc. 

When you're satisfied with what your test is doing, click the 

 button at the bottom of the test, and Cypress will run back through all the commands it's just recorded from your actions. 

If you go back to your IDE now, you'll see all the actions Cypress recorded, along with a few comments to tell you it was Cypress generating the code and not a developer.

describe('Movie app', () => {
  it('should show all results for movies that contain "Star Wars" in their titles', () => {
    /* ==== Generated with Cypress Studio ==== */
    cy.visit('/');
    cy.get('.navbar-top-links > :nth-child(3) > a').click();
    cy.get('.search-input').clear();
    cy.get('.search-input').type('Star Wars');
    cy.get('[type="submit"]').click();
    cy.get(':nth-child(2) > .breakpoint__medium-up > .movie-component > .movie-poster').click();
    cy.get('.movie-details-reviews > :nth-child(3)').click();
    cy.get('.fa').click();
    /* ==== End Cypress Studio ==== */
  })
})

Although our test is good, Cypress can't be expected to test for all the things a developer might know are important. 

Things like the number of movies returned from searching "star wars" or checking the title of the movie being clicked into and the contents inside of the movie page itself.

I'll fill in some of those details myself now. 

describe('Movie app', () => {
  it('should show all results for movies that contain "Star Wars" in their titles', () => {
    /* ==== Generated with Cypress Studio ==== */
    cy.visit('/');
    cy.get('.navbar-top-links > :nth-child(3) > a').click();
    cy.get('.search-label').should('contain', 'Search Movie Titles Here:'); // user added
    cy.get('.search-input').clear();
    cy.get('.search-input').type('Star Wars');
    cy.get('[type="submit"]').click();
    cy.get('.card-component').should('have.length', 20); // user added
    cy.get(':nth-child(2) > .breakpoint__medium-up > .movie-component > .movie-poster').click();
    cy.get('.movie-details-info__overview').should('contain', 'Movie Overview'); // user added
    cy.get('div').should('contain', "1977-05-25") // user added
    cy.get('div').should('contain', "8.2") // user added
    cy.get('.movie-details-reviews > :nth-child(3)').click();
    cy.get('.fa').click();
    /* ==== End Cypress Studio ==== */
  })
})

If you look at my code above, I added comments after the extra assertions I added - mainly small things like checking for search text, the count of movies returned, the movie info like rating and release date in this specific movie.

I didn't add a ton of extra code, just a few extra lines of details. Now run the test again and check the results.

And we're done! Congrats - our first Cypress Studio-assisted e2e test is written. 

AUTHOR

Paige Niedringhaus

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.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Cypress Studio - the underrated feature speeding up e2e testing

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript