Writing and running Cypress tests

- [Instructor] Alright, so now that we've set up Cypress and seen how to run it and we've seen this simple interface here, the next thing that we're going to do is write and run our first test. Now, since obviously Cypress needs some sort of target application to test in order to demonstrate, what I've done is I've actually created this very simple target app that we're going to be using throughout this course in order to learn how to write tests for different parts of the user interface. So what you're going to want to do is just check out the branch or the exercise files for this video. And once you've done that, you should be able to change directories into this new target app directory that you should see here. And you can run this thing by, first of all, installing all of its dependencies with NPM Install. And once you've done that, you can simply run NPM Run Dev and that will actually run the application. This is just a simple react application and you can open that up in your browser to see what it looks like by going to local host 5173. You can just control, click on that. And what you should see is this screen here. Now as you can see, this is just a simple list of examples and you can see what each of them is. This first one is pretty straightforward. It just brings us to a simple page with a big heading on it. We'll be seeing how to check text content in just a minute here. If you go to example two, that'll allow us to test text inputs and things like that. So we will be taking a look at that shortly as well. This next one has multiple text inputs. And finally we have one that has a number of different user interface components. Alright, so feel free to explore that application a little bit more. But what we're going to be doing is we're going to be seeing how to test simple text content and, well, write our first test. So let's go back to our IDE and you're going to want to just leave that target app running there as well as leave Cypress running in this other terminal. So we're going to have a third terminal here that we'll be using for other things as you'll see. So here's what this is going to look like. Now that we've got the target application set up, let's write our first Cypress test. And writing a basic test in Cypress is fairly straightforward. If you're familiar with the Mocha test framework, the syntax for organizing your Cypress test is going to look very familiar because, well, frankly, it is Mocha. It's a baked-in version of Mocha, so to speak, that ships by default with Cypress. Now we're going to do this by actually going back over to the Cypress interface running in your browser here, and we're going to click on create new spec. Now this is going to ask you for what you want to name this new file here. And what we're going to do is we're going to call it something like my-first-test.cy.js. This is the suffix here for Cypress tests. So let's click create spec. And what that's going to do, it's going to actually create that new file and put a little bit of code inside it. So as I said, this code looks very similar to Mocha because it is Mocha. So we're just going to close that little modal and go back to our IDE here. And what we should see is that inside Cypress, we now have this e2e folder, which contains our end to end tests with my-first-test.cy.js inside of it. Alright? And in here we see that same Cypress code that was just generated by clicking the Cypress interface. So we're just going to have to change a few things about this. The first thing to notice here is this describe block. In case you're not familiar with Mocha, this is used to group related tests together. So what we're going to do here is we're just going to say describe, and for this one we'll just say something like heading text. And then for this git function, this defines individual tests. We're just going to say something like, it contains the title of our site. And if you go back and take a look at our site running in the browser here, in example one, we see that this is called My Awesome Web Application. So what we're going to do here is see how to write a simple test that checks to make sure that the title contains that text. So here's what this is going to look like. We're going to first of all change this cy.visit thing so that it actually goes to our own site that we have running, right? Basically this cy.visit function tells Cypress what page to open up. This is the equivalent of opening up a browser and typing something into the URL bar and hitting enter. That's what this is going to cause Cypress to do behind the scenes. So to make this happen, we're just going to go back over to our web application running here. I'm going to copy this full URL and paste it in here. Oops, let's try that again. And that should be something like this, localhost:5173/example-1. And now, here's where we're going to write our first Cypress assertion. We're going to say cy.get(h1) So we're finding the h1 element on the page. And what we're going to do is we're going to say that it should have text that matches a given string. So here's what that's going to look like. We're going to say should(have.text). This is how we write assertions like this in Cypress. And then we're going to say My Awesome Web Application. All right, that's the text that was inside that h1 tag on our site. Alright, so now that we have this test, let's actually run this thing. And you can do that by going back over to where Cypress is running in your browser and what you should see. You may have to click on this test in order to get it to do that, but what you should see here is that Cypress ran the test and it has passed, right? You can see that by this little green check mark over here on the left hand side. And furthermore, if you look over here on the right hand side, you can see what Cypress actually saw when it ran the test. This can be very helpful for troubleshooting if a test fails and you want to know why. So essentially what Cypress does with each of these tests is it executes whatever steps we've specified here. So in this case, we've just told it to open that page and check the text in the h1 heading, and if it matches our expectations, then the test will pass. So let's go back here and let's see what happens if we change this text to something different. Let's say something like My Awesome Web Site. All right, well if we save this and go back, we're going to see that first of all, this will automatically rerun and it will fail, right? So if we take a look at this thing here, we can see why it failed. It even shows us the line where that test failed. We see that it says expected h1 to have text, my awesome website, but the text was my awesome web application. So in this case, it's pretty easy to see what went wrong with that test. So let's just go and change that back to my awesome web application. And if we go back here, we should see that that passes again. So anyway, that's the basics of writing and running Cypress tests. This is obviously a very simple test that we just wrote and ran, but the exciting thing is that for the most part, writing and running Cypress tests is going to be this intuitive, as you'll see. So anyway, that is the basics of writing and running our first Cypress test.