00:00 Whenever you're writing an automated test, the way that I like to think about it is you put yourself in the shoes of the product manager, whoever's deciding how the product actually works. And that person, you just imagine yourself telling a manual tester what they should be doing.

00:18 Every time there's a code change, I want you to go in here and do this. And so for the thing we're going to be testing, this is what I would say to that manual tester. Go to the homepage, type in Cody into the search box at the top, hit enter, and that

00:34 should take you to the search results page and you should see one user there named Cody. And then if you type in something random, just like whatever, something that shouldn't match anybody, then it should update to no users found.

00:50 And so that is the thing that we want to make sure continues to work even as people are making changes. So that is the manual test case. So those are the steps. Once you have those steps either actually written down or just like in your mind, then you can convert that over to an automated test using Playwright.

01:09 And so we've got Playwright all configured in this project. We can run NPX Playwright test with UI mode, or you can run NPM run test colon ETE dev and that will run those tests in UI mode as well.

01:26 And then, of course, you can use the VS Code extension for Playwright as well if you prefer to do that. But we're going to be using UI mode. So let's pull this over here. This is UI mode. Now, the Playwright team is actively working on this UI mode. So you may have a slightly better and improved version of this because they're always coming

01:45 out with cool new features and things. But the basic idea is the same. We've got our tests over here on the left and then the actions for each individual test. The one that you have selected will be here and then the preview of what the app looked like or the trace is what they call it here. And then here's our timeline and various other things.

02:04 I want you to spend some time as you're developing this test getting to know the Playwright UI because it's really, really useful and something you're going to spend a lot of time in. We have no tests, of course, so you're going to be making a test. It's possible if Playwright UI mode is doing something funny, just turn it off and turn

02:22 it back on again and it should be all good to go there as well. And I think that's everything that you need. So you've got the steps of what you're supposed to be testing. You have Playwright UI mode going on. So go ahead and create the test and we'll see you when you're done.