Playwright

[00:00:00]
>> Steve Kinney: There are a lot of cases where if you can pull stuff apart and unit tests are great, do it, right? Unit tests are fast. If you've pulled enough pieces apart and started to untangle the knot. And again, there's no judgment. There are parts of my code base that are broken out into small well-named functions, there are parts of my code base that are not, right?

[00:00:25]
You are always balancing these, quote-unquote, best practices with reality. Reality is sometimes time crunches, reality is just sometimes things get that way, right? And you're constantly battling back complexity, and that's your job. And so there's no judgment for if things have become a bundled ball of chewing gum and string.

[00:00:48]
Because there are parts of my code base that are really easy to test and have 100% test coverage, and there are parts that aren't. Let's just say that, right? And that is very true, right? And the thing is, it's like, well, we're not gonna do anything. You're never gonna get six months to untangle it all, right?

[00:01:06]
The idea is, you put enough in place. Again, it's about lowering that stress threshold more than anything else. And sometimes, yeah, I can't get at that function, I cannot pull out that getter, got it. Sometimes the best thing to do is, at the end of the day, nobody cares about dependency injection or how you structure your code.

[00:01:26]
Some of the biggest code bases that I've ever seen are some of the worst code bases I've ever seen, right? before there was some tool, whatever. I have heard stories that I'm not at liberty to share of 14,000 line user control files on the server side, right? And that organizations were a subclass of users and were another 10,000 lines.

[00:01:57]
And this is a tool you use every day. And so, yeah, we can have these strategies, we can have best practices. But even my own code base, cuz it's open-source, I might as well not lie about it, has some bodies buried in various places, right? And so with that, yeah, cuz sometimes its time crunches, sometimes over time, things just degrade, right?

[00:02:21]
And so then coming up with a strategy approach of how you do it. At the end of the day, unit testing is fast and easy. But when someone visits the page, does it work, right? So we are briefly gonna talk about Playwright. Now, to be fair, one could do an entire day on Playwright, right?

[00:02:39]
So I'm going to kind of do the high level thing. And if it's something we're interested in, we can dig deeper into it another day. But let's at least talk about this, and one other strategy that I'll kinda add as a further reading exercise as well, and how these things all kinda play along with each other.

[00:03:00]
Okay, so what Playwright does, and Cyprus is another alternative, right? Fine, whatever one works for you, there's a whole course in Cyprus that we already did. Playwright is what I use today, so that's what we're gonna cover. Basically, what it does is, is it takes a browser, right?

[00:03:18]
Could be Chrome, could be Firefox, might even be Safari, and it points it at your site. And literally, if those component tests we saw were testing, we're supposed to simulate a user. This is really just firing up a browser, pointing it at a website, and doing the thing, right?

[00:03:35]
And so I have one that's kinda filled out a little bit. And then I have one that is not so much to kinda show you. One thing I wanna point out is, and this is on purpose. That if I only showed you this part of it, right, you would be like, that looks a lot, other than his little bonus weight in there.

[00:04:06]
That looks a lot like testing library, right? That is because testing library did that on purpose, right? And the difference is, that was loading a component mounting to a simulated DOM and letting you do stuff with it. Great for individual components, right, super fast, but a lot of times you are missing the entirety of the app, right?

[00:04:31]
And there's a time and a place for have both. Unit tests are fast, easy, you get that feedback. You can see exactly what line wasn't doing what you expected. But overall, sometimes you gotta look at the big picture too. And so yes, this is going to theoretically pull up the app.

[00:04:49]
It's going to navigate to a particular page. I think this one's running at 3,000 now though, cuz I have two servers going at the same time. And it's going to navigate to it and it's gonna expect it to have a given title, just simply by looking at the page itself.

[00:05:07]
And some of the tooling is really great about this as well. So if we go to local host 3,000, you kinda see the app real quick.
>> Steve Kinney: Is that not the port that is running on? Server's on 3,000, sorry. This is at 51 74.
>> Steve Kinney: Right, it's a to-do list.

[00:05:38]
Who's never seen a to-do list example app?
>> Steve Kinney: Great, this one's got a little bit of a server thing going on, awesome, cool, cool, cool. You can add stuff, you can move stuff, you can check it, it's done. And these tests are great because you don't necessarily need to have pulled anything apart, right?

[00:05:59]
If you're just saying, I would like to start refactoring stuff, and the act of pulling stuff apart to get it easier to unit test causes my anxiety to go up. These tests are great. They're heavy and take forever to run, and they are a little bit flakier than seeing it four was the output of two plus two.

[00:06:20]
But if you need a lot of test coverage real fast and not, this will never show up on a test coverage report in any meaningful way. But spiritually, if you need to know that you haven't fundamentally broken your app, this thing is at least gonna go through the app faster than you are, right?

[00:06:35]
And so here we have it running. And then I have some tests in here. And then we'll show it on that accident counter, too, so you can see it in both ways. I did change that to the wrong port. Cool, So let's go ahead and let's spin this one up.

[00:06:52]
So I just have it set as npx Playwright test.
>> Steve Kinney: And you can see that it is going to pull up chromium and give me a full report, but should add the test is failing. We'll take a look at that in a second. What I wanna do is, get the dash dash UI, cuz this is really great.

[00:07:23]
Because you can see, not only, you can run all your tests from here, but you can also see the timeline, right? So there it was loading.
>> Steve Kinney: It goes ahead. And you can see, with the click events, you can see that little button of where it clicked, where to highlight event.

[00:07:49]
Just like we saw with the plug in before, you could actually take this and you can get by placeholder, or you can get by label text, or so on and so forth. Sometimes the automatic selector isn't the best, but you can kinda go through. You can even navigate through the page, see it before and after, and begin to navigate through everything.

[00:08:13]
My problem is that right now this one isn't clearing stuff out in between, which we will talk about as a separate thing in a second. But we'll do this with the async counter, and then I'll show you some techniques around this as well. But, this is the first one I opened up, but you can actually kinda go through and just take it on your app today.

[00:08:34]
In fact, this is going to local host 5,174. You could point this thing at production, right? Good luck navigating login and stuff like that. But theoretically, it is just a browser that you are controlling with JavaScript, right? And it pulls up your application and it goes through, and it can start hitting buttons and doing things, right?

[00:08:58]
This is one running locally in development, but we can also take a look at other examples as well. But you can kinda see an individual test in a given case, so on and so forth. Again, the timeline, everything. The important part is, let's look at, other than a MPX Playwright in it and a tiny little bit of test files, there's not much that I've written in here, right?

[00:09:25]
But we will talk about one of the problems in a second, which is, basically what we're saying is, fire up the browser, go to the page, right, before each one, right? In this case, it should have the title that we expect, right, in the browser. Go ahead and get the input field, create task, find the Submit button, type something in, and click.

[00:09:53]
This one, it is little angry cuz I've got seven with the same title. We will talk about some of those problems in a second. Go find a heading, right, that has the name of the title, we can expect it to be visible on the page.