Mocking 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 mock API requests , which is useful for replacing actual server responses with our own. This technique can help in testing scenarios and dealing with unstable API endpoints, making tests more reliable. Key Concepts Mocking API Responses: Allows for faster loading times and stable tests by providing predefined responses. Playwright Framework: A tool used to intercept API calls and configure mocks before the browser makes requests. Steps to Mock API Requests Open the Networking Tab in the browser's developer tools to observe API calls. Use page.route to intercept the API endpoint you want to mock. Create a mock object with the desired response data. Use await route.fulfill to send the mock response, ensuring to JSON.stringify the object. Run the test to verify that the mock is functioning correctly. Refactoring the Mock To improve code organization: Create a test data folder and store the mock data in a text.json file. Import the JSON file in your test using the appropriate import syntax. Use wildcards in the URL to simplify the matching pattern for API calls. In summary, mocking API calls in Playwright involves setting up routes before the browser makes requests, creating mock data, and ensuring the application receives the desired responses during testing.
Video Transcript
In this lesson we will learn how to mock API requests. Mocking API can be useful when you want to replace the actual response from the server by your own response. For example, testing some HK scenarios that you want to see on the page how it would look like. Or, for example, you have a dependency on some unstable API response from the server or unstable API endpoint that you would like to eliminate and make your tests more stable. This way you can also mock the API and solve this problem. So, in this lesson we will learn how to mock API response. So, let's get into it. So, let me make a right-click, inspect element, networking tab. So, when I refresh the page we see that browser makes different API calls to the tags endpoint and to articles endpoint. Also, you may notice that it takes some time to load the articles and load the tags. If I click a refresh, you see it takes a couple of seconds to display the article and display the tags. So, let's mock API endpoint that responsible for tags and instead of providing the list of those tags we provide just couple of tags which is enough for our testing purposes. And in that way we can speed up the loading of the page as well because we replaced the API response with our own response. So, look in the networking tab you can see that API makes two requests. First, it's make a request to this endpoint, Conduit Production Ready. With status code 307 it's redirected to another API which is API realworld.io. So, we need to intercept the first URL and provide own response. What kind of response will it be? If I click on this and response tab this is the object that is currently provided. We will replace this response with our own object and with our own tags to be displayed. So, let's do this. This is the code that we created before and I need to create a new mock configuration. So, I need to add it before we go into the main page. This is very important concept. When you want to create a mock you need to configure it inside of the Playwright framework before browser make a call to the certain API. Otherwise, Playwright will not know which API should be intercepted. So, to create a mock we need to type command away page dot route and inside of the route first argument we provide the URL that we want to intercept. Going to the networking tab and first URL I'm taking this one and pasting it right here. The next step is the second argument which will be a callback function and I call it route for example and we entering inside of the function. Then inside of the function we need to create the object that we want to be used as the mock. Let's say I call it tags equals and just for the beginning I just simply copy the name of this object as my starting point and pasting it right here. So, this is the current object but I don't need all those tags. I want to provide my own tags so let's say I remove some of them and replace this one will be automation and let's say Playwright. Alright, so that's the object that we want to use as our mock. The last step we need to fulfill this object as a desired response. Await route fulfill and inside of the fulfill method there are different arguments that you can provide. So, we want to replace a body. There is a body property and we need to call the object as a desired response but we cannot call the object itself. We need to stringify this object so it will be a string. JSON stringify and I provide the object as the argument. Alright, that's it and let's run this test to see how it works. Alright, browser is open. So, now you can see that instead of the tags over here that we generated before from the API there are provided two tags automation and the Playwright and also you probably noticed that they loaded instantly because we provided a mock and it only took 32 milliseconds to fulfill this request. So, let me run it one more time. Yeah, you can see tags already displayed and only in a couple of seconds articles are loaded. So, our mock is working fine. So, let's make a little refactoring and just remove this object from the code and let's call this object independently. Sometimes the objects can be a really really big size and of course it's not a good way to keep the mock objects inside of the code. So, I'm going to the folder structure and creating new folder test data and inside of test data I create new file and call it text.json. Then I delete my object from the code, put it inside of the JSON. Now it's the right place where this object should be and then I go to test and import this file to the test. text.json Now I can safely delete this object from the code and we will read this text object from file. Now, look at the import format how I imported the JSON. When we imported the objects and fixtures from the Playwright library we used a curly braces. When you're importing the JSON file inside of the file you just put the name of the file how you want to name it and from the location where you want to import it from. So, let's run it one more time to make sure that it's working. Okay, it's working fine. Mock values were provided and one more thing that we can refactor over here. Instead of providing the full path URL we can provide a wildcard replacing some of the base URL with just stars to simplify the look of this URL. star dash star star API tags which means that we want to match any pattern when we call API tags endpoint right here. Let's run it one more time and it is working. All right, so let's quickly summarize what we did in this lesson. In order to mock the API calls that browser is doing you need to use a method page.route and provide the API endpoint that you would like to mock. It is very important to define all your routes before browser is going to perform a certain API call. That's why we put this code before we actually navigate to our application because browser will perform this API call to get the tags while the application is loading. We created our own text JSON object and put it in the test data folder. Then we're reading this file right here importing into the spec file and when playwright intercept the call following this pattern of the API URL we provide our own response that we would like to see in the application. All right, that's it guys and see you in the next lesson.