Get, Contains & Should Exist Tests

[00:00:00]
>> So we have it on the page and there's a bunch of stuff we could do here, right? We could verify that there are things on the page, right? You might wanna say like, is our company name on the page somewhere? That seems like a reasonable thing to check for.

[00:00:15]
You can verify the certain elements on the page again. The side get is effectively just jQuery. And any selector is fair game so if you wanna make sure I give an ID a given even class if you needed to, is on the page, you can do that. The other really useful one is side dot contains, right?

[00:00:38]
And side dot contains will let you give it a string of text, and basically say is this text somewhere on the page, right? So either one of those will work in this case and let's do both. So for instance, I might wanna verify that there is a form on this page, right?

[00:00:59]
Sure, eventually, I think a lot of times when I'm writing the test, I will a lot of times write tests like this. And then I will delete them later cuz like I'm kind of building up that understanding. A lot of times you do not especially because integration tests are slower than unit tests.

[00:01:15]
Like there's definitely like a new test you like test every little thing in a really granular it's like one assertion, right? There's a cost to spinning up visiting the page, so on and so forth, right? Which is I might start with a test verifies that there's a form there.

[00:01:33]
But then once I have the test that fills in the form and submits it, that test is gonna fail if it can't find the form. So I don't need that first test anymore, right? You think more in terms of like things that a user would do rather than every other small unit.

[00:01:49]
But, I would be lying to you if I didn't say that when I'm writing the test a lot of times, I will start very small, and then I will delete some of those tests as I have the more complicated things built. And especially because we're learning, it makes sense to do that so it should, have a form, right?

[00:02:09]
This will allow us to kind of see that first selector side I get. Let's just say it doesn't have a form element at all audit, right? We could make sure it has the right one with the test ID that we're looking for, so on and so forth. And I could say should exist, right?

[00:02:28]
So get this and assert that it exists on the page. All right, so the next caveat. When I hit save on this test file, Cypress will automatically rerun the tests for me. However, when I go change my code, Cypress doesn't know about that, right? Because it's just visiting a URL, it doesn't know that that button lives in whatever component in your components directory, so on and so forth, right?

[00:02:58]
So when I'm working on my tests, it will automatically run them again. There's a refresh button. It's not a big deal when you're working on the other stuff. Let's be honest, you are already cmd tabbing or ctrl tabbing into the browser and hitting cmd+R all the time anyway, you might also have, hot module reloading so on and so forth.

[00:03:17]
So we can run that and go back over. And you can see that it was on the page you can see all the different classes I got added on to it, you highlight it, you will see what form it was talking about, so on and so forth. Again, here we have this selection playground where I can hover over anything and I can get a slightly kind of more granular view.

[00:03:39]
You can see I did a very good job putting data attributes for all the things that I might, or you might want to use as we get to the exercise part of the show in a little bit. But we can also verify that, the button says, add item on it or something along those lines.

[00:03:55]
Next we will not use side I get, we would use contains. So we can flip back over and we could say like it, I don't know, should have the words. In the beginning they're gonna be a little contrived, add item so here we do side I get or decide I contains Add item, it doesn't matter if it's a button like you might use this for the name, your application, the company, so on and so forth.

[00:04:29]
In this case, it will go ahead and say do these words appear anywhere on the page. In this case, you can see that it does and I'll even highlight where.