Mocking APIs with Playwright

[00:00:00]
>> What about stuff like, okay, this is great, Steve. You're using a JSON files populating that data. We can say something like, what about that thing where I just tweet at myself? That other one was Echo Chamber. Where I just tweeted myself like, that was hitting API from a database.

[00:00:19]
And like I would I do control this database but like, I don't control that database and other things could happen. I'm like yeah, that's true. That's true. It's totally accurate, check this out. So we can do it from the browser we can do it from the command line.

[00:00:39]
I am going to paste this in because it is gnarly enough. It is in the notes and it's also like, I believe it's in the docs as well. I'll paste it in. We will talk about it. You've got this playwright open, which opens the browser just like we saw before.

[00:00:54]
I mean, you can do it with the codegen as well. No, no, no. I'm not doing impulsive changes to the plan. What I want to bring to your attention is this. Are you all familiar with what a HAR is? A HAR is basically anywhere in Chrome in the network tab.

[00:01:16]
If you look at any network request and right-click it, you can do like copy as curl. Super cool. Then you can paste it in there and get the network request. The cool thing about Chrome too is that it'll store stuff like the auth token and cookies and stuff like that.

[00:01:32]
A HAR is basically a file format that is a recording of all the network requests. That it saves to a file. So we've got the save network request.HAR, and then the glob is going to be like maybe, we don't need to save every network request, maybe only ones that are the API routes, right, and then spin up localhost 3000.

[00:02:01]
And we've got the code gen here, and we could hit record and go somewhere. And it did put this interesting extra thing in here, which is record HAR, great, great, great. It's gonna write it to this file in the root directory, not my greatest choice ever, with this URL filter.

[00:02:28]
And then we'll also generate the test. Cool, cool, cool. Go around, let's hit this one. Pika, great. And we'll stop the recording. And you do need to close the browser context. But this will create a file recording all the network requests. Out of the box, Playwright also has the ability, just like we saw with Mock Service Worker, to intercept network requests, right, which you can do manually, just like we saw with mock service worker, or it has a method routes from a HAR file.

[00:03:07]
So theoretically, you could go navigate your entire site, record all the API requests, and then have that be the mock server. Of your own real data as you navigate around and like run your tests, right? And theoretically, if it's also recording the moves you took to make the test.

[00:03:27]
You should have a completely like for all the network requests mocked out test suite that you can go navigate do all the things in your app. Are they gonna be the prettiest? Are they gonna be maintainable? No. Are they going to exist? Yes. All right, and then you may choose to begin to refactor them.

[00:03:46]
You might choose to begin to like, figure out our integration tests. Why would you want unit tests or like what is the level that you need to get to? You could choose to do all of those things, but this will get you most of the way there incredibly quickly.

[00:04:02]
And anyone who judges you whatevs usually will write this when we get the browser context.close. Let's see, do I get a file. There it is, networkquest.heart. Let's open it real quick. It's not anything to look at, to be clear. But you can squint at it and see some things about it as well.

[00:04:30]
As you can see, it's effectively a JSON file. And the reason I bring this up is like a lot of times I will do this recording and then as a JSON file, you can edit it, right? Like I can probably, let's see. Cool, like these are basically everything from the headers to the text response to the mimeType.

[00:04:55]
That everything that basically happened, it is a recording. You can then use this in your test to then simulate the entire network requests at the moment of, and get all of that stuff incredibly quickly, and also do try to tie a lot of the stuff together. What I will do a lot of times, if I'm doing the thing where I'm trying to translate what I got from the API into something I can use, a lot of times even when I'm running a unit test.

[00:05:18]
I might choose to do all the recordings of all the things I'm gonna need, right? Put the UI in a bunch of different states, record all the network responses, right? And then break that into a bunch of JSON files that I can load into the unit tests and do all the massaging of the data with, and then tweak and do a bunch of other stuff with.

[00:05:36]
And using one tool does not mean it can't inform another one of the tools that you use. And make stuff a lot easier for you. And so like all of this stuff, what tests you choose to use can all kind of like string together? Dustin?
>> So which is better Cypress or Playwright?

[00:05:53]
>> I think you should totally watch my Cypress course is great. [LAUGH] I would say like it to be clear there is a new version of Cyprus that apparently has component testing built in. I have not migrated yet. So, to be clear, that was being a little bit glib.

[00:06:10]
I will, sometimes you make mature technology choices. Sometimes you're on an old version of Cypress. I think I'm on version nine there is currently version 12. And when we're doing the other, we have like two code bases. And someone on my team said, can I use Playwright? I was like, yeah, go for we're already behind anyway, so like, it's gonna be different no matter what.

[00:06:33]
And then I ended up liking it, but I have not used a new version Cypress I don't actually really know. But that's pretty good, right? And so a lot of this is super powerful but like I said before, it can also inform your unit tests. It can also inform your component tests, it can also inform other parts of your testing is not a necessarily well if you generate from Playwright it only works with Playwright this is a JSON file it's actually a standard that Chrome could have just using the Chrome protocols that could have given you and you can like begin to start like figuring out what you wanna do with this data.

[00:07:07]
Here's the body with the text. You maybe would format that JSON parse, that thing, right? And you will have roughly something that you could use for unit tests as well.