00:00 So let's go ahead and go to our test.ete.search.test file. This is where our tests are going to be. And we're going to import, expect, and test from Playwright Test. And this is going to allow us to write a test. We can give it a title.

00:17 So we can say, search from home page. And now we've got our steps. And this is going to be async for sure. And we're also going to need the page to be able to execute different commands and tell Playwright what to do with the page.

00:31 So step one, we're going to say, await page go to slash. So that will take us to the home page. And with that now, we've got our test showing up right here. And I can hit play on that. And that will take me to the home page. Awesome. So we're in a good place there.

00:49 I'm going to turn on watch mode so that this reruns every time I save. OK, so now we need to fill in the search box with the search term Cody. So we need to find this search box. Now, there's this pick locator. And so now I can click on this.

01:07 And it's saying, get by placeholder search is the way that we should go about this. That's not the way that I would do that. We've got a more accessible way to do this. And so instead, what we're going to look at is I'll pull up the DevTools.

01:25 And here, let's bring this over here because you need to see this. And with the DevTools open, I can identify this specific thing right here. So I'm going to click on that. And so now I see that is the input.

01:41 And over here, we've got this Accessibility tab. And the DevTools work, of course, in your regular browser as well. So these are the exact same DevTools. So we've got this Accessibility tab. And in here, we've got a bunch of computed properties

01:57 and other implicit accessibility roles and things. So here, it says Search Box and Search. That is the role and then the name. So we can see the name. That is coming from the label is determining that name. So this is the order of specificity

02:16 for how we determine what the name of an element on the page is. And that name is what's going to be read by a screen reader when the user is navigating around. And then we also have the role of Search Box. And that is coming because our type is Search.

02:35 And so we can query by the role and by the name. And when you can do that, you should. So you should try as much as possible to query by the role and accessible name. And so that's what we're going to be doing. This Accessibility tab is going to be your friend.

02:52 So focus on that for creating these queries. And it is very possible that in the future, the Playwright team will improve this pick editor to be able to find things by the role properly. Here, it chooses by role.

03:08 Just for some reason, decided to do Search as the placeholder. I wouldn't do it that way. OK, so let's put these things back again side by side. And with that, then we're going to await page. And we're going to get by role.

03:26 The role is Search Box right there. And the name is going to be Search. I like to do a regex for this because the user doesn't care whether the S is capitalized or not. And so I like the case insensitivity here.

03:43 Not everybody agrees with me, and that's OK. But I like it that way. And then we're going to fill it with Cody. And then we want to click the Search button, so that little button right there. So CodePilot's right. This is going to have a role of button and the name of Search as well.

04:01 So when we click on that, it should perform a search. So let's save that. And our test should rerun. And now we can see really, if you look closely, you can see that says Cody. And then it has this little red dot that's saying that I'm clicking on this thing.

04:18 Now, it's not transitioning over to where it should be going because the test is over so fast that the transition never actually shows up in this preview. And so, yeah, we just need to keep on writing our tests, and we'll see that it, in fact, does transition.

04:36 So one thing that we want to do is await page wait for URL. There we go. To be slash users, and then the search is Cody. So let's save that. We get our test rerun. And now our URL does, in fact, get updated. But again, the test ends so quickly. So let's keep on going.

04:56 And we can actually do our first assertion here. So let's just make sure that once we get to that page that the title is correct, Epic Notes Users. So we're going to expect the page get by get. Here, actually, let's take a look at this

05:14 and pull up the Accessibility tab right here. This is a heading with Epic Notes Users. So get by role, heading, heading, name, Epic Notes Users. And we can expect that to be visible.

05:33 So this is what we call an assertion. So this expectation is an assertion library. And it has a bunch of different things that you can assert on, even asynchronous things that can happen, or to be enabled, or all sorts of things. Very DOM-specific assertions, because we're asserting on the DOM.

05:52 OK, great. So now we finally do actually get over there. And we can see we have Cody in here as well. And so we can start making assertions on our results here, too. So we just need to have a nice mechanism for getting the list of users. And so if I come over here where it's a little easier to see all this, and I say, hey,

06:12 search for Cody, then I select Cody right here, this is where all of my users are going to be inside this UL. In our Accessibility tree, we have list and list items. And within those list items, we have these anchor tags and all that stuff.

06:27 So let's use some of that stuff to make assertions on our users. We're going to get our user list from page getByRole main. So everything we want is scoped into the main. We have other lists throughout, like navigation and stuff.

06:45 So we're going to scope it down to this main element here. So getByRole main, and then underneath that, we're going to additionally query getByRole list. And so this is going to get us that list of users. So then we can make an assertion.

07:00 We can say, expect the user list getByRole list item, and that should have count of 1. We should only have one user as a result of this, and that ran so fast that we didn't see it, but it did run.

07:19 OK, there's that expect to have count right there. And then we need to expect that we can get the alt text, Cody. So we're looking for Cody's image right there to be visible. And with that, yep, Cody's image is visible.

07:38 Awesome. OK, so now we've got the next step, which is to update the search input to something completely random so that we can test the empty state. So we're going to await page getByRole and a search box, and we're going to fill it in with something non-existent,

07:57 something that communicates we're not expecting anything to come back from this. And then we'll click on the Search button, and we'll wait for the URL to be updated to include that in here, non-existent. And then we can make some assertions here as well.

08:15 So our list item, we shouldn't be able to find any list items, and we should be able to get the text no users found, and that should be visible as well. So save that. Our test reruns. And here, we can watch this timeline here. We type in Cody, and then we go there.

08:34 We make some assertions on Cody, and then we type in non-existent and no users found. And then we can also preview all of those steps here as well. So that is our first Playwright test. We made a test called Search from Home. We go to the home page.

08:51 We type in Cody in the search field and hit Enter. Then we wait for the URL to update. Actually, I get this question quite a lot. Why do we make assertions on the URL? Well, we don't always necessarily wait for the URL like this. That's not always necessary.

09:10 But the URL is actually part of the API for our application, even for a regular user. It's part of what they expect out of using our application. They want to be able to bookmark stuff and everything. So if that's important to you, the URL being consistent and things, then yeah,

09:28 absolutely add this wait for URL. You can even make assertions on the URL. But yeah, this is something that I don't always do. But in this case, it made a lot of sense to make that assertion because that seems like an important part of this page. OK, so we make that assertion. Then we make sure we're on the right page with that heading.

09:48 And then we get into the main of our application, so the main portion of our app, and look for the list. We should only have one list of users. We verify that there's only one list item and that Kodi shows up within that. And then we type in the search box something completely random.

10:08 We click on the Search button. We verify that the URL gets updated and verify that there's no user found. And that satisfies our product manager. Good job.