Check out a free preview of the full Testing React Applications, v2 course:
The "Cypress" Lesson is part of the full, Testing React Applications, v2 course featured in this preview video. Here's what you'd learn in this lesson:

After reviewing steps to configure and using Cypress, Kent shows how to automate the testing.

Get Unlimited Access Now

Transcript from the "Cypress" Lesson

[00:00:04]
>> Kent: Let's move on to Cypress. I'm wearing a Cypress shirt. Cypress folks are pretty cool. I actually have a Cypress shirt, so maybe we'll race to see who can do the exercise or, no just kidding. Maybe it was whoever did the best air squats.
>> Kent: Let me just reset, let me add and get reset.

[00:00:30] Okay, so we're back to the very beginning here. So the beginning of this section will be very similar to the Jest section, I will show you how to configure stuff. With Cypress, it’s actually a little bit less on the configuration specific side and more on the let’s set up everything else, so that our app is ready to be tested against side.

[00:00:52] And so, that’s what we’re going to go through here. It will be a little lighter than our configuration of jest. We're actually gonna be in the calculator again, so if we cd other/configuration/ calculator, that's where we're gonna be configuring this stuff.
>> Kent: Okay, so the first step to configuring and using cypress is to install it.

[00:01:20] npm install --save-dev cypress. And when you setup the repository we actually installed it twice on your project, because it´s installed in calculator solution as well. So this is the third time I'm installing Cypress into this project, but it actually installs an app. And sticks that in your node_modules, so it´s just kinda wild but it's a really capable app that you'll get a preview up here.

[00:01:50] And just a sec when it is finished. Okay, I'm not gonna make you eat well. Yeah, it won't take too long. So Cypress, how many people here familiar with selenium? You use selenium before? Okay. How many people really like selenium a lot? How many people kind of like Selenium?

[00:02:07] All right, how many people are glad that Selenium keeps you from having to answer pages at two in the morning? I am, I just wish I didn't have to use Selenium to do that. Well, you don't, you have Cypress. So Cypress has been installed, if you are in a recent version of npm, then you can actually use a cool command called npx, which will run a binary that exist in your node_module directory, and so cypress exposes a binary.

[00:02:33] And so if I run npx cypress open, then it will verify that cypress can run. I'm not sure what that does. To help you get started, create a bunch of files for you and you say, okay got it. And then you can actually run the test. This prompts open the Cypress Chrome browser, and it starts running these tests.

[00:02:57] And what's pretty cool about this is that this is actually, this isn't just like a video. What on earth? But it's actually something you can interact with. Like a, well click, click. Probably broke the test. But you can also pop open the dev tools. And look at the dom.

[00:03:19] Well things are happening so crazy fast that, we'll see a better preview of this when we start doing our own thing. So this is really annoying. I'm gonna stop this. It's just like the kitchen sink. This is everything that you could possibly ever imagine doing, the cypress is right here.

[00:03:35] So let's make it a little less like that, and get something that's actually useful for our purposes, I'm gonna close this thing
>> Kent: So if we go into Cypress. Let's look at some of the files it created. There's a cypress.json. That's for configuration. There's this fixtures thing, and I'm not gonna show you too much about the fixtures but cypress is very, very well documented.

[00:04:00] And there's a special way that you can reference these fixtures in your tests. So you have, like your default user that's always gonna be in the database. You can put their information in here and then reference that, or something like that. And then all the test live in integration.

[00:04:17] I don't like that, so I actually change the configuration to have it in a folder called e2e because I live Cypress for end to end, [INAUDIBLE] differ integration. But yeah, this is were all those test lived that we were watching. And then, plugins, I don't really have a purpose for plugins so there are reasons, but we're not gonna get into them.

[00:04:41] And then commands, and we'll definitely have some custom commands that I'll bring in and I'll show you some of those. And that's pretty much all of cypress configuration to get what we just saw. So the next thing that we're gonna do in our cypress configuration, we'll add some configuration for a base URL.

[00:05:02] So, I always forget if it's all caps or not, baseUrl and that'll be a localhost 8080. So that's where our application lives and that's where cypress will boot up in the first place. And then also want to, I'm gonna change the integrationfolder to cypress/e2e, cuz I think it's weird to call it an integrationfolder in the first place.

[00:05:31] So rename, this actually we'll just delete this entirely. Cuz I don't want those tests anymore. And we'll rename this to or sorry, add a new folder. New folder, e2e and that's where tests are gonna live. Now, we're gonna be looking at writing test here in just a second.

[00:05:51] So I'm gonna duplicate our test suite here.
>> Kent: And this is a very simple, actually doesn't make any insertion, cypress test. But some of these things actually might look familiar, getByText or getting these different buttons and clicking on them. These are not built into Cypress, and so we need to install those.

[00:06:19] So do this with npm install --save-dev cypress-testing-library.
>> Kent: And then we can reference that in our support file. So that's where, this is kinda like our setup script or setup testing framework script file. Where we can set up some custom commands. And the cypress testing library has some of these custom commands.

[00:06:50] So import 'cypress-testing-library/add-commands'. That'll add our commands for us. If you wanna look at that, it has all the commands here. For each of the commands, it's gonna add those and we'll actually see some other custom commands where that, we'll write some of our own.
>> Kent: Cool. So now those commands will be available on Cypress, and we can run them.

[00:07:18] So if we start up, you notice I didn't have to shutdown the Cypress app and reopen it again, it detected my changes which is helpful. Pop that open and there you go. Clicked 1, and then click +, and then click 2, and then click =, and then 3.

[00:07:39] And then we assert that, three was what popped up in the display. Which actually, why don't we just do that really quick. Let's find that. Okay, so this doesn't have any way really to identify it reasonably cuz we're using CSS modules. So what I'm gonna do is add a data test ID, so we'll go to src, calculator-display, and we'll add.

[00:08:11] Right here. Well, let's do it.
>> Kent: this.props, so spread all the props so we can forward those on.
>> Kent: We’ll apply it right here. Data-testid="number-display".
>> Kent: And then inside of here we can say, .getByTextId('number-display), and then we can make an assertion there. So let's just go ahead and we'll save that it will rerun, and now it got my test id.

[00:08:50] So if you are familiar with what I've been doing already should be like way what? If you are not, then you are like okay, that's a cool out bro. But take a look at this. I click on this and it shows me what was selected. I'm also looking directly in my developer tools, that I'm used to using every day and looking what the state of the dom is.

[00:09:17] So, first off, that's awesome. You can't do that with slaham. What is even more mind-blowing, is that I can actually go back up here, and look at what the state of the dom looked like at that point. And it's not just a screenshot, it's actual dom. So I can go and select this.

[00:09:35] And at that point, that value is zero. So that's also awesome. What's even cooler is at this point, I can start interacting with this thing. And it doesn't work I forgot, sorry. [LAUGH] I have to unclip it and then I can start interacting it, even once my tests have all finished.

[00:09:54] So for this reason, you generally wanna do your cleanup as a before each step rather than an after each because, if something breaks, you'll stop right here. And it won't do any cleanup, so you can be in the same state that you were when the test busted. So if you can, try to avoid after each in, use four each instead.

[00:10:13] But this is a very, very like really amazing development experience that Cypress gives us. So.
>> Kent: Yeah, that's basically it for setting it up so you can actually run it. Now I'm gonna add a couple of scripts so that we can automate the process of running it, so we don't have to run the dev in one tab and then open the app in the other tab of our terminal.

[00:10:40] But get them to run all together.
>> Kent: So, to do this were going to install a new dependency, npm install --save-dev- npm-run-all. How many people have used npm-run-all before? Okay. It’s a pretty handy script that allows you to run multiple scripts in parallel. And here I'm going to add a script called, "test:e2e"dev.

[00:11:12] That's a semicolon. And I'll use npm-run-all, whoops.
>> Kent: And it allows me to run all of these in parallel. And we want to run the dev script in order to make a new script called cy:open. And cy:open is just gonna be "cypress open". So it's basically what we're doing here.

[00:11:43] We're running the dev script here, the Cypress open script here. We're just gonna do it in one script so we don't have to run it in two places. So that's the development stuff. We can close these down for now. And then to make it work in CI, we'll add a test:e2e.

[00:12:01] You can call it, test.e2e, cy, whatever you wanna call it. And we'll run, npm-run-all start. Sorry, we want it in --parallel. And in this case, we also want it to shut down when it's done. So, with the dev script it's always open, it's watching files and everything. In this case, we want it to shut down when it's all finished so it doesn't just hang on to cy.

[00:12:24] So we're gonna use race. And that means that we'll npm-run-all will kill all of the other processes as soon as the first one exits. And in that case all that we really care about is we're gonna start at the server, we'll start up cypress, it'll run all the tests then it'll die and then we'll kill the server.

[00:12:46] So we'll race the start and cy:run and cy:run will just be, you guessed it, cypress run.
>> Kent: And now if we run npm run test: e2e, that's what our cy would run. And it'll break, what? Sorry as a, yeah, before we actually do any of that, we need to run the build, so npm run build.

[00:13:14] Presumably in cy, you would have already done this. You can also have a pretest e2e that would run the build.
>> Kent: Okay.
>> Kent: Then we have things running.
>> Kent: Cypress actually also records video. Even when it's running in headless mode, it'll record video and you can upload that to CI and whatever, see what the problem is.

[00:13:38] And it looks like we did break something. Something timed out, so that's no fun. Maybe we could watch the video. I'm not gonna debug that, cuz we wanna move on. So we could also run mpm run dev or test e2e:dev.
>> Kent: And it will pop up in Cypress for us.

[00:14:03] And then we can use Cypress to drive our development. That's actually something I've been meeting to try. I haven't gotten around to trying this yet, but I kind of want to just close down Chrome when I' m developing, cuz I'm really used to just having Chrome open all the time and interacting with the things I'm building.

[00:14:21] I kind of wanna just close down Chrome and just use Cypress. And so like, often you're going through a flow, you're implementing some sort of form flow or something like that. And so you pull it up and you click through, until you get to this spot you need to fix.

[00:14:35] And you'll do some code and then you'll click through it again. You could automate all those click through's with Cypress, and make it a part of your work flow. Almost like not test-driven development, but test as you develop. And, I think that it would actually really enhance my workflow.

[00:14:50] So I'm looking forward to taking a chance to, or taking an opportunity to do that, that would be something to check out.