Post, Put and Delete Requester | Bondar Academy
Course: Playwright API Testing with TypeScript
Module: Building a Framework
Instructor: Artem Bondar
Lesson Summary
In this lesson, we focused on enhancing our request handler by implementing three additional methods for API operations: post , put , and delete . We also updated our smokeTest.spec.ts with new tests following a refined pattern. Key Concepts Post Request: Similar structure to the get request. Uses method post and includes a request body under the data property. Validates response status and returns the response. Put Request: Follows the same pattern as the post request. Changes the method to put . Delete Request: Simpler than the others; only requires headers. Validates status code, as there is no response body. Testing Enhancements We refactored our tests in smokeTest.spec.ts to include: Creating, updating, and deleting articles. Using a beforeAll hook to obtain a token. Assertions to confirm that articles were created and deleted successfully. Visual Clarity in Tests The new test design allows for better visual separation of steps, making it easier to follow the flow of operations compared to the previous format. In summary, we successfully added the postRequest , putRequest , and deleteRequest methods, and improved our testing framework for better readability and maintainability.
Video Transcript
All right, guys, in this lesson, we will complete the request handler by creating three other missing methods to perform other API operations such as post, put, and delete request. Also, we will update our smoke test.spec.ts with a new test following a new pattern. Let's get into it. Previously, we created a get request method and a new method for post request will follow very similar pattern but with just a slight update. Let me just copy this for the simplicity. I rename it to post request. Here, instead of method get, we will use method post. Then post request also have a request body, as you remember, and it is under data property, and I use the field this API body. After that, we get a response. We make status validation, JSON response, and return a response. Well, that's pretty much it. Moving on. For the put request, we take exactly the same method as a post request. Just rename it to the put, and here we change method to the put. That's it. The rest remains the same. The last method is to delete request, will be slightly different and the most simple one. We get request method as an example. It will be a delete request. For delete request, we only need headers, and for the response, we only need to make a status code validation because delete response does not have a response body. There is nothing to return. All we do is just make a delete request and make a status code validation. That's it. So simple and so quick. Now, let's rewrite the test for the SmokeTest.Spec.ts, adding create, update, and delete test to work with our application. Before that, we need to create this before all hook to get the token. Let me move this real quick over here, and I will refactor this hook. Instead of request, we will use our new API fixture, of course. So const token response, let me reuse the same token response, equals await API. Then we need what path? The path for our request will be users.login. We need body. Body will be this one, and it will be a post.PostRequest, and status, probably 200. Now, we can remove these steps. Token response right here. Quickly reformat option Shift F for the Mac, and for the Windows command, it's Control Shift I to make a quick reformat. So what's next? Let's quickly run it to make sure that hook is working. It's passed. Sounds good. So hook was executed. So let's run the test. So test, create, and delete article. Async API fixture, and the test body. So we're basically moving the example spec, this create and delete article, to the new format inside of our smoke test, that's spec.ts. So first of all, we make a post request to articles endpoint. So const createArticleResponse equals to await API. Then we need to provide path, which is articles. Then we need headers, which is, we'll copy the headers, is the object authorization and auth token. Authorization and auth token. Then we need body, and let's copy the body as well. The body we were using is this guy. So we need the entire body right here. Copying it right here. After that, we need to make a post request. Status code should be, I think, 201. You know what? Let me make it in just a single line, so our code will look more compact. Since this is just a small object, let's put it inside of a single line like this. All right. I think it looks nicer. So after we made the request, we need an assertion that this article was created. So we skip this one, we skip this one. We take these two lines right here, and I need to get createArticleResponse like this. Okay. So we made the assertion that article was created and this log ID was assigned over here. The next call, we are getting the getRequest. Where is that? This is a getRequest with authorization token to make sure that the article was created. For the simplicity, let's grab this thing for the getRequest. This is articlesResponse. ArticlesResponse. All right. Quick reformat. After that, we also need to add headers. This is authorizedRequest. Path, headers, params, getRequest, and we add assertion that article was created is this one. Okay. Created the article and articleResponse, article zero to equal to test. After article was created, we want to delete the article. Now wait, API. So we need path which is articles with a slug ID, and I use a backticks and slug ID. We need headers, headers and deleteRequest, dot deleteRequest. The response status, 204 as I remember. So I guess that's it. Three steps. Let's try to run it. I hope it's going to work. No, it didn't. So let's see. 204, 200. So where is 204? Right here. So why is it 200? Did I make a mistake somewhere? Yeah, of course. I did mistake over here. So I renamed the deleteRequest, but forgot to rename it right here. DeleteRequest. So you see, this is a thread of copy-pasting. When you copy-paste the code, you should be super attentive of doing this. Okay, let's try one more time. First of all, let's check the application. Was it deleted? Article was not deleted. So going back and give it a second chance, and yeah, finally, it was working. By the way, at the end, we can add one more assertion. After we remove this article, we can validate that it was actually removed. So we can take this getRequest right here, and add an extra step, Command-Shift-V, quick formatting, rename the constant, articleResponseTo, articleResponseTo. We expect that after we perform add delete, the first article in the list of the article should not be equal test to test. Okay, let's run this. And this test passed successfully. So this one is done, and the last one is to create, update, and delete the article. So let's modify it quickly as well. I take this test as an example because the steps are very similar. So create, update, and delete article. So first of all, we create the article, test, new, test, we created the article. We expect that this article have to be created right here, slug ID. Then after that, we need to update this article using a put request. Okay, const updateArticleResponse equals to await API path. The path will be with a slug ID. So I use a backticks. So where is this test? So this is the put request, articles, slug ID. Okay, articles, slug ID. Then we, of course, need headers. I add headers, and then we need a body. So let me take this body and put it right here, and then modify it. Okay, test new article modified, article modified, and request, it will be a put request. What's the status code for the put request? Put request, status code 200, status code 200. And the assertion is this one, and we need to grab a new slug ID. Assertion is this one. Replace, replace, and I get the article title and replace it right here. So we get a new slug ID. After that, we have a get request to make sure that the new article exists in the list of articles. So I update this title, and then we make a delete request with a new slug ID to delete this article. And after that, we make another get request to make sure that this article does not exist anymore, like that. All right, so let's try to run it. I hope it's gonna work. So running the test, and yeah, we didn't make any mistakes. Sounds great. All right, guys, so this lesson, you see, it was just around the coding, just setting up our test using the framework that we have configured so far. And so far, it works perfectly. And I want you to point attention on overall, the big picture about how test right now looks like. So this is a single scenario. And when you look at this test with our new format of the framework, you can clearly distinguish the steps of the test case by blocks. You see, so for example, this is the block number one, it's a one step. The second block, this is the first step. This is the second step, third step, and the fourth step. And visually, you can separate them. Okay, this is my step one, step two, step three, step four. Look at our previous design of the test case. I mean, boy, that's a mess. So where is the step one? Where is the step two? Where is search and start? Where it ends? God knows what is going on here. But here, it's very, very clear. And also, by using this type of pattern, kind of shifting to the right the methods of part of your request, you can also distinguish visually where is your request section for the step. And where are the after step procedures, such as, for example, assertions, or maybe get the constants after the request, or something like this. So very visually clear approach, yeah, sounds good. And the same test over here. All right, so let's quickly summarize what we did in this lesson. We made a quick refactoring by adding new methods, postRequest, putRequest, and deleteRequest. Pretty simple, straightforward, using the same design and approach. With the post and putRequest, we just added the API body as a part of the request. And deleteRequest just does not have a response body. And we also refactored and added a new test to the smokeTest.spec.ts. Adding our end-to-end test, I would say, to create, update, and delete article with a new, nicer, easier-to-read format. So that's it, guys, and see you in the next lesson.