Intercepting and Modifying API Response | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Interacting with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will learn how to intercept API responses , modify them, and fulfill these responses back to our application. This technique is particularly useful for making partial modifications to API responses without mocking the entire response. Key Steps Covered: Intercept the API Call: We will intercept the articles API call and modify the first article's title and description. Route Configuration: Inside the beforeEach method, we create a route configuration using: await page.route('URL', async (route) => { ... }); Fetch the Response: Use await route.fetch() to complete the API call and store the result in a constant: const response = await route.fetch(); Modify the Response: Convert the response to JSON and update the title and description of the first article: responseBody.articles[0].title = 'This is a test title'; Fulfill the Modified Response: Use await route.fulfill() to send the modified response back to the application: await route.fulfill({ body: JSON.stringify(responseBody) }); Finally, we assert that the changes are reflected in the application by checking the updated title and description. Note that if you run the test without assertions, it may fail due to a known issue in Playwright. Using assertions allows enough time for the application to load the modified response. In summary, we intercepted the articles API call, modified the response, and fulfilled it back to the application. This process involves intercepting the URL, fetching the response, modifying it, and fulfilling the updated response. Thank you for watching, and see you in the next lesson!
Video Transcript
In this lesson, we will learn how you can intercept API response, modify this response, and then fulfill this response back to your application. Sometimes this technique also can be useful in case you don't need to mock the entire API response and want just some partial modification of the API response. So in this lesson, I will show you how to do that. Let's get into it. So in previous lesson, what we did is we intercepted API request for the tags. We intercepted this request and provided our own response. In this lesson, we will intercept the second API call, which is articles API call. And we will get this response, update the first article, and we'll display our own title and description on this page. So let's create a second route configuration inside of the before each method before we open the home page. Await page.route. First of all, we need to provide URL that we want to intercept, inspect, right-click. And here is the networking tab. We are looking for first article URL, this one. And we can replace API URL with just wildcards, star, slash, star, star. And the same we can do for the rest of the URL right here. Put it star as well, and then put a sync route. Okay, the next step after we intercepted this URL, we need to continue the API call and get the response. In order to do this, we need to call the command await route and call method fetch. With this command, we tell in PlayWrite to complete the API call and return us the result. And we want to save this result of the response into the constant. Const response equals to the API call. Const response equals to await route fetch. So this variable will have a response of this API endpoint. Now we need to get a JSON body from this request. Const response body equals to await response dot. And look what options do we have. So we can take body, we can have headers, we can have okay status. We can have a body or not. What's the status code of our response? We can also get this value. And in our example, we need to take a body. But we will not take the body property. We will take a JSON property. Body will return us a string. And since we want to update the first article in our response, it will be easier for us to work with a JSON object. That's why I returned JSON method. So our response body variable will have a JSON object saved in the form of the response. Let's look into our response right now. So, and I'm looking into this URL because this is the URL which actually returns the response. Response is this one. And I open the Postman and just for convenience, review this call in the Postman. It's a GET request. Paste this URL in Postman and click Send. Here we go. This is our response. We can see it's pretty big. And this response is a representation. We have articles key. This is the array. And this array consists of the object. And each object represents the article on the web page. So what we want to do is take the first object from this array and modify these two values. Title, this is this text, and description, which is this text. So this is what we will do right now. Going back to our code. And now we know that this is a response body. And I literally use JSON syntax to get access to this object property. So we have response body.articles. This is the array. I take first article from the array.title and provide my own value that I want to be displayed. For example, this is a test title. We have a red squigglies because it should be not response. It should be a response body. Okay. And the second is response body. We take article and we take description. .description equals to, and the text that we want to be displayed. This is a description. All right. So we've done this. We updated the response body. And now we need to just fulfill the modified response as a desired response to the application. await route fulfill. We want to update body. JSON stringify. We want to make it as string as well and provide the object of the response body. All right. That one is ready. And let's make an assertion for this update here inside of the test. Let's go back to the application and let's review the DOM. So we want to make assertion for this first article. We expect the text will be different for it. So we can look into the article list. Yeah. So article list tag will give us a list of the article. We can take the first element from this list. And the title of the article is located under h1 tag. And the description of the article located under p tag. So let's do this. I take article list. Now wait, expect page dot locator. We're getting app article list. And then h1 as a child element. You want to take first to contain text. And the title should have this text. And the second one, I just copy paste. And it's highlighted here. A weight is not effective of this type of expression. Okay. Contain text. We need to use a locator type of the assertion. Contain text. Okay. Here h1 we replace with a p. This is the description. And we change the text. This is a description. All right. I think everything is ready. So let's run this test. And it works perfectly fine. You can see that first article of the application was replaced with our own text that we wanted to provide. And assertion passed as well. This is a test title. This is a description. It worked successfully. Also, I would like to note that if you will try to run this test without the assertion just to execute it, the test will fail. As of today, Playwright has a bug in the framework that closing the browser before it's actually able to fulfill the request. I think it will be fixed later on. But so far, it works like that. When you provide the assertion, assertion gives enough time for the application to be loaded and to display this article. So the route will work. Or you can simply replace the assertion with, for example, a wait page, wait for timeout and give one second timeout to be able to complete this scenario. And it will work as well. Yeah, you see, it is working right now. No errors. So when you will write this code and for the debugging purposes, you can put this timeout temporarily until you write the assertions. But since we have assertion, we don't need a hard-coded timeout. And our test is working as expected. Yeah. Okay, so let me quickly summarize what we did in this lesson. In this lesson, we intercepted second API call of our application, which is articles and point. This articles and point returns the list of the articles that are displayed on the main page. But we intercepted the response of this API call, modified it and fulfilled, updated the response as the desired response for our application. This concept has three main steps. First, you intercept desired URL, then you perform route fetch to complete the API call and get the response, then update the response and fulfill this response as a desired result in the browser. All right. Thank you guys and see you in the next lesson.