Intercept Browser API Calls | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Interacting with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we learned how to intercept browser API responses , save the response into a variable, and extract the response body for later use in tests. This technique is particularly useful for retrieving specific test data from the response body. Lesson Overview We automated a scenario where we: Created a new article titled "Playwright is awesome" . Published the article. Validated that the article appeared in the global feed. Deleted the article using the API to clean up test data. Key Steps Create the Article: Fill out the article title and content. Publish the article using the await page.getByRole method. Validate Article Creation: Check that the article appears in the global feed. Intercept API Response: Use await page.waitForResponse to capture the response after publishing. Extract the slug ID from the response body. Delete the Article: Make a DELETE request using the slug ID. Assert that the article was successfully deleted. Conclusion By intercepting the API calls and using the response data, we can effectively manage test data and ensure our tests are repeatable without conflicts. This lesson demonstrated the complete flow from article creation to deletion using API calls.
Video Transcript
In this lesson, I will show you how you can intercept browser API response, save this response into the variable, and then extract the response body from this variable and use any values from the response body later in your test. So this technique is very convenient and very useful if you need a particular test data in the response body to be used later in the test. In this lesson, I will show you how to do that. Let's get into it. So here's the scenario that we're going to automate in this lesson. So we're going to create a new article. For example, Playwright is awesome. Playwright's automation is easy. And we create a new article. I click Publish the article. And then I want to delete this article without using the UI. So after the article is created, we go to the homepage. We navigate to the global feed. We validate that this article is displayed in the global feed. But then we want to clean the result of our test. We want to clean this article from the backend server so we can run this test again and again. And we will not have a problem when we cannot create the article with the same title. So to avoid this issue, we want to remove this article. And the fastest way to remove this article is to delete using the API. Here's the question, how to delete the article using the API? So let me delete this article manually and let me show you one more time this creation process. So I open the networking tab. So we will see our all API calls, create new article, and I type it one more time. So I type right now any text, it doesn't matter, just to speed up, and I create publish the article. Application make a request to this endpoint, post API articles. And in the response, we can see the value, which is a slog. Slog is the unique identifier for this article. Knowing the slog ID, we can use it to delete the article. Because look, when I click delete the article, and if I review this request, this is a delete response, API real world articles. And here we can see this ID as part of the URL and method is delete. So in order to delete the article from the list of the articles, we need to know the ID of this article. But in order to know this ID, we need to intercept this ID during the step of the article creation. And then when the test is complete, at the end, we can make an API call to delete this article. And this is what we're gonna do in this lesson. So going back to our framework, and I create a new test. So this new test will be responsible for creation of the article and deletion of the article will be done using API. So let's first of all automate just the normal UI flow of article creation process. So what we need to do, we need to click on new article first. Let's script this out. Then the next step, we need to fill out article title and we can use the name inside of the placeholder. GetByRole, this is a text box, and we can use the name inside of the placeholder. GetByRole, this is a text box that has a name, article, title. You want to fill out with the text, let's say, Playwright is awesome. The next step, we need to fill out the GetByRole, the same text box with the name, what is the article about? Inspect, and I'm copying this text. And you can see we have an issue because we have a conflict of two single quotes. So we can escape this single quote by the backslash and this issue will be fixed. And we want to fill with, let's say, about the playwright. Next field, page, GetByRole, text box, and this text box is this one, inspect. And for example, we like to use Playwright for automation, something like that. And the last step, we need to click a Publish button. Await page, GetByRole, we click on the button with the name, Publish button, with the name, Publish article. All right, what's gonna be next? So let's quickly fill out something here, publish the article, publish the article, and we have the article. So now we need to validate that the title of the article displayed right here. Right-click, Inspect, and I think we can reuse this assertion, just slightly modifying it. So instead of using title, we will use article page. Article page, then we have h1 tag and title located inside of the h1 tag. We don't need here first anymore, since this is just unique value over here. And to contain text, Playwright is awesome. All right, assertion is ready, now what's next? After that, we need to navigate to the home page, click on the global feed, and validate that this article is presented right here. So let's do this, await page, get by text. We navigate to home, click, then we navigate to the global feed. I'll take from the previous lesson, and then we need to make an assertion that first article to contain Playwright is awesome. All right, that's it. So now let's run this test just to see that it is working as expected. Okay, something failed, what exactly failed? Assertion is failed right here, to contain Playwright is awesome. We probably made a mistake in our locator. Let's go back to application, and let's see what we have here. So we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title, we have a title. Let's go back to application, right-click, inspect. And yeah, we took the class, so let's take instead the tag itself. Or we can just put dot over here to make sure that this is a class. This would work as well. Okay, one more time. All right, Playwright is awesome, it is displayed. Test passed successfully, assertion passed successfully. So now for this test, we need to make two additional improvements to intercept the call of publishing the article and get's log ID, and then at the end, delete this article. So first question is how to intercept the API call and get the article's log ID. Let's go back to application one more time. So this is current article, let me delete this one, and I create a new one just for the demo. Right-click, inspect, networking, and I make publish the article. So we are looking to intercept this API call. So after publish article button is clicked, we want to wait for this API call to be executed, and we want to receive the response of this API call. How to do that? In the previous lessons, we learned a method called awaitPageWaitForResponse, when you can dynamically wait for the certain response of the API calls. So we take this URL that we are expecting for the response to be completed, pasting it right here. And instead of just waiting for this response, we can get the result of this response saved into the variable. So I create a new constant, const articleResponse equals to awaitPageWaitForResponse. So Playwright will wait for this API call to be completed. And when it will be completed, it will save the response into this articleResponse object. After that, we need to get the articleResponse body from this promise. Const articleResponseBody equals to awaitArticleResponse.json. JSON method will return as a JSON object of the response body. And then from the JSON response body, we can get a slug ID. Const slug ID equals to articleResponseBody.article.slug. That's it. So if I go back to the browser and look into the response, this is the entire object. Then we get article and get slug. This is what I'm doing here. articleResponseBody.article.slug. And slug ID will be saved inside of this constant. And then we can use this ID to make API request to delete article. So this will be pretty simple. To make API request, first of all, we will need access token. So I will copy this code from the previous test, where we're getting the access token right here. This is the access token variable. And we need to create a new API request to delete article. Await request. And we need to import the request as an argument into the test. request.delete. Then I provide the URL for deletion of the article. Going back to application, networking tab, clearing this out. And I'm clicking the delete article. Delete. And this is the URL. So let me copy this just for the example. And now this slug ID of this URL, we need to replace with this variable. So we can use JavaScript interpolation to put this variable as part of this string. So I'm replacing a single quotes with a backticks. Removing this part, dollar sign, curly braces, and put my slug ID right here. Slug ID right here. That's it. And what is left is pass the authorization header as our options. And I take it from the previous test as well. Headers object like this. And we can take the response from this delete request. const deleteArticleRequest. Let me rename it to response. Response, and we can make assertion. So let me copy this as an example, just to speed up. And await deleteArticleResponseStatus equals to 204. All right, I guess we did everything. Now let's run the test and see how it is working. All right, we see that Playwright is awesome is displayed on the page. We also see that test was completed. And now if I just refresh the page, article does not exist anymore on the global feed, because it was deleted with our API call right here. So the test passed successfully and everything worked as expected. Let me quickly summarize what we did in this lesson. In this lesson, we created a new test to test the article creation. And we're deleting the article to clean up the test data using the API call. In order to do that, we can intercept the browser API calls using waitForTheResponse method. WaitForTheResponse providing us the response object. With this response object, we can get the response body of this object in the JSON format and process this object to get the needed slug ID in order to make a future API call to delete the article. Then we make a request to delete the article providing slug ID as a part of the URL using JavaScript interpolation. Successfully delete the article and make assertion the article successfully deleted. All right, that's it guys. See you in the next lesson where we begin some refactoring of the code that we created above.