From the course: End-to-End JavaScript Testing with Cypress.io

Installing and opening Cypress

From the course: End-to-End JavaScript Testing with Cypress.io

Start my 1-month free trial

Installing and opening Cypress

- Now that we know the basic concepts behind Cypress and some of its pros and cons let's take a look at how to actually use it. The first the we're going to have to do in order to start playing around with Cypress, is set up an npm package and install it. So first lets create an empty directory where all our code is going to be. I'll just call it "e2e-cypress". And once we've done that, open up a terminal in this directory. I usually like to use VS Code's built in terminal. And the first command we're going to run is "npm init -y" which will initialize our directory as an npm package and create this "package.json" file for us. And next we're going to actually install Cypress into our project by running "npm install --save-dev cypress". And this will take a little while to install, but once it does we're going to open up the Cypress interface. Which you can do by typing "npx cypress open" and hitting enter. Now in the window that this command opens up you'll see that there are a lot of example test files that Cypress includes here as a reference and these can be very helpful when writing your own tests if you can't quite remember what the correct way is to test a certain piece of functionality. Now this is actually a fantastic introduction for you of what Cypress looks like when it runs tests, and the basic interface for working with Cypress tests. If we click on one of these example files here, we see that Cypress starts to run the example tests. And if we click on any of these ones that's complete, we can see a nice representation of the tests that ran, and the steps that were involved in getting to the result. And this will be super helpful for us once we start writing and running our own tests. Because if something fails, we'll be able to see what went wrong, as well as what steps are involved in recreating the error. So feel free to look around at these example tests at some point, but for now you might be wondering how and where to add our own tests for Cypress to run. Well to add our own tests, what we need to do is go back to our project and you'll notice that during setup, Cypress added this "cypress.json" file, which can be used to specify how Cypress runs, will see exactly what it can do in a later video. And it also contains this "cypress" folder, which contains a few sub folders of its own. Now the sub folder that we're interested in here is the "integration" folder. And if we open that we'll see the "examples" folder that contains all the example tests we just saw. And just to clean things up a bit, I'm going to delete this "examples" directory. But you should probably leave it so that you can look through it. And then inside this "integration" folder, let's create a new file. We'll call it "first_test.spec.js" So now that we have this file, let's go back to the Cypress interface and we'll see that the new file we created is there. And if we click on this file, we'll see that Cypress tells us that it didn't find any tests in our file. And that's exactly what we'd expect, since we haven't written anything yet. So let's close this window, and click "stop" in the Cypress window, and take a look at how to actually write our first Cypress test.

Contents