Test Runner Overview

[00:00:00]
>> Let's actually go back to this view where you can run all the tests, you can run an individual tests kind of suite in this case so each one of these files you can run, as you kinda go through. So let's go ahead and let's just pick this very first one right here and kinda get a sense of the experience.

[00:00:21]
So it's gonna open up Chrome and while I am running dark mode on my computer right now simply for lighting and stuff along those lines, this is actually a slightly different version of Chrome. If you fire this up, you might even see two, if you are on Mac OS, you might see two Chrome icons in the dock.

[00:00:40]
And if you command tab, you will see two of them on the window, cuz there is your regular Chrome and then you can kind of see at that banner at the top. Chrome is being controlled by automated test software. This is a Chrome is getting spun up in testing mode.

[00:00:54]
What are the core differences here? One is, none of your extensions are there that can kind of add, different chaos into your testing. You're not logged in, it's like a fresh version of the Chrome browser for the sole purpose of being driven by cypress or a similar tool.

[00:01:14]
We have basically our application in this iframe to the right as well as our test suite and kind of the status of all those tests. Now, if one breaks clearly, there's a little bit more data in here. But a few things to kind of point out here. So we can go ahead and kind of see each step, and you'll notice as well that I can kind of see each part of the test as I hover through it.

[00:01:39]
You can open up your developer tools. And so if something was logged to the console, it's not like some black box that you can't see into, it is a browser. This is your application running in the browser that you are probably testing it in, as you were working on it.

[00:01:56]
So you can kind of pull up all of the browsers, just some extra accoutrements around it to kind of give you a sense of what's going on with your test. You'll also notice that as you run the test suite, it runs through all the tests, and then it stops.

[00:02:13]
It doesn't say everything was good and closes the browser, it just stops either at the last successful test, or if something failed at that failure, right? And this is so that if you're working on a test you kind of run up to the steps that you have, right?

[00:02:33]
Figure some stuff out, if you need to like open up the console, and like inspect the elements on the page or something along those lines. And we'll talk about another way to do that in a second, that you can do all that things and kind of like build up your tests as they go along.

[00:02:49]
The other interesting part is, for the most part, we are going to be writing tests usually for our own applications that we're working on, right? But you'll see that despite the fact that this is in that create react app lipo that I made, this is actually going to a page on Cypress's website that has a to do list and it's kicking the tires on that application, right?

[00:03:12]
And so, when I say that is anything that runs in the browser, you can test, this is a really great example of it, like this isn't our code. This isn't the code base, this is simply their site that we kind of have in place as well. So you can kind of go through the test.

[00:03:28]
The other really interesting one that we're gonna use a lot today is the selector playground, which we'll go ahead and kind of give you what is likely the best possible selector to use as you write your tests. So, this is again that advantage of basically the test suite stops whenever it was finished, and hands back control trolled to you because you can go ahead and kind of poke around a little more.

[00:03:54]
Question?
>> Can you customise the Cypress open app or add features or is it a closed extension?
>> You can, right? So the question was, can you customize any things kind of working with Cypress or is it just a kind of closed ecosystem you get what you get and you don't complain about it?

[00:04:13]
If we go back into those four folders and we'll kind of just gloss over a little bit say, we have this plugins directory, and in here there is on and config, right? So right now it exports a no app function that is basically gets two things, on, config.

[00:04:32]
Config is your actual Cypress configuration that you or any plugin that you install can modify at runtime. So for instance, you might want to be like if we know that we are in a development environment I want to point it against this set of API's, or something along those lines.

[00:04:50]
Any configuration that you might need to do for different environments, you want to do it programmatically, you can do in here and modify the configuration using the full power of the JavaScript programming language. And as well as on which we will play with a little bit today allows you to either a call functions that run in node.

[00:05:11]
So if you need to seed the database, you can kind of like create a set of tasks they're called, to see the database, clear out the database, reset any of the infrastructure you need to reset, also that on has a whole bunch of events, right? Before you run any of the tests, before you run a given test suite after, right?

[00:05:32]
So you can go ahead and basically you have a lot of hooks into the way that Cypress operates. Other things you can do in this file, is you can install, like we said before, this version has no, none of your Chrome extension's installed, right? But you could, if you were testing a Chrome extension for instance, you probably want it in loaded into Chrome to see if it's working the way you expect it to, here's where you can kind of customize that browser itself by loading extensions so on and so forth, right?

[00:06:03]
We'll talk about some of the plugins that exist, we won't get all the way into like writing a bespoke plugin, we will talk about some of those testing like ceremonies, right? Like seeding a database, clearing it out, resetting things, if you need to spin up a user, right?

[00:06:18]
Those things get a little bit tricky, we'll talk about some of the trade offs, but this is where we will be doing that at some point as well. As well as in support, you have just other functions that you might want to like bring in and add to your ability to test things as well.

[00:06:35]
The other things you can do in this window as well is you can change the viewport. You can do that programmatically as well, as you can see like in your Cypress JSON or actually like for a given set of tests, you can change it to an iPhone size or what have you, and test it in different views to see.

[00:06:51]
Make sure like things that should be hidden, if you really love your hamburger icons, and you want to make sure that they're there in the mobile view, you can set the viewport like that as well. You can do that for the entire test suite in cypress.json, which we'll talk about in a second.

[00:07:07]
Or like I said before, you can modify that configuration in a given test as well. So we have that there, the other interesting part here is, you can kind of see a version of the kind of location bar. The one caveat is that, to get a browser that is hooked into some code, driving it to work, there is a certain amount of magic that needs to happen.

[00:07:31]
For most cases you can visit any site that you want. It is visiting HTTPS example .cypress.io, you can see that Chrome's actual location bar is not particularly pleased about this, but it does work in Cypress actually controlling and driving this page that's not on its origin. The caveat is, it does all of this magic at the first domain that you hit.

[00:07:57]
So if you want to jump into driving your Gmail and then jump over, in a given test, you can't necessarily do that, right? But now we're kinda trying to use it for automating the browser, we're using a testing tool that could do it for reason it wasn't necessarily intended to do it, right?

[00:08:16]
And so you're kind of, that's not particularly surprising. The other interesting part is we saw those selectors before that cy.get. If we use a selector playground, it will, again it tries to get the best possible selector, and it will tell you how many elements in the page match it.

[00:08:36]
And, it'll allow you to copy that selector right to the clipboard. So this is an easy way as you're again, as the pauses and you're trying to figure out like how to go and drive through your application, that copy to clipboard is a really helpful way to help you use your test runner, to help design your tests, right?

[00:08:55]
So that's again, incredibly helpful as well. And as you can see, you are more than welcome to pull up just the regular Chrome tools and do whatever you need to do, right? You might want to look at the network tab in the same way you would debug your real application, you can debug your tests in the same way.

[00:09:14]
Cool, so we've got that in place, you can go back to your tests, right? It's running in Chrome, if I need to stop it, I can stop that kind of automated version of Chrome. I can run all the tests, I can run a given test, I can open that test in the IDE.

[00:09:31]
We'll get into runs at the end of the workshop, settings is effectively, all the things that can change the settings in your Cypress situation, this is a way to see how they all come together. One of the other files outside of the Cypress folder that was created for us is a cypress.json, in this case it is an empty object cuz it has not been configured in any way, shape or form.

[00:09:59]
This is a place where you can kind of put some of those things. The most common one that you might add in is what your base URL is, right? So you do not have to type in a full domain name all the time. So you can for instance, And type in like local host 3000 and so on and so forth, right?

[00:10:22]
Anything along those lines. I will show you that in the other application as well. And you can kind of go ahead and drive stuff around. Like I said, if you're setting it for the first time and you no longer want any of this, you can say no thanks, delete the example files.

[00:10:38]
The other interesting part about this is it will only delete ones that you haven't modified, right? So if you've played around with some, you want to keep those, you actually can, I will leave it as an exercise to the reader to kind of go through some of these and just kind of familiarize yourself with some of the common patterns, right?

[00:10:55]
So, there's an example around local storage. We will cover an example around, look making sure that the path in the location bar is what it should be for where you are, especially if we're doing like client side routing or something along those lines, network requests so on and so forth.

[00:11:11]
So, we'll occasionally pop in there and just look at a few examples as they come up, there's questions around them, so I'm gonna leave these files here. But you can see definitely that probably testing examples that cyprus.io is not probably what you installed Cypress to do in your application.

[00:11:27]
So we'll leave them here for our purposes, but you would probably delete them at this point, you'll also see the version. Version 9.1 is the current version at the recording of this workshop. It will tell you if there's a new version out and you should consider upgrading, question?

[00:11:47]
>> Is it possible to run tests on real mobile devices, something like browser stack or plugin?
>> I think via some of the plugins, but like the driver itself is taking a version of Chrome in this case, right? But yeah, I think when we look at some of the plugins you can like hook it up to those as well.