Playwright with Javascript | Rest API Testing | HTTP Requests |Get,Post,Put & Delete | Part 39

Learn how to perform REST API testing using Playwright with JavaScript, covering GET, POST, PUT, and DELETE HTTP requests.

Key Takeaways

Playwright supports REST API testing natively with a request fixture.
You can automate GET, POST, PUT, and DELETE requests and validate responses easily.
Payloads and headers are essential for POST and PUT requests to create or update data.
Proper test setup and handling of dynamic data like user IDs are crucial for reliable tests.
Playwright provides built-in reporting to track test execution and results.

What the video covers

Introduction to Playwright's capability for REST API testing using the built-in request fixture.
Demonstration of how to perform different HTTP requests: GET, POST, PUT, and DELETE.
Explanation of sample API endpoints for listing users, creating, updating, and deleting user data.
Details on request payloads and response validation including status codes like 200, 201, and 204.
Step-by-step guide on writing API tests in Playwright using JavaScript and VS Code.
Use of Postman tool for manual API testing before automating with Playwright.
Handling dynamic data such as user IDs across different tests for update and delete operations.
Tips on managing test dependencies and potential issues when running tests in parallel.
Overview of Playwright’s test reporting features for API test results.
Encouragement to review additional resources for understanding API basics linked in the video description.

Chapters

How does Playwright support REST API testing?

Playwright provides a built-in fixture called 'request' that allows you to perform and automate REST API calls such as GET, POST, PUT, and DELETE directly within your test scripts.

What types of HTTP requests are demonstrated in this video?

The video demonstrates how to perform four main types of HTTP requests using Playwright: GET to retrieve data, POST to create new data, PUT to update existing data, and DELETE to remove data.

Do I need additional configuration to start API testing with Playwright?

No additional configuration is required beyond installing Playwright via npm. The video shows how to set up API tests in a JavaScript spec file using Playwright’s test module.

Full Transcript — Download SRT & Markdown

Speaker A

Hi everyone, welcome to you all. In our previous videos of Playwright, we have seen how we can test web applications, and we have seen how to interact with different types of web elements. We have also seen different features provided by Playwright.

Speaker A

provided by chlorite so playwright is also supported API testing so we can also test rest apis using playwright and for that click write is by default provided a fixture called request and by using that feature we can perform rest API testing now in

Speaker A

So, Playwright also supports API testing. We can also test REST APIs using Playwright, and for that, Playwright by default provides a fixture called request. By using that feature, we can perform REST API testing. Now, in today's video, I'm going to show you how we can perform different types of API requests in Playwright.

Speaker A

provided sample uh API request and like a list of users single user and a host request a create update delete so different type of rest API requests they have provided just for demo purpose so I'm trying to use them sum up the

Speaker A

Okay, so for that, I am taking a sample API. So, this is basically request and response.in. So, this is a web page, and they have provided sample API requests like a list of users, single user, a host request, create, update, delete. So, different types of REST API requests they have provided just for demo purposes. So, I'm trying to use them, sum up the requests, and I'm going to demonstrate how we can perform these API requests, how we can validate the response in Playwright.

Speaker A

put and delete so this is a URL so through this we can get the user information or user's customer information and payload is not required and uh response payload it will return some list of users and status code is

Speaker A

Okay, so for that, I have prepared a small test. There are four tests I have taken for four different types of requests: GET, POST, PUT, and DELETE. So, this is a URL. Through this, we can get the user information or user's customer information, and payload is not required. The response payload will return some list of users, and the status code is 200.

Speaker A

request payload and once you send this request once you user is got created you will get the response like this along with ID and create a date and the status code is 201. and then we have a put

Speaker A

And this is another type of request, POST request, through which we can create a new user. So, this is the URL we have to use, and we need to also pass the data along with the request. This is called request payload. Once you send this request, once the user is created, you will get the response like this along with ID and create date, and the status code is 201.

Speaker A

is the status code and the finally we have a delete request this is the URL we here we have to pass ID as part of URL and then there is no need of request payload and it is because just for deleting the

Speaker A

And then we have a PUT request. This is the URL, and whatever the new user is created, with this ID, we can update the existing user. So, whatever data we provided earlier, the same data we can update, and we get another response, and 200 is the status code.

Speaker A

will share some of the videos in the description you can go through and understand the basics of apis okay so here I'm directly jumping into that API request and uh I will show you how we can test these type of breakfast in

Speaker A

And finally, we have a DELETE request. This is the URL. Here, we have to pass ID as part of the URL, and then there is no need for request payload because it is just for deleting the existing request, and 204 is the status code.

Speaker A

at here this is my first request get request so here we have to pass the page number so page equal to whichever page you have passed it will show you the user information from the page now when I send this request you will get the

Speaker A

Okay, so I'm not going to explain the basic stuff, what is API and how it is going to work, all these things. If you want to learn all those concepts, I will share some of the videos in the description. You can go through and understand the basics of APIs.

Speaker A

post request and we have to pass the request body also name and job and when you send this request which will create a new user in the database and which will return along with the ID and the creation time and data

Speaker A

Okay, so here I'm directly jumping into that API request, and I will show you how we can test these types of requests in Playwright.

Speaker A

four three eight and whatever user we created in the previous request in the post request you can just pass it here and this will go and update the record but when you're updating we have to pass the payload again so previously this is

Speaker A

Okay, so before directly testing this in Playwright, let me show you manually or in Postman tool. Now, I already have Postman tool. If I look here, I already created different requests here in the Postman tool.

Speaker A

and with this particular user ID when I send this this is going up it is going to update the existing record so this is updated and after that we have a delete request so this is the URL and along with the ID

Speaker A

And if I look here, this is my first request, GET request. So, here we have to pass the page number, so page equals whichever page you have passed, it will show you the user information from the page. Now, when I send this request, you will get the data like this in JSON format.

Speaker A

are the four different type of requests so now we are going to validate these requests in the playwrite okay so for that what we need to do is I already prepared a small Excel sheet here so which contains all the different

Speaker A

This is one type of request. This will basically retrieve the user information which are the users present inside the particular page. Another one is POST request. So, here we have to send this URL along with the POST request, and we have to pass the request body also, name and job.

Speaker A

will show you different scenarios okay now go back to vs code editor and here I already created API test spec.js same configuration we don't need to do any additional configuration just we need to install playwright and through npm and if I go back to the

Speaker A

When you send this request, it will create a new user in the database, and it will return along with the ID and the creation time and data.

Speaker A

need to install anything additionally okay all right so now I already created one new spec file apatest dot spec dot Js and inside this I have already imported playwright test module test and expect and these are the different test blocks

Speaker A

And then we have a PUT request, through which we can update the existing data. For example, here, once I created your POST request, it created the new ID, so new user 438. That I can pass here, 438, and whatever user we created in the previous request, in the POST request, you can just pass it here, and this will go and update the record.

Speaker A

normally we use we send get request and for creating user we send post request for updating user we send put request and for deleting user normally we said delete request okay so here we have a another feature called

Speaker A

But when you're updating, we have to pass the payload again. So previously, this is the payload. I'm just trying to update the job in the update support request. Normally, we send this whenever you want to modify the record or whenever you want to update the existing record.

Speaker A

okay now first we will see how to send a get request get users so if I go back to the documentation so this is the URL which you have to send and uh this will basically return all the list of users which are present in

Speaker A

So, I'm just changing the job as engineer, and with this particular user ID, when I send this, this is going to update the existing record. So, this is updated.

Speaker A

request simply it's very simple we need to access a request picture like this request and Dot you can just call methods you can see all methods are there let's say get method is available put these available and then post is

Speaker A

And after that, we have a DELETE request. So, this is the URL, and along with the ID, we have to pass. So currently, 438, that I'm going to pass here, 438, and this is a URL which is going to delete the record.

Speaker A

can just specify here So currently this is the URL I am going to pass as part of the request get request get it and now here I'm pasting this that's it so one single statement so this will go and hit the server it will

Speaker A

And here you can see it's 204, no content available. So, these are the four different types of requests.

Speaker A

this particular response whatever the get request I sent the response I have stored in this variable so if you want to print the response in my console window by default it is returning Json form and Json format if you want to just print

Speaker A

So now, we are going to validate these requests in Playwright.

Speaker A

will be printed in the Json format in our console window now what is the status quo we want to validate here is 200. and here I can put one extra I can put some assertion I can say expect

Speaker A

Okay, so for that, what we need to do is I already prepared a small Excel sheet here, which contains all the different types of request URLs which we have to use, request payload, response payload, and the status code we want to validate.

Speaker A

status should be 200 so I can say dot 2B 200 so this is a simple validation point so later in the upcoming videos I will show you different type of validations but this is very basic I'm just saying only validation of status

Speaker A

Now, this is very basic stuff, and initially, we will try to understand how we can do this in Playwright. Later, I will show you different scenarios.

Speaker A

status code okay now let us run the test simple test so here we don't need any payload because this is basically get request we want to retrieve the data from the server we are not going to send any data we are just sending the URL

Speaker A

Okay, now go back to VS Code editor, and here I already created API test spec.js. Same configuration, we don't need to do any additional configuration. We just need to install Playwright through npm.

Speaker A

in the terminal I am going to run my test you can see here clear and this is a simple command here we are not going to launch any browser we are not going to work with any type of

Speaker A

And if I go back to the package.json, make sure you have Playwright test. So, this is the module you have to install. That's the only prerequisite, and this will come along with Playwright at the time of Playwright installation.

Speaker A

in the console window it is displayed all the response so this is the response which we have got from the request okay so this is a command we have executed one worker is assigned to one test and by default it is using chromium

Speaker A

Other than this, especially for performing API testing, you don't need to install anything additionally.

Speaker A

send get a request HTTP request okay now let me show you how we can create a new user by sending post request okay so when you send a post request we need to pass request payload so request payload in the sense we need

Speaker A

Okay, all right, so now I already created one new spec file, apitest.spec.js, and inside this, I have already imported Playwright test module, test and expect, and these are the different test blocks I have created for four different types of requests.

Speaker A

post request go back to vs code data now I am going to execute another test I'm going to implement another test this is basically for what post requested creating the user the database so again I'm getting the request fixture and in this I'm

Speaker A

I have created four different types of tests. This is for getting users, this is for creating user, this is for updating user, this is for deleting user.

Speaker A

URL there's a first thing so in the single or double quotations I will put this URL This is My URL for post request and go back and here this is the URL and not only URL so along with this URL

Speaker A

So, for getting users, normally we send GET request, and for creating user, we send POST request. For updating user, we send PUT request, and for deleting user, normally we send DELETE request.

Speaker A

pass the data so how to pass the data in the curly braces like this we need to put two curly braces and here inside the curly brace we should say uh data data and again curly base so here we

Speaker A

Okay, so here we have another feature called request. So normally, when you do web testing, we take page, picture, we take the help of page, picture, right? Similarly, when you do API testing in Playwright, we will take the help of request picture.

Speaker A

this is actual data so in this we have to provide the data in key value pair so current it is taking name and job so I'm just keeping that in the double quote this is a attribute and the value is I'm

Speaker A

So, by using this picture, we can perform...

Speaker A

this is a data so this is the first URL we are sending and after this this is the data and along with the data if you want to pass headers we can simply pass okay so this I can put in the same line

Speaker A

Okay, now first we will see how to send a GET request, get users. So, if I go back to the documentation, this is the URL which you have to send, and this will basically return all the list of users which are present in the page two, and status code should be 200.

Speaker A

so this is a syntax case okay when you send the post request this is the URL we have to send comma and this is the data I can keep on another line so this is the data from here to here

Speaker A

Okay, now let us try to do, and as I said, we have to use, we have to take the help of request picture.

Speaker A

which form of I can say application slash this is mime type you can specify application slash Json okay so this is a URL which we have to send along with the post request and then this is the data

Speaker A

Okay, so how to send GET request? So, to send the GET request, simply it's very simple. We need to access a request picture like this, request, and you can just call methods. You can see all methods are there. Let's say GET method is available, PUT is available, and then POST is available.

Speaker A

have to close so what are the things we are passing here we are sending the post request URL comma we are sending the data along with the data we are singling the headers so the data and headers everything should

Speaker A

Okay, and then DELETE is also available. All the HTTP methods are available in the request feature. So, in this, we just call the GET, and when you call the GET, here we have to pass the URL. So, whatever URL we want to pass, you can just specify here.

Speaker A

so name equal to Kumar and job equal to China so this data is over okay so my data is done so this is closing early base data and now headers and this is another parameter so this is header accept

Speaker A

So currently, this is the URL I am going to pass as part of the request GET request, get it, and now here I'm pasting this. That's it. So, one single statement. So, this will go and hit the server. It will send the GET request.

Speaker A

request so suppose tomorrow if you want to add any cookies or any authorization you can just add them into this curly braces right now so this is a posting first so once you send a post request this will give you the response right so

Speaker A

Okay, but how will we get the response? So, once you send this GET request, it will give the response that we can store in a variable. I'm creating one const variable. I'll call it as response. Now I have stored this particular response, whatever the GET request I sent, the response I have stored in this variable.

Speaker A

I'll give some assistance and before keeping the assertions I can just print the response how can we print the response simple I can say console.log and wait for response okay dot JS so this will print the response this will actually print the response so

Speaker A

So, if you want to print the response in my console window, by default it is returning JSON f...

Speaker A

verify the status I can say response response dot status and it should be I can say 2B 201 because this is a post request so especially when you're creating a new user the requester the response status should be 201 status code should be two

Speaker A

zero one for post request most of the time so we can say this is one validation and then again suppose uh when you send this particular URL or when you send this post request which will return the response here right

Speaker A

so the response contains what many things if I go back to the response of this post request we got a name job whatever we provided that is also part of the response additionally it will give you ID and creation time

Speaker A

and this ID we required to send another type of request suppose tomorrow if you want to update existing user or if you want to delete existing user we need this particular ID which is automatically generated by the request

Speaker A

so how to capture the Tidy and store into the variable so for that what you need to do is after putting this assertion I will store the response in a variable so for that I am creating one variable

Speaker A

here because this ID is required for another request so I can just take one variable res equal to I wait from response dot Json okay so this will give you the whole Json response into the variable right so now from this variable

Speaker A

from this response I am extracting ID simple okay that I am going to store in a variable so I'm going to create one Global variable which is commonly required for all the tests so here before starting the test I am creating one where

Speaker A

variable where called as a user ID because this variable I am going to refer in multiple test so especially in the post request once you created your new user giving the response and from the response I'm verifying the status

Speaker A

code and not only this I am capturing the ID from the response how can we capture from the response.json this will return the response from this response I am capturing the ID sorry res dot ID that I am going to store

Speaker A

in this particular variable user ID okay that's it so we have done this testing so we have verified the status code and also printing the Json response not only that from the Json response we are getting the ID and that I am going to store in

Speaker A

the user ID variable because this variable I am going to refer in another request okay this is a create user test fine let me save it and then execute only this one so later we will execute all the test in

Speaker A

one shot so now I'm trying to execute only this one create user request okay right so let me save the file and then execute go to the terminal here it then execute the same command okay now my test is successfully passed

Speaker A

so this is the ID which is got generated four to six is got generated this is a dynamically generated so the same ID we have to use for updating existing record and also deleting the existing recorder user so this is the data we have passed

Speaker A

fine so now let us Implement another test update user so far we have seen two different type of HTTP requests one is for getting user we have sent get request for creating user we have sent post request now I'm going to show you

Speaker A

update user okay again same process and whatever we have done for the create user same thing will be repeated but slightly it will change okay so this is for update user request so what are the things I'm going to

Speaker A

change just to observe here instead of post request the URL is same if I go back and see the document so here for post request this is a URL which we have used foreign which we have used but in the port

Speaker A

request we have to additionally pass this ID along with the URL and we have to modify the data also the payload request period we have to modify and whatever ID we capture from the previous request from the post request we have to

Speaker A

pass that ID user ID along with this put request okay now that is only one change so in Step post I'm sending the put method I'm calling the put method this is for update user okay so this is a common URL

Speaker A

and along with this we have to pass ID also right but we have saved this ID in this variable in the previous request so how can we access this variable in this URL request simply you can say this is

Speaker A

one request and you can say slash and use a plus operator okay plus the variable name user ID this is basically do the concatenation this is actual URL and concatenating with the user ID which we are getting dynamically at the runtime so once you

Speaker A

run the previous request post request you will get this user ID okay this is a link now what type of data we want to pass so slightly I will change this I can say here I can simply change as an engineer

Speaker A

so now I have updated the job of the existing user and a header exactly the same so if you want to print the console if you want to print the data in the console window you can do it and expectation

Speaker A

what is the status code for update user is again 200. so 200 is a status code update and here we don't need to store any ID so we can just remove this part so this is our update user we are

Speaker A

sending the put call and uh here appending the user ID in the URL and data we are passing request data and errors along with the same thing and we are printing the response and also we are verifying the status code should be

Speaker A

200. this is update user okay now after that immediately I will also Implement delete user this is very simple and after that we will execute all of them together so delete user so how we can do that again same process await request

Speaker A

picture and from that we have to call delete and simple we have to pass only URL so delete URL so this is a delete URL so this is a daily device so let me get this and now cross it here and again this ID should

Speaker A

come from the variable right so whatever the user we have updated here whatever user we have created above the same user ID we need so that same variable again I'm referring here we are not hard coding this data we are just getting the

Speaker A

value from the use right that's it so this particular statement will delete the request and once you delete it we'll get the response in a variable I'll create one variable const response and simply you can verify the status

Speaker A

code so what is the status code after deletion 204 is a status quo we do not have any request payload we do not have any response payload just verification of the status code so simply can say expect and from the response

Speaker A

get the status code and that should be to be 204 this is our simple status quo okay so with this we successfully send all HTTP requests now let me go through once the first request we are sending get

Speaker A

request which will return all the users which are present inside the page number two this is my first test now the second test is for what creating the new user which is basically post request and we are storing the ID in a variable

Speaker A

so that we are referring the same ID in the next test and this is for update user test and the same ID we are referring whichever we created in the previous test and we are modifying the data here and verifying the status

Speaker A

after that delete user and we are sending the request URL along with the user ID and then we are verifying the status code these are the four different tests hdp request we have set so now let us try to execute everything but before

Speaker A

execution we have to take care one thing so by default uh playwrite will execute all the tests in the parallel mode so when you run this test parallel mode there will be problem suppose before executing this create user if it is

Speaker A

executed update user then it will become a problem right because before creating how can we update the user it is not possible right so the user ID we cannot get so this is a problem you will get when you run the test parallel because

Speaker A

there is a dependencies there so we have to make them serial execution so what we can do is we have to go to the configuration file playwright.config.js and here you can see something called in the module.export test directory along

Speaker A

with this you can see fully parallel so by default this option will be true like this because by default playwright will execute all the test in the parallel model okay so you have to make this as a false so that in whichever

Speaker A

order we created all the tests they will execute in alphabetical order by default okay so we can just make it false parallel execution make it false this only one thing we have to do okay and uh that's it so workers and if you go back to the

Speaker A

projects level I am currently in uh enable only one worker which is chromium and rest of them are commented okay so this is the most important we have to fully parallel should be false because there is dependent tests are there so

Speaker A

112 done it save the configuration file now save the test file also so let me try to execute now this is for get request this is for create user this is for update user and this is for delete user okay now save the file once

Speaker A

again go to the terminal and now execute the test clear now I'm turning the test perfect now four tests are executed all four are got passed fine let's look at the report now I can execute this command npx

Speaker A

playwright show iPhone report so this is open the report now we can just observe here this is the order they have executed exact same order get users all the steps are successful executed and if you just go back

Speaker A

okay now this is the test get user test if I go back and this is for create user test executed successfully and this is for update user all steps are executed and this is for delete user this is also

Speaker A

successfully executed okay so this is simple a playwright default report if you want to generate HTML eports still you can generate so in the previous videos I have already shown you how to generate the HTML report just we need to

Speaker A

add one entry in the configuration file right if I go back here list HTML HTML is already part of it so that is already generated HTML report in the test results if I go back to the not here

Speaker A

uh I can just see here okay we need to provide that command okay so here it is generated Json and junit report if I look at here result.xml is got created result dot Json is also got created so these are the two additional reports

Speaker A

which are created HTML report is also created it should be present somewhere Okay so this is the one clearance report under display report HTML is got generated so we can just open this you cannot directly open so you can just

Speaker A

copy this relative path and copy path and then open in the browser you can just go back to the browser and same report whatever we have seen through playwright is the same report it is open the same HTML

Speaker A

report okay this is a default report provided by playwright fine so this is how we can simply test rest apis in playwright by using this a request picture so get request then post request you have seen then put request for updating

Speaker A

user and then delete request okay so that's all for this video in the next video you will see some more options in the API testing so thanks for watching

Topics:PlaywrightJavaScriptREST API testingHTTP requestsGET requestPOST requestPUT requestDELETE requestAPI automationSDET QA

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play

Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools