Cypress

[00:00:00]
>> One of the things I wanna go ahead and demo here, so I talked a little bit earlier about Cypress, but I wanna actually go ahead and demonstrate it because I think this is one of the things that you need to see it to believe it kind of thing.

[00:00:13]
And so what I've brought up here is the Cypress, basically the the UI here. And here as you can see we have a bunch of different tasks that we can run, and so I'm gonna go ahead in this case run this particular task, which in this case tests a payment app that goes through and does things like navigate through the test.

[00:00:33]
Enter things into the form data, make sure that you click it, make sure you get the right response, and and so this is actually acting like interacting with a local. There's actually integrations here, this is not just like stub information. And so it's going through, it's searching. It's doing all the things.

[00:00:49]
And granted, it's blinking really fast. So you might be thinking that, gosh, how useful is this? But one, I don't know about you all, but when it's my app and I get to watch all my tests are passing. And on top of that I get to get this visual representation of what's happening, it's super gratifying.

[00:01:07]
So for example, right? Display new transaction errors. What you see here is that the Cypress has gone to the extent, and this is why to me it's like very similar to the view ethos. I'm making things just so easy. So like here, you're gonna see that we're actually, time-traveling through the various points of our application as the test goes through.

[00:01:26]
We can see what happens in various inputs, right? We can see what the response is. So you'll see that inside of the console here, let me bump this up a little bit. You can actually see like the method, right? What was the get, what was the URL duration was a stubbed, what was the request.

[00:01:45]
And being able to time travel and you enter and test as someone who came from traditional Selenium background is humongous. It puts just so much value as far as like seeing what's really happening at certain states of your application. And so Cypress there's also some other things to deal with flake as well.

[00:02:06]
But it also tries to do things to make things easier for you. So for example, if you try to tell Cypress to click a button on the page that is disabled, it will actually fire an error. It won't just force its way through and find a way to click it.

[00:02:20]
It'll say that like, hey, by the way, this element you're saying that should be clickable is not clickable at this point, it can intelligently determine those things. So even to the point where, if you have a modal where the Z index is covering it, it's not gonna click it, it's gonna try that normal interaction of clicking that element and trying to replicate that.

[00:02:40]
And so on top of that too, what you might not have realized here is that everything on the right here, this is actually our app rendered. This is not just like a video. And so that's what traditionally people are used to also the end to end test, right?

[00:02:55]
You wait for the test to run, then you watch the video and you find out something's broken, then you go back and try to scrub the video like no. End to end testing has come a long way. And so again, having this really immersive experience when going through and seeing what exactly is happening at these different states, right?

[00:03:17]
And watching this happen can be honestly a really big game changer. And so I know even for me, it actually encourages me to wanna write tests first. Because now I get this like basically automatic preview of my app where I can then say like, so for this end to end test, I wanna make sure that when I click the request button and the pay button that it does these things.

[00:03:38]
It'll just run through and automatically be run and you get to see that like basically like a GIF of what's happening. And so, as your team is thinking of adding end to end tests or making their end to end tests better, that they can trust and rely upon.

[00:03:55]
Just understand that like the level of tooling has gotten to this point now, where we can interact with our actual application and debug things. And as you might imagine, if you're like in development mode, as long as you watch the tests and you save them, it'll automatically reload.

[00:04:11]
So you basically get the hot module reloading aspect. And so yeah, I could give a whole day workshop [LAUGH] on Cypress, but I do wanna at least show you that this is where end to end testing has come.