Recording Tests

[00:00:00]
>> As we showed before, I can go and pick something here as well and get that, and it'll put it on my clipboard for me to use. That is great, and then I can see the visual feedback. But on the theme, cuz again, like I said before, I think that Playwright is probably a course in and of itself, or a workshop in and of itself.

[00:00:20]
But in the terms of like, I need sanity around my app cuz I'm tired of getting paged, and I need to do this big refactor, and I need to put some of this stuff in place ASAP, right? And I understand the trade-offs from unit tests all the way through, I'm here for it.

[00:00:35]
I think one of the most powerful things that you can do with this, is you've got record at cursor and record new. Let's do record new, that way I don't have to worry where my cursor is. And it spins up a browser, we will go to localhost 3000.

[00:00:53]
Would you wanna, maybe, just change that to the slash? Probably, right, if you had the base URL set. There are little things you might want to tweak, but go in here, click on that, type in, we want a Charizard, that's what we wanted before? Charizard, we click that.

[00:01:09]
We'll see it rendered on the page. There's not a lot of other stuff to clicks. Let's go over to secret menu. You could literally spin this up, just drive through your entire app in one mega test, right? Just in terms of sanity check we'll go pick KFC, by the way, when I talk about things I do when I should be working on my workshop, finding a dataset for all of the secret menu items at all the fast food restaurants.

[00:01:35]
And then massaging and parsing that data into a table, and then building stupid rating sliders, is a thing that I did. [LAUGH] Right, because that was the best use of my time. And yeah, the fact that there's table div scroll, that didn't happen on its own. And what else can we do?

[00:01:59]
We go in here. Let's go sign up for an account. I have made so many weird email addresses. And I get that feedback of what everything is. Let's say live coding, because there's definitely no way that I did that earlier, @gmail.com. This doesn't send any emails.
>> Is the scrollable table div accessible?

[00:02:19]
>> I have no idea. This is mostly I wonder if table divs can scroll.
>> I wanna do that, but I don't think the accessibility team would like that. Tom.
>> The best part is I was talking, I don't even remember what email and password I used, but luckily if you look over to the right, this entire test is being recorded.

[00:02:35]
So I could theoretically look at my own thing. Okay, there's some stuff in the database over here, I would really like to see what I'm doing here. So we can go ahead, I can write a new thing which is, restarting computers is the best, hit Enter. There it is.

[00:02:55]
This is in case I wanted to tweet and I have something stupid to say, I can just write it in this app and everything's fine. Updated, given maybe an exclamation point or two, maybe not. I found how to bug him out, right, I can't edit that. We'll go close out, then we will sign out.

[00:03:15]
I don't know, whatever you wanna do. I think I've made my point. So then we can go back here and we can hit Cancel. And what you see, it's possibly the ramblings of a madman. But in a lot of ways, effectively the test it does, cover a lot of my app, right?

[00:03:36]
And gives me, at least in terms of like, hey, is this thing doing the thing? Is it running? Can I navigate around? Am I seeing the things I'm supposed to see, right? When I do that much, well, maybe pausing and do a few expectations every once in a while, I probably would.

[00:03:53]
There are things that you need to fill in, in my experience, and it might just be my bad coding, but I had to change some of these to type. It also helps me figure out where my locators are less than ideal. That's because there should be no dash in between those two, right?

[00:04:13]
So also like a great sanity check, cuz I didn't know that I made that boo-boo, you would have watched me try to type and not have it not work. I changed this to just a slash, so on and so forth, all sorts of stuff. There was just random stuff that I, well, I didn't really know what password I was gonna use.

[00:04:28]
There you go, wow!
>> I noticed you had deleted one of your passwords. Looks like that Line 19 there right above your cursor, Meta+a, is that a delete key?
>> That's a command I have for select all.
>> All right.
>> Yeah, right?
>> And then you just typed over it, I see.

[00:04:42]
>> Yeah, I was talking, I was like, I wonder how many letters I hit I don't remember, let me start over, right? So yeah, you would probably do some cleaning up here. But in terms of verifying that all the stuff in place, can you click these things, can you navigate, and stuff along those lines.

[00:04:57]
This will get you a lot of bang for a relatively small buck relatively quickly. And since it will go anywhere on the Internet, you can drive a browser, you can use that information for anything you want. And even with GitHub workflows, you can schedule them. I don't know when tickets go on sale.

[00:05:16]
Whatever, all sorts of stuff that you can do, Justin.
>> How would you do this if you're not using the VS Code plugin?
>> Yeah, you definitely don't have to do the VS Code plugin. The nice part is there's the record new, which will make a new file.

[00:05:29]
Cuz these are all protocols in actually Playwright in driving Chromium itself. A lot of that stuff is cool. There are reasons why you might not want to do it from here other than the fact that, like I said before, this extension is somewhat wonderful. But also did cause me to have to restart my computer cuz I had some errant process that I couldn't kill off.

[00:05:52]
So if you want to do it from the command line, you can do npx playwright and codegen. And this will kinda start up the Playwright inspector, which will look somewhat similar with a record button, That you can turn off and on. So we'll go ahead, get everything where I want.

[00:06:24]
I can hit Record, I can go here, I can navigate around, I can do some things. Close that modal, so on and so forth, and get a lot of this stuff in place as well. And then you could copy this. The other thing is this will set up a Playwright test for you.

[00:06:47]
Also, Playwright supports these other languages that I don't care about. You could also, if you wanna, actually just run it as a script that controls a browser, you can switch it to library, and this will now be a node package. You can just do node, whatever, and it will do all of this stuff for you for various non-descript reasons that you might choose to have happen in your life.