Playwright Overview

[00:00:00]
>> This last leg of this workshop is called, things that Steve is really excited about, mock service worker. Let's talk about Playwright. So we talked a lot about the unit tests. Great, fast, awesome. Not super great forgetting that sanity check very early on when you are either, maybe it's a bad code base of your own, maybe you're responsible, maybe you inherited it.

[00:00:26]
I'm saying that you inherited it just to give everyone a feeling, but some of you are like, no, I did this. Honestly, to be clear, there's a lot of reasons why your test coverage might suck that are your fault. A lot of reasons why your test coverage might be bad that's your fault, but then choosing editing which one they like.

[00:00:47]
I think a lot about like a year ago we we did this rush to build out this Admin dashboard for managing a whole bunch of stuff around our SaaS product, right? Because previously if you wanted to add a user, you filled a Zendesk ticket and someone from engineering did it.

[00:01:02]
There's a cap on how many customers we can onboard when you're doing stuff manually, right? And it was uncalled for the cloud team was terrible. So we chose to do one of those mad dashes, right, and get some stuff done. And the APIs came late, as I joked about before, but we had stuff, so we were good but integration was hard.

[00:01:19]
But we were also still figuring out, the designs were changing. So did we write really great tests? No, because we didn't even know the full shape of the thing yet, right? And like, yeah, we threw it together somewhat quickly, right? And so there have been times, honestly, in the last nine months that I have been responsible for code bases that I would be embarrassed about demoing in front of you, right?

[00:01:42]
And for really good reasons that I'm very comfortable with having made, absolutely, right? So then the question is like how do you actually know this thing works in the perspective of a customer or user? And then also the way that I'm mostly going to kind of spin this because again we did an entire workshop on Cypress.

[00:02:00]
We should probably do an entire one on Playwright at some point. Right, talk to Mark. But the theme that we're gonna kinda focus on here for our purposes is how do we use this tool? To the question someone said before about what 20% and what 80% are you covering, right?

[00:02:20]
How can we use this tool for rapidly getting some sanity around this code base? And so we're not gonna go all the way into everything Playwright does. We are going to do the high level of, here is the 20% that you need to know that will make your life a lot easier.

[00:02:41]
And then we can kind of build on it from there. So, with that, let's do a quick like just read everyone on what Playwright is. The prior iterations of Playwright have gone by other names. I mean, they've been different technologies. You might have used like WebDriver.io, Selenium which is the Jenkins of why I'm gonna get so many emails.

[00:03:11]
There's Selenium, there's WebDriver, Cypress, Playwright is the latest hotness and for good merit right now just because it's the newest. There is a protocol for interaction and driving Chrome. It's either the Chrome Developer, a CDP, kind of basically driving operating Chrome. It's like if you use like puppeteer, the same basic kind of concept.

[00:03:40]
That team I believe it's at least somewhat owned as a strong word maintained by Microsoft this point. But the team did work to kind of build the same bindings for Firefox and even WebKit/Safari, so you can drive all these things based on the modern, latest and greatest JavaScript tooling.

[00:04:04]
Cuz I was like I've joked and alluded too between ES modules and TypesSripty stuff, right? The ecosystem has like done one of those like giant quantum leaps in the last few years where even just in Cypress and I to be clear I still have a slightly older version of Cypress like things that don't support ES modules like Storybook was guilty of this.

[00:04:27]
There's a lot of things that basically became untenable in modern apps because they were built on common js cuz that's what existed at the time. So in a new app I would definitely say stuff that if it were a modern app, cool. You might still choose to use like all this stuff will work too with the older stuff as well.

[00:04:43]
But, so it does bring a lot of that modern module system build processes to the table. It also does drive Firefox and even Safari cuz Safari is a weird one these days. And allows you to do a bunch of really great stuff for basically spinning up a bunch of browsers, navigating through them.

[00:05:03]
And kind of kicking the tires on it. And like I said, honestly a few really good integration tests. So one of the questions from the chat before if they break, won't give you a lot of insight to why they broke cuz they are far from the implementation. But a few really good browser based integration tests will at least give you the confidence that everything works, right?

[00:05:27]
Not a lot of insight when it doesn't. But giving you a lot of confidence that things actually work the way that you want and getting you to the point where you can start on that large scale refactor. And trying to pay down that tech debt without losing your mind in the process.