Transcription
What if I tell you that you can convert your Playwright UI test into a pure API test with the help of AI? So, let me show you how.
Uh, for this demo, I created this `ui-test.spec.ts` and this is a simple test in the Conduit Bonder Academy application. So, what we do here is just logging in over here. Then we're creating a new article on the homepage. Then we validated the article is created. We're going back to the global feed. Making sure that this article is displayed on the global feed. And then we're deleting the article. Then validation at the end that the article is deleted from the global feed.
So, let me run it for you real quick to make sure that this test is working. I'm running this UI test. Opening the browser. Logging in. Creating the article. Deleting the article. Done. You see it was very quick.
When this test is executed, our browser is sending API requests to the back end to create the article, to get the article, to delete the article, all those typical CRUD operations. But what if we could convert this test and doing this somehow automatically, uh, to reduce the manual work? Let me show you how to do this.
So, the first step, we need to generate a HAR file. What is a HAR file? Uh, a HAR file in Playwright will record the network activity. Everything what happened in the browser will be recorded in a JSON file. For that, you need to add this flag into the new context: `recordHAR` with the output of the name of the file and select the mode `minimal` because otherwise, it generates a lot of stuff. Uh, so after that, we need to run the test. I'm running the test one more time and it should generate the HAR file. All right, test is completed. Going back to the file explorer and here we go. The output HAR is generated. This is a huge and giant file. Look at this. It has already almost 3,000 lines of code. Just insane.
And this file has all network activity. What happened in the browser and has everything what we need and what we don't need. So, for example, if I search for `conduit` API specifically, the API that we need, here we go. This API is only on line 1,000 to get the articles, but it has other not needed requests for us, for example, this some JS request for the Conduit or, uh, what else? Uh, another JS. So, we don't need those. So, before using this file, feeding this into the AI and generating API tests, we need to clean this up.
So, the step number one, you need to clean. Uh, for that, I created a simple JS function. So, this guy, this guy is just taking this file, processing it, and deleting everything what's not needed, like headers, cookies, HTTP version, body size, all not needed properties. And also, it's filtering the file only by `conduit` API application and, uh, removing also the JPEGs if they have along the way. So, at the end, we should receive a much cleaner and smaller file that's easy to work with.
So, we need to run the terminal. New terminal. And I just run this `HAR converter` which will generate for me a filtered `har.json`. So, let me do this. Uh, `node --converter.js`. Running this guy and we have a new `filter.json` generated. And look, this file is significantly smaller. This file has only 400 lines of code. Much better, right? And now with this smaller file that has only network requests and responses related to our operations, look, this is a delete request. This is a get request. So, everything what we need.
So, now using this JSON file, we will convert it into the API test. How? With the help of AI. So, going back to the Copilot agent, opening the Copilot agent. And, um, before that, we need to provide the instructions how we're going to do this. For that, I created several documents.
So, first of all, `copilot-instructions.md`. This guy, this document explains, uh, how my custom API testing framework based on Playwright is configured. So, uh, what technologies do I use over here? The structure of the framework, the pattern how the framework is designed, the methods that are used in my framework, and so on. So, overall description of how my framework works.
Then I have `instructions.file` how exactly to process the HAR file and the same thing. So, where do we have request entries? Request method, URL from request URL, the body from the request, `postDataText`, and this is a JSON string. So, I've given enough context to AI to explain how to read this JSON and then with a bunch of examples. This is how we get all the properties. This is how we extract the path from the URL. This is how we process the query parameters that we need. Uh, then, uh, how we create the variable naming convention because when we create a subsequent request, we want the next request to use a previous response with the needed arguments and so on. Request translation. This is how it works. Authentication. We're not going to use authentication because the framework is configured to authenticate automatically. Uh, dynamic values generation. It's again an example of using the variables from the previous request to use it as a part of the next request, like this. Then data generation. We use a Faker library to dynamically generate the data such as create new article text and so on to make sure we don't have any issues and some of the required elements. Test naming and code optimization. We also tell that our tests have to be step by step. Step one, step two, step three, and so on with an example.
And the next step is the actual prompt. The prompt is much smaller. So, we just say, "Hey, process provided HAR file and create a single comprehensive API test." Additional reference to the instructions and some basic steps for the tasks. Now, we can feed all this converted HAR file, instructions, and prompt into the Copilot and it should generate for us API tests.
So, going back to the Copilot, I will need to add to the context, uh, `filtered-har.file` number one. Add to the context `instructions-har-processing`. And we need to add the `generate-test-from-har` prompt that we created in advance as well. And let's run this and let's see what's going to happen. So, yeah, first of all, the filtered HAR is highlighted because we probably exceeded the context window for the Sonnet 3.5. That's all right. Probably it still should work.
All right, going back over here. Copilot should start cooking something for us. So, searching for `codebase-post-article`. It's looking for some additional references, looking into into `data-generator.ts` that generates the random data. Let's see. Oh, here we go. And that's our API test.
All right. So, let's review it and see if it's working. So, first of all, it's just a general GET request to get the list of articles. GET text. Create new article. Look at this. It's making the article create request. Everything is fine. Uh, where did it get the article from? From the random generator class that we also have in our project. It figured this out. Then get created article details. Get the comments. Then delete the article and verify the deletion of the article that it's not existing anymore.
Uh, yeah, I think it looks good and let's try if it's actually working. So, I'm running the test. Will you do it? Yeah, now it works successfully.
So, you see, this is the general idea how to generate the test from the UI to the API. In my example, I'm using a customized API testing framework based on Playwright. You see the syntax is a little bit different. I have a custom method such as `pathParams`, `getRequest`, and have a custom method `shouldMatchSchema` to make a schema validation. When needed, I can additionally add some traditional validation to validate the properties of the JSON file in the response and so on.
And, uh, technically, if you provide a good prompt and a good instruction on how to process the HAR file based on your application context, the AI is capable to generate a meaningful API test. Then you can tweak them manually here and there to make them meaningful for your business flow. Other than that, it can create a great boilerplate for your existing UI tests in the form of API tests.
If you want to learn how to create the framework like this, to create this kind of API scripting framework and this kind of API scripting experience with Playwright, join my Playwright API Testing Mastery course where I teach how to build things like this. You can find the link in the description. If you have any questions, please let me know. Ask them in the comments. Other than that, I'll see you in the next video.