Check out a free preview of the full Testing Web Apps with Cypress course

The "Continuous Integration" Lesson is part of the full, Testing Web Apps with Cypress course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how continuous integration works with Cypress. The command `npx cypress run` opens a headless version of the browser to run the tests. All tests are executed with the results displayed in the command line.

Preview
Close

Transcript from the "Continuous Integration" Lesson

[00:00:00]
>> So the other last piece to look at is around some of the CI/CD stuff. Now, I'm gonna show you an example of works with GitHub Actions. I know that like GitHub Actions will work great, especially if it's a small project, or maybe an open source project or stuff along those lines.

[00:00:18]
For those of you in the room, we did general introductions, and I know that there's probably if I had a guess, 50% Jenkins in the room.
>> Yep.
>> Yep, yeah, [LAUGH] right and so, the nuances of all these things, will kind of vary a little bit as well.

[00:00:40]
But, it's the kind of difference we saw before between Cypress open and, Cypress run. So I'm gonna do Cypress run instead, this will take a second or two. And what this is going to do is not going to fire up a browser that you see, that you can like click around through and do a bunch of stuff.

[00:00:57]
It is going to spin up a headless version and, kind of go through all of it one by one, right? There's a bunch of stuff you can do and all of this will be built to a specific. You could theoretically grab some Docker containers, that have Chrome and stuff along those lines, and do that as well.

[00:01:16]
If you don't specify anything, it's just gonna use its built in electron browser. But like this almost looks, very similar to a set of unit tests, right? Where it is basically running through each spec, and you can kinda see it pass by as it runs through all of them.

[00:01:33]
Where it is also like recording videos, and taking screenshots, so that you can theoretically kind of view them. The one nice thing about the Cypress tool itself, like the run stuff that we saw before. Is that, you can have a GitHub Action that runs, or anything but then you could also give Cypress your GitHub token.

[00:01:59]
And they can open responses on the PR, with a review of which tests failed, what the videos are. And stuff along those lines, that allow you to see that super easily and kind of get that immediate feedback. Cuz we all get the thing where it fails and you gotta go into the tool, especially if you're a larger company,.

[00:02:16]
You gotta two factor auth [LAUGH] and be on the VPN or else it's not gonna work, and all those kinds of things. So the ability to get that feedback incredibly quickly, is super useful as well. But, the run version of this is what we expect to run on a CI/CD process, right?

[00:02:36]
And it should go ahead and collect those images and videos and it should bubble up the ones that fail, so on so forth. And like if I run this right now these are getting saved, to a folder that I am personally get ignoring, right? I think you can kind of see all the ones that was kind of running through I think the failures, these are probably previous runs as well.

[00:03:01]
But I will say the videos we can kinda see the process of what happened. Cuz I clearly it's headless, you're gonna triage it after the fact you're not gonna watch your build process. And you can kind of go ahead and see it, the peculiarities are obviously gonna be slightly different.

[00:03:15]
In the resources I'll kind of talk about it real quick, we do have an example of a kind of very simple GitHub Action. That we can just talk about real quick, but basically will check out the code install your node modules. They publish a GitHub Action that you can use, we can specify what browser should it be headless?

[00:03:41]
How do you start the, application what port are you waiting on, so on and so forth. I think the kind of sophisticated parts is that, as it grows if you got the right kind of set of like tools, you can begin to start to paralyze them, and split them across as well.

[00:03:59]
You need a little bit more of a Docker situation to make all that happen, that's kind of a little bit beyond our scope right now. That's kind of if we did like a production advanced version of this I think we can go all the way into that. But, it's a little tricky to do in any kind of meaningful way, without kind of getting really into the front end build pipeline stuff.

[00:04:21]
But the idea is this is a fairly easy way to add at least to having the initial parts to make sure your tests are running, on every open PR, right? And I think GitHub's free tier for GitHub Actions is pretty generous. I don't remember off the top of my head I did earlier at one point today I think it's like 1,000 minutes or something like that a month.

[00:04:44]
Which for a lot of those things you're in a great situation if you blow past that tier, means that you are shipping so much code. But yeah, but kind of having those pieces in place I think is incredibly powerful. But yeah, I think the interesting parts there are automating that, because you're not gonna run this all the time, right?

[00:05:05]
But again some of those, we had it working with Buildkite at SendGrid, and again, it was simply a plugin in that case. And again, it's spinning up a container that has node usually so you can actually run, all of the pieces, stuff along those lines.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now