Let's talk about commands and assertions. If I were to say cypress.visit the home page, of course, this is a command. We are commanding Cypress to load the home page. That means we'll end up seeing something like this, the splash page for Laravel. Now let's say we want to track down the container for this text. Well, on the welcome page, here it is, and you'll see it's a div with a class of title. So why don't we track that down? I could say, get me the element that matches this jQuery selector title. Next, if I want to assert that it contains the given text, well, we might say, should contain Laravel.

Next, if I want to assert that it contains the given text, well, we might say, shouldContain Laravel. All right, so think about it. visit is a command. get is a command. should is an assertion. Let's have a look. We give it a run. Of course, it fails. And again, notice, we have our assertion.

Of course, it fails. And again, notice, we have our assertion. Command, command, assertion. Okay, however, if I switch back, you've learned a couple episodes ago, I could also do things like this. Visit the home page, and that should contain Laravel. So is this a command or an assertion? And it's a little tricky, because technically, I think you'd call it a command, but it has the side effect of functioning as an assertion. Here's what I mean.

a command, but it has the side effect of functioning as an assertion. Here's what I mean. We run the code, and yes, it still works. But notice, there is no assert label here. And if I click on it, and then view the console here, notice we're running a command called contains, and that yields the DOM element that contains the given text. So it's not really an assertion, it's a selector. But it has the side effect of functioning as an assertion, because if Cypress can't find the text Laravel, the test will fail.

But it has the side effect of functioning as an assertion, because if Cypress can't find the text Laravel, the test will fail. It's sort of like this. If I were to say, visit the home page and find the DOM element that has a class of this, well, we know that doesn't exist. So if I come back and give this a refresh, it can't find it. It waits about four seconds, because remember, many applications are asynchronous. So it could very likely be the case that we are making an AJAX request to fetch some data, render a template, and then throw it into the DOM.

So it could very likely be the case that we are making an AJAX request to fetch some data, render a template, and then throw it into the DOM. So that's why it takes four seconds. We refer to that as retryability. It'll keep retrying this selector for four seconds before finally giving up. Okay, let's keep going. If I were to say, visit the home page, and once again, we're going to fetch this element. Okay, get me the element that matches this selector, sort of like a jQuery selector, more on that in just a second.

You can assert a value, an attribute, a class name, a data attribute. You can assert that any callable you provide satisfies some expectation. You can assert that an input has the given value, or it's checked, or it's not checked, or div is hidden, or invisible. Any of these things can be done. But now come down here, right here. These getters are also available, but they don't do anything. They just enable you to write clear English sentences. So more on that in just a second. But yeah, if I wanted to say have.text or contain the given text,

So more on that in just a second. But yeah, if I wanted to say have.text or contain the given text, expect the element to contain the given text. Well, where is expect coming from here? Because if we switch over, we just do should. And this can be a little confusing at first. Just remember, any of these assertions are available as the argument to should. So if I wanted to say contain.text, or just contain, this is going to work. And behind the scenes, it's being passed to that Chai library. So if I come back, of course, it works.

And behind the scenes, it's being passed to that Chai library. So if I come back, of course, it works. However, we could also pass a closure here. So I could say should accept that div, and then when you need to, you could manually write out your expectation. So I could say expect div to contain Laravel. This would be another way to write it. Come back, give it a refresh, and it still works. And notice the labeling here is identical. It's the same thing.

And notice the labeling here is identical. It's the same thing. Now have a look at this. I could say signUpLog. This is often useful if you want to quickly log something to the command prompt, or at least in the browser. So let's just log that div, and you'll see it show up right here. And I want you to notice something. I'll click on it, open up my console, and notice the message right here, jQuery. It's a jQuery instance,

So remember, if you ever used jQuery in the past, you'd do things like this. Grab that element, and then give me the HTML, or give me the text content. It's the same thing. And in fact, when you often read tutorials, they will add a $ sign at the beginning as a little indicator, this is a jQuery instance. So if I come back, this should log Laravel, and it does. What else? Let's see, maybe we want to grab the class attributes. And one more, let's add a data attribute, data-foosbar.

Let's see, maybe we want to grab the class attributes. And one more, let's add a data attribute, data-foosbar. Okay, let's grab those using jQuery. Get the div, and give me the attribute for class. Come back, refresh, and it's title and margin-bottom medium. Good, let's grab the data attribute, so I can use jQuery's data method for foo, and that'll return bar. Yeah, what else? Expect div to, how about this, be hidden. Will that pass or fail?

Expect div to, how about this, be hidden. Will that pass or fail? And let's add the $ sign there. So we switch over, it's running, it's trying to check, and nope, the div is not hidden, so it fails. Okay, let's fix that. We'll go to the welcome page, and I've added this class called hidden. All that does is set display to none. We run it again, and of course, it passes. Okay, but how about this?

We run it again, and of course, it passes. Okay, but how about this? Let's say what we expect it to be visible. So now we run it, it's waiting, is it visible? No, it's not, so it fails. Okay, so this is where that retryability comes into play. I come back to my welcome page, right down here, just as a proof of concept. We'll say, how about setTimeout, and after 2000 milliseconds, or two seconds, let's find the div with a class of title. And we'll just say classList.

two seconds, let's find the div with a class of title. And we'll just say classList. Remove hidden. Okay, so now think about it. When the page first loads, this is hidden, but after two seconds, we remove that class, which means it will then become visible. All right, let's see if we fix the test. Run it again, one, two, and the second this code runs, it re-evaluates, and it returns true, so the test passes. Okay, cool, let's go back.

it re-evaluates, and it returns true, so the test passes. Okay, cool, let's go back. Now it's useful when we pass a closure here, but often, you don't even need to. So let's see how we could also write this. If I said beVisible, well, that's still going to work after one, two seconds. But yeah, notice, be.visible, and if I go back, be.visible, it's the exact same thing. And further, don't forget, a few minutes ago, when we talked about these chainable getters. These are like properties you can call that don't do anything other than

So contains, or contains text, it'll be the same in this case. But yeah, that would be another way to write it. One, two, it passes. Now, what about the times when you want to stick with this approach, but you still want to, so to speak, invoke a jQuery method? Call this method on jQuery, and then I want to perform an assertion based on the result. You won't do it all the time, but sometimes that's just what you need. So we could say invoke. Invoke a function from the yielded subject here, or the result.

So we could say invoke. Invoke a function from the yielded subject here, or the result. And as we learned, when we do this, we get that jQuery selector, the instance there. So if I want to call text, that's sort of like this. We are invoking this method on the results or the subject that preceded it. So now I could say things like, should contain Laravel. That would be another way, a more explicit way to do it. And it's the same thing.

That would be another way, a more explicit way to do it. And it's the same thing. So notice, we grabbed the text, and that returned this, and we're making sure that does include Laravel. So if we wanted to, let's go back to welcome, let's grab that one more time. Excuse me. So I could say, invokeData, provide an argument, and that should equal, what was it, bar. Give it a refresh, and that works as well. So I just want to make this crystal clear,

So then, once that resolves, we perform an assertion based on that. All right, so simple examples, but this should get you started. And remember, you might want to pin this, at least in your initial learning, because you'll retort often. For now though, don't try to memorize all these, you don't need to. Just learn some of the basics, like shouldEqual, or haveText, or contain, or if you want an array to include a certain value, or if you want things to be truthy. Let's finish up there. So notice, expect true to be true, you could write it like that.