Playwright API Testing Demo for Beginners

hello and welcome I am raghav and today we are going to learn step by step from scratch how to do API testing with playwright this is going to be very easy and very interesting we will start with the project setup how do we set up the API testing project we will learn how to create a API test step by step we will create a get API request a post EPA request put and delete API request and then we will see how do we validate the API response how do we add the assertions and then we will see how we can use the playwright UI mode and we can check our responses logs error console output and everything and then we will see how do we see the HTML report for our tests this is going to be very easy and very interesting so let's get started and you will also find all the nodes all the links in the description of this video so first let us start with project setup now if you are already working with a playwright project you can use the existing project or if you want to do a new project setup you can follow me so in case you want to continue with your existing project you can skip the project setup and continue from the next slide however I will show you all the steps from scratch so step number one is we will create a new folder for our API testing project so I will go here you can keep the folder at any location on your system I keep all my project folder under this projects folder and then playwrite so here I will create a new folder and I will call this as playwright API testing okay so I have created this folder playwright API testing and now next step is you have to open this folder in your IDE so you can use any ID that you are using or you can use vs code that I am going to use so I will first open my vs code and here I'm going to open the folder so you can open it from here we have open folder you can also go to file and we have options for open folder here or you can just drag and drop the folder onto vs code so I'm going to drag and drop this folder here and here I will say yes trust the authors and you can see we have got our playwright EPA testing folder added on vs code okay next step is we will open the terminal or the command line on the folder location and then we will run the command npm init playwright at the rate latest so this will set up a node project and will also add playwright in the project and we'll do the all the project setup so here you can open a command line and then first go to the location of the folder that is playwrite API test or whatever folder you have created or you can use the integrated terminal in vs code so here if you see if you go to the top we have this terminal here and we can open a new terminal or you can press the Ctrl shift and back take key back the key is the top left key on your keyboard just below the Escape key or you can also press Ctrl plus back the key and this will open the terminal you can see it has opened the terminal and it has opened the terminal at the same project folder location so this is the advantage of using Ides like vs code we can use the integrated terminal and it opens on the same project folder we can directly start typing our commands here so I will say npm init playwright at the rate latest npm init playwright and if you want to use a specific version you can give the version number or if you want to use the latest I will just say latest so this is the command I have written here and I will hit enter so this will do the setup so here it is asking do you want to use typescript or JavaScript you can use the up or down arrows on your keyboard and select I am selecting JavaScript and hit enter where you want to put your end-to-end tests it is giving the default folder tests I will use the default I'll just press enter here then add a GitHub action workflow I will go by the default false and press enter install playwrite browser I will go with the default true and press enter and this will now initialize the node project so you can see package.json file is created package log.json file is created in a node project this is a very important file so here it has all the information about the project it also has all the dependencies that we you have used in the project so you can see we have got playwrite test I had created a video earlier on what is package.json package log.json if you want you can check that so if you just search for what is package.json by my name you should get that video or yes this is the one you can check this video and we have got our project setup you can see we have got our tests folder here it has some example tests already created we can just run these tests and check if you want to increase the font you can go to the settings so here is the settings icon go to settings and go to text editor and font and here you can increase the font so you can see it has increased the font size also if you want you can increase the font size of the terminal text so for that you have to open the command palette you can go to view and we have command palette here you can also use the keyboard shortcut Ctrl shift p and if you say open uh user settings Json or first you can just go to open default settings Json this will open the Json file and here you can check what is the terminal font size so there is a terminal font size setting let me check what it is okay it is terminal dot integrated dot font yes this is the setting however in this particular file it may not be editable so I if I try to edit you can see it says I cannot edit in read-only editor so you can just copy this setting and then go to command palette I'm pressing Ctrl shift p and then say open settings and you will see this open user settings Json open this file and here you can give a comma at the end and add this setting let's say I want to make it 20 and say save it you can see the font size increases for the terminal as well okay okay so now we have I think you can see it properly so we have done this step and we have got our package.json and the test folder the project setup is done now if you want to run and check the existing test you can see npx pre-write test this will be good to check if everything is working fine I will clear the terminal you can also hit this up Arrow to maximize the terminal window and here if I say npx playwright test it will run the existing tests and we can check if our project setup is done correctly so it is running six tests using one worker so it is running on Chrome Firefox webkit and yes everything is working fine you can also run this command npx playwright show report to check the HTML report so it opens the browser and you can see all the details about your tests and we have the filters as well here all right so this is all working fine I can press Ctrl C on the terminal to stop the report and I will say clear okay so we can also then see our tests and see the UI mode of playwright so if you say npx playwrite test I am pressing the top Arrow up arrow on my keyboard to go to the last command so in PX play right test hyphen hyphen UI and hit enter so this will open the playwright UI and here we have a light mode and you can change the mode from here dark mode and you can see all our tests come here we can run from here we can see all the details for example if I want to run this particular test I can say run I will get all the details here I can see each and every step the screenshot and I can also see the output from this button toggle output and then I can see my tests I can go to the source and I can see the test code source code we have logs Network attachments everything is here all right you can also watch it and also open it in vs code so if I say open in vs code you can see it goes to vs code and it is asking for permission I will say yes and it opens that particular test here all right so this is very handy very intuitive you can see all the screenshots before after action you can see this before was this after watch this for this page dot go to this was the action everything is here right this is very intuitive and in a moment we will see how we can use it for API testing as well okay and we have already seen the report now we are going to create a new file for our API tests so I will go to the folder test folder you can do a right click and say new file or you can click on this button that says new file here and I will say API underscore tests dot spec dot JS you can give it any name but it should follow the convention set in the playwrite config.js file so if you open this file free write config.js if you see any particular naming convention to be followed you can use according to that as of now I don't see any naming convention is here it just says that this particular folder that is tests which is just under the main project folder will be considered for all the tests all right so let me open back my file I have created this file API underscore tests Dot spec.js and as of now it is empty so we are done with the project setup here if you want you can take a screenshot of the screen and keep it handy with you now we will continue with the steps to create a API request and validate the response run it validate the response and see the results so here the first step is we will import the test and expect packages from the playwright Library okay so I will say here import test and expect from I am getting this Auto suggestion if you don't get the order suggestion box you can try pressing Ctrl and spacebar on your keyboard so this is what I have added I can save using Ctrl s on my keyboard step number two is now we will create a test so let me first just create a simple test I will say test and I will give the title or I'll just say API get request and I will say async and here I will use the API request context so I will say request and use this arrow symbol and a curly bracket start and stop so I have created this test you can see this is the body of our test and this is the API request context and this is what we will use to run our apis get the response and do all the validation so this is very very important and you can see it is coming from this API request context okay so here this is what if you want you can read more about this API request context on the official documentation so this is what we use for our API testing okay now next step is we will use a API URL and use the get method to run the API and then we will also store the response in a variable so for that we need some demo apis so here I am going to this uh website req res dot in it has some demo apis are requires.in this is the website and here if you scroll down you can see some dummy apis that we can use for testing so we have get requests Post Port patch delete Etc so here I will say this is what we use await request dot get and the URL or the endpoint and whatever will be the output that is the response we are storing in a variable called response so I am saying here const response you can use any variable name is called equals to a weight request Dot and you can see all the methods are here delete fetch get patch post put I will say get and within the brackets Within codes I will give the URL or the end point of the API so here let us see this is a list users get request this is get a single user let us use this one and this is the URL you can click here open in a new tab and you will get the complete URL that you can copy and add it here okay so this is now our this will run our API request and store the response in a variable called response okay at this moment if you want you can save I am pressing Ctrl s and you can go to the UI if you have closed the UI you can open it again and even if you it is running it will take the live changes so you can see it has taken this changes it has got our API get request the file and the test here I can run from here and check if everything is fine until now and yes looks like everything is fine I am getting this if I go to the network I can see this I'm getting all the details here response request response body everything is coming here so that means everything is working fine until now okay so now next step will be I will check the status code so here I can use the expect assertion and say response dot status to be 200 so I will say here expect and I will say response Dot status dot 2 b and I will give the status code 200. okay so I am anyways going to keep all the notes in the description if you want you can refer from there as well let me just go back I will save this and go back to the UI and run it again just to check if it is able to run this assertion and yes looks like it is able to I if I see this this is pass now so this is running fine then I can also check if the response contains some particular text for that I have to extract the text from the response and store it in a variable so I am saying I will use this variable text you can use any variable name and here I will say a weight and I will say response dot text and then I can check if text contains some particular value I will say expect Dot to contain and here if you see this particular API request it gives us the details of a particular user first name is Janet last name is Vivo and we have got some other details I am just going to check that in the response we get the value Janet I will save this and run again and check if everything is working fine and you can see this all is working fine okay I can also check in case of Janet if I say John they should fail I will see when now run again and let us see what happens now so you can see it fails expect to contain and here it says this particular thing has failed if I check the source I will also get the source here I can see the errors here and this is the particular line which has field so you can see this is so easy to find the errors the code which has thrown the error and what's the actual issue and the details here okay and now if you want you can also write the response on console for that you can say console.log and await response dot Json so if I say here console Dot log weight response Dot Json so this will now also write the response on the console so save and I will run it again let me change this back to Janet so it will not fail I will save and run again and this time it has passed you can see everything is working fine and now if I go to the console you can see we also get the response written on the console if I check the network I can see the request response body everything is coming fine here all right and we have already ran and checked the results so this is how these are the steps to create a very simple get API request with playwright if you want you can take a screenshot of the screen and keep it handy with you now let us go to a post API request now get request was very simple we just have to give the URL or the end point and then we do do all these assertions however in a post request we have the request body or the payload as well so if I check this particular example you can see along with the URL we also have to pass the request body or payload so let us take this example and the first steps are the same we will add the Imports and we will create the test now because we are going to continue in the same file I am not going to add the Imports again I will just say I'll create a test I will say test and give the title API post request I'll say async give the request context and I will create the test now if you say if you add this dot only here if you run this entire file it will only run this particular test however as we are using the UI we are running from the UI we don't need this we can just keep it as it is okay now this remains same I will use request dot post so I'm just copying it from here the method will change instead of get I will say dot post all right and I am storing it in a variable response however after giving this URL so let me also give check the URL that we have to give so this is the URL so I'll change the url here so after the URL we have to give the request body so here you can see step number three is send a post request along with request body and store the response in a variable and this is how we give it so here after the URL I will give a comma and then I'll start a curly bracket start and stop and then here I will say data colon and give the request body so I will say data colon and here I am just going to copy this request body and paste it here you can also correct the formatting by doing a right click and say format document and save it okay so this is how we give the request body in a post request then the rest of the things will remain as it is we can add the assertions here we can check the Response Code we can check some particular value in the response so let's say I will just copy this assertions all these assertions checking the status code checking a value in the response and also writing the response on the console I am copying this from the last test and pasting it here okay the status code for a successful post request is 201 so I am adding 201 here and then in the response whatever name and job we give we get back the same values here so let me check I am going to give my name here log herb and I will say job is teacher and in the response I am going to check if I get back the name here and that's it so this is our test for a post request save this and I will run and check it has come here API post request I will run this and you can see everything is fine I also get the console output I see the network I see the request response body everything is fine here here also all the assertions are working fine okay so we are able to run our post request as well and we have already ran and checked the results so if you want you can take a screenshot of the screen as well and keep it handy with you next we will see a put request now put is very much similar to a post request because it also has a payload or a request body so for a put request let us see some example we have this put put is used for update and it is used to replace the entire resource on the server and Patch is also for update but it is for a partial update it does not replaces the entire resource it changes something but put is for a complete replacement of the resource so let us take this example I will go to my vs code and I'm just going to copy this entire post API request and I will copy and paste it again and I will call it API put request and here instead of post method I will use a put method request Dot put we will have to change the url so let me just copy the URL so you can see this is going to update a particular user with id2 here right and here the body looks same we have name and job so this is fine the status quo we should check is 200 a successful post a successful update or a put request sends the status quo to 200 and then we are checking the values in the response and writing the response this is all fine so I will save this and check on the playwright UI it has come here let us run this and check and yes looks like everything is working fine we are able to run this if I get check the console we are getting this output here if I check the network everything is fine we get status 200 method put this was a request content type duration size I can check the request here this was a request that went to the server this is the response from the server and this is the response body okay so this is all working fine now we have got the delete API request here we just give the URL and we can check the status code 204 so if I check a delete request here this one is for delete so I'll take this URL let me first just copy the get API request test and I will paste it here I will say this is API delete request and here I will say request dot delete and this is a particular user so this is the URL I think it should be the same yes it is the same it is deleting the user with id2 here and here I'll just check the status quo should be 204 I don't need all these here so this is my delete request I will go to the I will save and go to the playwrite UI we have got the request here let us run and check so everything is working fine you can see if I check the network this is delete 204 and request in the response we get this response headers and here body will be empty because the resource is now deleted all right so this is how we use a delete API request this is how we run our API request on playwright now here are some references if you go to the official documentation if you search for playwright API testing you will see the official documentation and this will be very useful and very handy you can see the latest changes here so here you can see all the latest changes then if you check the API request context so this is the context we have been using the request contest which is actually the API request context you can read more about it you can see all the methods delete is here dispose fetch all these methods you can check and then you can also see the response methods or API response assertions so if you search for pi response you can see the API response here then API response assertions are here you can see methods so here you can see if I say await expect response dot to be okay that means it will check the response is in range 200 to 299 that means all the positive response status codes similarly if I say not to be okay it will check it is not in that range so you can check all these API response assessions as well all right and this is the demo apis that we have used and please do some Hands-On if you have any issues if you face any problems let me know and I will see you soon I hope this was very useful thank you for watching and never stop learning foreign

Channel: Automation Step by Step

Views: 24,865

Keywords: how to create playwright api testing project, how to do api testing on playwright

Id: EEjyLfp6DoQ

Length: 34min 31sec (2071 seconds)

Published: Thu Oct 05 2023