Performing API Request | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Interacting with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, you will learn how to perform API requests using Playwright , a powerful technique for setting up test data and validating functionality in web applications. Key Concepts API Usage: Set up test data on the server before running UI tests and delete test data after tests. Scenario Overview: Automate a sign-in process, create a new article, and validate the delete functionality. Steps to Automate Sign in to the application using an account (e.g., pwtest.com with password welcome1 ). Create a new article with a title, description, and body. To test the delete functionality: Create the article via an API call instead of UI for efficiency. Delete the article using the UI. API Call Process To create an article via API: await request.post(url, { data: { title: "This is a test article", description: "This is a test description", body: "This is a test body" }, headers: { Authorization: `Token ${accessToken}` } }); Validation Steps Ensure the article is created successfully by checking the response status code (should be 201 ). Delete the article and validate its absence on the global feed. In summary, use the request method in Playwright to perform API calls, handle the data object for the request body, and manage authorization tokens for secure API interactions. That's it for this lesson! See you in the next one.
Video Transcript
In this lesson, you will learn how to perform API requests using Playwright. So this technique is very powerful for several things. For example, using APIs, you can set up your test data on the server before running actual UI test. Or using API, you can also delete test data after your test run if you have available endpoint for that. Also, performing API requests, you can actually perform API testing using the Playwright as well. So in this lesson, I will show you how to do that. Let's get into it. So this is our test application, and here is the scenario that we're going to automate in this lesson. So we will perform a sign-in to the application. We have created an account before, pwtest.com, and password, welcome1. And by the way, you can create your own account, not necessary to use this one. You are not limited to how many accounts you can have on this test application. Sign in, and then on the global feed, we have our known articles. Now we will create a new article. Click create article. Test title. Test description. Test body. Publish the article. Going back to the main page. And we have article published on the webpage. Let's say that we want to test only functionality to delete the article. For example, I click on the article, click delete article, and the article is deleted. But in order to delete the article, we need to create this article first, right? One way of doing this is, of course, doing through the UI how we did just right now. Click on new article, fill out the field, click submit, and navigate to the homepage, global feed, and then select the article. The other way how to speed up this process is to perform API call to create the article, and then through UI, we will delete this article. That way, we're going to validate the delete article functionality for this website works successfully. So this is a scenario that we're going to automate. We create a new article using API, and then we delete article using a user interface. Going back to our application, and before we begin moving forward, let's make a very quick refactoring for the code that we already have. I would like to move the mocking of the articles over here to the test down below, so we will not use this mock for the separate test. So we will not have a conflict between test data and the actual article that we want to create, and then later to delete. So I will remove this from before each, the entire section. And now here, in order for this mock to work successfully, I need to refresh the page in order to trigger API call again. So our mock will be picked up and will be displayed correctly. So what I need to do is pretty much just navigate on the global feed, click on it, and it will refresh the list of the article. So let me create this step. So I will create a new page, get by text, global feed, dot, click. And also for a better visibility that this is a mock data, let me update the text itself. This is a mock test title. This is a mock test description, and the same thing we need to make an assertion. Mock test title and mock description. Let's quickly run this test to make sure that we didn't break anything, and it is working as it worked before. All right, it's working perfectly fine. We have this is a mock title, this is a mock description. It is working. Moving on, and let's create a new test that will be responsible for deleting of the article. Test. All right, the body for the new test is ready, and let's review our scenario one more time. So our goal right now is to create a new article using API. So let's explore what's actually happening during this API call. So right click, inspect, go into the networking tab, and I create a new article. Create a new article, article title. This is a test article. This is a test description. This is a test body, and publish the article. We can see that application is making two calls. First call is going 307. As usual, it's redirected, and then the second call is the actual API endpoint that was called to create the article. This is a POST request to create the article, and the response status code is 201, which means it's created. This is the payload that we have sent. So this is the object that has body description, tag list is empty because we didn't provide any text, and title. And the response coming back with the details of the articles created. And if we go back to the home page, to the global feed, we can see that article is displayed right here. So we need to trigger this API call with this payload in order to create the article. One more thing over here. Since we are logged in and we're creating the article as authorized user, we also will need to use authorization token. I'm scrolling down here in the request headers. We can see this header authorization. We have a token and a long, long value of the token that is used to authorize with this particular API. So we cannot make this POST request without this token. First, we need to get this token. And the question, okay, where can we get this token? And this token we can get from the authorization URL. So let me delete this article first. Delete the article. Here's the user. I will make a log out as for now. Edit. Log out. Clear the browser. And make sign in one more time. Let's see what browser is actually doing. Okay, look at the console one more time. So browser is performing POST call request to the login endpoint. This is the payload that was sent. This is our username and password. And the response. Here we go. This is the token value that we need to use. So we will need to perform two steps. Step number one is to make API call to obtain the token. Step number two, make second API call to publish the article. And use this token to actually publish the article as an authorized user. So let's begin with the step number one. For making API calls, we will need to use the actual API that returns us positive status code such as 200, 201, and so on. Not the API that makes redirect. We want to interact with API directly in order to read the response from this API. Because redirect endpoint, it doesn't have any response. It's empty. So we need to use this one. Going back to our code. So in order to make an API calls in the Playwright, we need to use a keyword. Wait. Request. And we need to import this fixture from the Playwright library. I hit enter. You can see that new import showed up in the line number one. Then we need to add this fixture as well into our test. Request. And now we can read request inside of the test. So request.methodPost. We want to perform a post request. And then we provide URL where we want to send this request. Going back. Copying the URL. Common V. That's it. Okay, URL is ready. The second step, we need to provide the object with username and password that we want to send to our API in order to get the token. So I put comma, put object. And in Playwright, the request body, for some reason, called data. This is very strange to me, to be honest, because in all other frameworks, the request payload called as request body. But in the Playwright, for some reason, they called as a data. So we open a data object, and we need to pass this payload, view source, and I just copy the entire object from here and paste it right here. Okay, we have a little extra squigglies, and that's it. And after this request will be performed with our username and password, we want to save the response into the constant. Constant. Const response equals to await request post URL and so on. After the request is performed, we want to get the result and process the response body. So I create a new constant, response body equal await response dot, and we are looking for JSON object. So JSON object will give us a representation of the response. And now let's try to run this and print out to the console. Let's see what we're going to have. So console dot log, and I want to print the response body. So we don't need browser and all other stuff, so we simply comment out before each step completely, and we just perform this particular API call. Okay, we don't need browser as well. I will use a headless, so run it one more time. And here we go. If we go to the test results tab in the terminal, you can see that object is printed right here. So we have user, we have token. Now all we need to do is get to the user object and then read the token value. So response body dot user dot token. So let's run it one more time. Here we go. We have a token value, so we can move to the next step. Let's save this token value into another variable. Const access token equals to response body user token, delete this. All right, first step is ready. We have access token. Now the next step, we need to perform a second API call to actually create the article. So let's go back to application. Let's see how we're going to do this. So I delete this new article, and I click publish the article. Okay, article is published successfully. We are looking for this endpoint that performed this API call. Copy endpoint URL and write a new request. Now wait, request, post, put the URL. Then I need to provide body, which is a data object inside of the data object. I'm copying the payload from here. Paste, and the second value that we need to provide is authorization header. I put comma here, type headers, and inside of the headers object, I put authorization. This is the header name. How do I know the header name is from here? If I scroll it down, this is the request headers, and this is header name, authorization. So I copy it exactly as it is. Authorization, and then I need to provide word token, space, and then the value of the token itself. Use interpolation, token, space, and my constant access token. All right, this sounds good. So let's try to run it. Okay, it looks fast. Going back to application. Okay, let's run it one more time. Hold on a second. Okay, going back, refresh. And here we go. Article is created. So I click on this, delete the article, global feed. Article does not exist. Running it one more time. It's completed. Going back, refresh, global feed, and article is created. So you can see it, right? We made API call. It was very quick, and the test article is published on the webpage. So right now, all we need to do is just to delete this article. And before doing that, let's make assertion to this API and point to make sure that it's performing a successful API calls. So const article response. I assign the result to article response and then create assertion. Expect article response status to equal 201. All right, let me run it one more time. Oh, and you see, it is failed. Look at this. We have expected 201, but actual status is. Why do we have this kind of response? Because test application does not allow us to create a duplicated article. We already have the article with this title. So before the creating the article, we need to delete this article. I delete it, global feed. Okay, it does not exist anymore. And I run it one more time. Okay, now it's worked fine. Refresh. Article is created. Perfect. So what is left? The left is just add the scenarios to delete the article. Let me run it again. Article. And what we can do, we can use this text as our locator to locate this article. So we need to navigate to the global feed, then click on the article, then click on delete article button. And that's pretty much the part of the process. And then after deletion of the article, we need to navigate to global feed one more time to validate that article is deleted. So let's script this. Await page. Get by text. Global feed. Okay, we navigated to the global feed. The next step, we need to click on the article that we just created. Await. Get by text. And we know which text is that, is from the request body here. This is a test article. This is a test article. Dot click. Next step, we need to delete this article. Await page. Get by role. I will look for a delete button. That has name. Delete article. And since there are two buttons on this page, I want to select the first button and perform a click. And the last step after that, we need to navigate to global feed one more time to make sure that article does not exist. And what else left? Here, before each step, it was commented out, but we need to do here what? Make authorization. So here we just navigate to the application, but for us to delete the article from the browser, browser should be authorized. So we need to log into the application first, then perform our API calls, and then delete the article as authorized user. So here we need to add also a steps to log into the application. Again, we will make it just very, very simple. Log out. So we need to click on sign in, enter username, enter password, and sign in button. Let's do this. Await page. Get by text. Second step is await page. Get by role. Page. Get by role. Is it text box? It has name. Email. Fill. Pwtest at test.com. Then we need password. Await page. Get by role. Text box. With a name. Password. Not click. We need to fill. Password is welcome. One. Password in the quotes. And the last step is to click on the button to actually log in. Await page. Get by role. Since there is just a single button on the page, we can get by role button dot click. All right. I think that is it. Let's try to run it and see if it's actually working because we wrote a lot of code without validation in the middle, if it's working or not. Maybe there are some mistakes. We will see and debug. Okay. All right. Something already doesn't work on sign in. I already see a mistake. Sign in dot click. And I will run the browser for the second attempt. Okay. Email or password is invalid. Okay. Where did I made a mistake? Okay. I put the space in the password. Removing the password. Trying one more time. All right. Looking at the global feed. Okay. And we have a test article and it was not deleted. Let's see why. Okay. Assertion failed because the article still exists. We forgot to delete it. Let's delete the article. And let's try it one more time. Running this again. Open browser. Load in articles. Delete the article. Perfect. It's working. So you saw how quickly everything happened. Article was created. We navigated to the global feed. Click on the article. Deleted the article. And the only last step left is just to validate the article. Okay. Let's try it one more time. Deleted the article. And the only last step left is just to validate that after all this process, the article that we created does not exist anymore. So here. Wait. Expect. We need to provide a locator to the very first article. We can take it from here. Page locator. And I think we can take the entire assertion, by the way. Entire assertion. And all we need to do is to update this. That it is not to contain text. And the title that we're going to create is this one. So we want to make sure that the first article on the page does not contain text. This is a test article. This will be our validation. And let's run this test again. Loaded article. Delete the article. Perfect. And assertion is passed. All right. So that scenario is working. Lesson was a little bit longer, but that's the topic. Let's quickly summarize what we did in this lesson. When you want to perform API call in Playwright, you need to use method request. And then type the method type that you want to use. In this example, we use a post request. Then inside of the post request, you need to provide a data object. Data object represent the request body for your post request. Then you process a response. You can read response body using a JSON method. And get access to all data response through this method. Then we save a variable of access token from this request. And perform a second request using headers with authorization token. To successfully create the article using the API call. And then perform the actual test to validate that functionality. To delete the article on this webpage is working successfully. All right. That's it, guys. And see you in the next lesson.