Introduction

[00:00:00]
>> My name is Steve. I am the frontend architect at a company called Temporal. Temporal does workflows as code, taking anything from long running processes and kind of making sure that they will actually run to completion as well as abstracting over some of the parts about distributed systems and make them hard.

[00:00:18]
So the idea that any given part can fail, and you're able to basically abstract all that away and build applications. Just thinking about the business logic itself, and we'll take care of retries and queuing, and you can have effectively a serverless function and still call sleep 30 days on it, or have it like recur and surf along those lines.

[00:00:39]
So it's at temporal.io, you should totally check it out. But at Cypress IO, is a tool called Cypress. And the kinda high level of what Cypress is, is it's either end to end or integration testing tool for testing web application. And I'm choosing the word web application very purposely, right?

[00:01:03]
You can kinda see that subheading there of fast, easy, reliable testing for anything that runs in the browser, right? And so yes, that means react applications or angular applications or a jQuery application or even just a Ruby on Rails server generate, like anything that appears in the browser, you're able to kind of write tests around it.

[00:01:24]
And the way that it does this is both elegant and so far that didn't exist for the large majority of my career. And also the straightforward way that you would think that it should do that, which is it drives a browser using JavaScript, the language that runs in the browser to kind of emulate what you might do manually to make sure things work, right?

[00:01:47]
One of my not jokes is that you always are testing your application. It's whether or not you're doing it by hand or if you have an automated way to go about doing that. So yeah, there have been other tools in the past, most popular were different obstructions around selenium which weren't good.

[00:02:12]
So this kind of gives you the native power of JavaScript and the browser to test things in the browser. And we'll obviously, spend the next several hours kinda getting into all the details of how it works and kicking the tires on it. But you can kind of gain a lot from this screenshot right here, which is you've got your application in an iframe, and it's basically able to kind of take a version of several different browsers, kind of in there, kind of headless mode, to kinda like drive them.

[00:02:42]
And just basically go through a set of commands and basically exercise that application, right? And the really cool part about this is, if you're in the middle of a refactor from backbone and Marionette into React, right? You can theoretically, it doesn't matter. It's not like I need to mount this component in a certain way, or anything along those lines, even if your code is really hard to unit test because somebody who's definitely not you wrote it in a way that makes it untestable, right?

[00:03:13]
This is a way that, okay, but when I go to the page, I should see this, I should click here. As I'm doing a large refactor, you can have that confidence that you haven't broken some other far part of the application unintentionally, right? Cuz anytime a code base gets significantly large, yeah, that thing you're staring at, you probably are focused on enough to make sure you're gonna ship the feature you're sinking to ship.

[00:03:37]
But sometimes what happens is you implement one thing and something else pops off on the other end of the code base somewhere else, you don't see it and now you have a bug, right? So having the ability to automate this in a way that is quick and easy is incredibly important, right?

[00:03:52]
The quick and easy part is super important as well. Because if this stuff isn't easy, you're not going to do it, right?. See also any project that has run any of the selenium based tools, which is a lot of times they sometimes just, randomly don't work. They run slowly, they are a lot of times in a programming language that someone working on the web is not using, right?

[00:04:21]
And so there's a lot of issues around that, what happens a lot of times when there's a deadline, they tend to get messed. Cypress is so easy to use that it becomes compelling to be like, all right, I'm gonna work on this thing, I can write the test first, it doesn't take me that long, I can validate that it passes and move on to the next thing.

[00:04:42]
So we're gonna start basically from the ground up and kinda go through all of the core concepts as we start to learn them pretty much in isolation. And then kind of snap them together into a few more sophisticated patterns over the course of our time together. With that, let's go through a tour of just some of the materials that we're gonna have on hand.

[00:05:06]
So we can kind of get comfortable with those as well. So we've got most of the action is happening in this repository called Cypress examples. And everything I'm gonna talk about is in this directory called Lessons, and you can kinda see the order of operations over the course of the day.

[00:05:29]
And there's also a folder which Cyprus generated called Cyprus, which is where a lot of either where I'm gonna be doing a live coding or the exercises are, so it's in Cyprus and in Integration. And there's a lot of either the kind of basis for where either I or you will start writing some code, as well as a reference implementation to kind of compare and contrast against as we go through.

[00:05:54]
So one of the things to definitely do as we kind of get started is to kinda just go through some of the initial getting set up pieces. There's nothing particularly out of the ordinary. We do for one example have a small SQL light database, so I would definitely recommend kind of just going through that step, kind of as we're getting started, that way if anyone has any problems, we can go and triage it during a break.

[00:06:19]
But beyond that it is an npm install and npm start, we'll kinda get through how to actually run the Cypress tests. But on one hand, it is great that we have a repo kind of set up and ready to go with a bunch of test boilerplate and templates in place for us.

[00:06:35]
On the other hand that does rob us of the opportunity to kind of see what the initial installation experience of setting up cypress looks like. So we also have a second repo and honestly you can clone it down and use it. You could also just use Create React app, or just grab an application.

[00:06:58]
The app itself is not the important part, the important part is is an application that presently does not have Cypress. It's like in package.json, but it has not been set up for the first time, so it's more about just not the other repo where all that stuff is ready to go.

[00:07:14]
But one that is simply, like if we were just spin up this app it's just like a sentence vertically and horizontally center that says this is the world's simplest application or something along those lines. What is actually happening there is not important, it is more that this is a repo that presently at this moment does not have Cypress setup.

[00:07:34]
So, if you wanna use this one, you're welcome to use it. If you have one in mind that you would like to use, that is also fine as well, you can go ahead and do that.