Put Request | Bondar Academy
Course: Playwright API Testing with TypeScript
Module: API Testing Basics
Instructor: Artem Bondar
Lesson Summary
In this lesson, we learned how to perform a PUT request in Playwright, which is essential for updating existing records. Here's a summary of the key points covered: Understanding PUT Requests PUT request : Used to update an existing record. POST request : Used to create a new record. Performing a PUT Request To illustrate the PUT request, we used a test application to: Create a new article with a title and description. Update the article by modifying its title. During the update, we inspected the Networking tab to observe the PUT request, which included: The URL containing the slug ID of the article. A request payload with the updated article details. A response status of 200 indicating success. Using Postman for Testing We recreated the PUT request in Postman by: Copying the URL and setting it as a PUT request. Including the authorization header and the request body. Validating the response and checking the article's status. Implementing in Playwright In the Playwright code, we structured our test to: Get the authorization token. Create a new article and extract its slug ID . Perform the PUT request to update the article. Validate the update by checking the article's title. Delete the article using the updated slug ID . In summary, the PUT request is similar to the POST request, with the main difference being that it updates an existing record using its unique identifier in the request URL.
Video Transcript
All right, so far, we learned how to perform GET, POST, and DELETE requests. And in this lesson, I will show you how to perform a PUT request in Playwright. And I remind you, PUT request is used when you need to update the record, and POST request is used when you create a record. So let's jump into our application and perform this operation. So here's our test application. And first of all, let's explore how our application make the PUT request and for what kind of operation. So I create a new article first. So let me add some test title, some short description, and publish the article. Okay, article is created. And when I want to update the article, I have this Edit Article button. And let's see what happened when I do this. So we go to Inspect, Networking tab, so make it like this. I click Edit Article. So far, we see the Edit Article screen. So this is a GET request, and this is also GET request. This is not what we are looking for. And let's change, for example, Test Article to Test Article Modified, okay? So we're updating the existing article with a new title. And I click Publish the article. When I do this, first of all, we see the article updated in application. And here, I look into the Networking tab. So what I have? Here I have the URL that was requested. It was a PUT request. The response was 200. We have a payload, and we have a response of the article updated. So look, when we make a PUT request, the URL has a slug ID of the article that we want to update. This is identifier of the article. And also, PUT request has a request payload or request body with the details about the article that we want to assign to the article based on the article ID. So this is how PUT request works. So let's recreate this, first of all, in the Postman, making sure that we're following our scenario correctly. So I copy this URL and going back to the Postman. Creating a new request, paste URL right here. Nope, it didn't work. So Ctrl C, Ctrl V, okay. I remove the special characters, okay. This will be a PUT request. We will need authorization header, authorization. And let's get a fresh version of the token. So I click Send, New Token Value. Going back, and it's Token, Space, and Authorization Token. Okay, now body, raw, and I go to the payload, view source, and getting this payload. Pasting it right here, and beautify. So this is the request body, and I guess everything is all set. So now let's go back and delete this article. We don't need it anymore, delete article. And let's recreate our flow just from the Postman perspective. So first of all, we make API request, we get the token. Then we need to put this token into the post request, create the article, making sure we have a fresh value of the token. We make a send request. Okay, article was created, 201. Then take this slug ID, Ctrl C, putting it right here. Okay, send request, 200 status code. So we updated this article to this title, it has updated title. Let's check it out if it's created. Yeah, I see article is created. And now we can delete article using modified, updated slug ID from the put request. Because when we updated the title, the slug ID for the article was also updated. So I take the slug ID from the response of the put request, going back to delete request, putting this over here. Send, and article should be deleted. Refresh, and article is deleted, perfect. So now let's put this scenario into the playwright code. So we're going back to our code right here. And technically, create and update and delete article is almost the same test as we have right now. With only step, after we create the article, we need to update and then delete it. So for the base of my test, let me copy the existing test, paste it right here, and then I slightly modify it. So create, update, and delete article. So first step, get authorization token. Second step, let's make a test new article, something like this. So when we create this article, we should have validated that this article is created. Then we have a slug ID. Then using this slug ID, we need to modify this article. Let's do this right here. Const update article response equals to await request put request, and let's put the URL. So URL is very similar to delete request. So we're gonna use a concatenation to add the slug ID inside of the URL. So going back to Postman, and put URL would look like this. Ctrl C, Ctrl V, but instead of this hard-coded slug ID, I will use this slug ID. All right, so we make a request. After that, we need a response object. const updateArticleResponse.json equals to awaitUpdateArticleResponse.json, done. Then we need to make a validation. Let's copy this, put it right here. The status code is 200, okay, it's 200. And we are looking for UpdateArticleResponse, status 200. Okay, that is done. The next step, we need to extract the slug ID of updated article from the response. And we would be looking into this article.slug. So very similar to what we had before, creating a new constant. const new slug ID equals to updateArticle.json.article.slug. Correct, correct, .article.slug, okay. So new slug ID, after that, we have a get request. So with a get request, the first article should have updated title, which is this one. And by the way, we forgot to put the JSON body right here, okay? And the JSON body will be very similar to the POST request, so I copied right here. So JSON body will have an article that we want to update, which is this one, and headers. But instead of using this test new article, we will use test new article modified. So the article that we created right here, we will modify this article with this new title. And let's make this assertion in the response as well. I'll copy this assertion as an example. And I use updateArticleResponse.json.article.title equals to this title. All right, then we get the slug ID of modified article, new slug ID. Then we make a get request, and we should see the updated article as the first article, taking this title right here. And then we delete the article. But instead of using the original slug ID, we need to use a new slug ID that was assigned to this article after we modified the article, okay? Slug ID, new slug ID, authorization token, and delete article, status 204. So I believe everything is correct. Let's run this test, and then we quickly go through the steps one more time. So running the test, and test passed successfully. All right, so let's look one more time what we did. So the first step is the same, we got the token. The second step, we created a new article as usual and extracted the slug ID of the article that we just created right here. Then put request. In the put request, we need to use a URL providing the slug ID of the article that we want to modify, and then providing body and authorization headers with the new article details that we want to assign to the article with this slug ID. After we did this, we made an assertion that yes, this article was created. And we extracted a new slug ID for modified article because at the end we want to delete this article. Then we make a get request just to validate that update article was successful. So we validated that first article in the list of articles has our new updated title. And the final step, we used new slug ID to delete the article and make assertion that this request was successful. All right, so this is how put request works. So it's very similar to the post request, and the difference is that you update the value for the existing record. And usually the way how you get this value is by the ID or unique identifier for this value that you provide as a part of your request URL. All right, that's it guys, and see you in the next lesson.