Playwright Tutorial #6 - Promise, Async and Await in Playwright

hey everyone welcome back in this playright tutorial I'm going to talk a little bit about promise async and weight within playright or any JavaScript based test automation tool what exactly the promise is and if you're using async and await what exactly it means now we are learning playr so we'll be completely focusing on these Concepts to understand why or basically when the JavaScript based test automation tools are asynchronous what synchronous and asynchronous differences in the programming concept so we'll learn all of that now before that um let me quickly search for in the play that documentation I'll search for promise okay so I'll say let me pick any of the page wherein the return is Promised okay so for example this title all right so this returns when you use anything for example page. title it will return the pce title okay and then we have understood in the first program that we have written first test that we have written we have used await okay async and await keywords now what exactly it returns it returns if you'll see that this is the usage it returns a promise what exactly is promise here okay so if we simply go ahead and click on this link you will see in the JavaScript context promise is the promise object what it represents it represents the eventual completion or failure of an asynchronous operation and its returning value okay so whether the particular title right page. title whether it has been successful or a failure as a step when you execute this particular test step to get the title of the page whether it has been successful or failed along with getting if say for example it has been successful then what is the title of the page that will be returned or this object promise object will basically represents the eventual completion and it will return the resulting value okay and that is why it is showing that it will return a promise and a string basically so along with the promise whether it has been successful or not uh it will return because title will be a string and it will return the string as well okay so when we say synchronous and asynchronous in programming context so synchronous programming or synchronous programming refers to the traditional programming approach wherein the task were executed one after the other okay so like in selenium we know that when we write our test case a first step until and unless that is being successful it will be it won't move to the next step right and in asynchronous programming multiple steps or multiple tasks can be executed simultaneously okay this is just a Google Search and you can go ahead and read a lot more documentation around asynchronous and synchronous but the Crux of it is that with the synchronous approach first for example there are 10 steps in your test cases First Step will be executed launch browser when that is successful then the next step will be invoked okay to find element and then click on something so there is a guarantee in selenium but with playright because it's on JavaScript and any any library on nodejs okay and JavaScript is asynchronous that means the steps or the test steps that we are going to write can get executed all at once now how we ensure that this sequence is being M maintained it is basically through the async and await keyword right that we have used in our test here so when we wrote the first test we have used async and await that means with these keywords we are ensuring or we are saying our program that this is an asynchronous function all right whatever function we are defining here so this is first thing is we are defining okay this is asynchronous function and then when each with each step we are saying okay wait a wait until this particular promise is fulfilled right so when we say promise so as sync await and promise all go hand in hand so this then ensures that okay what will be the return type of it it will when we say past. go to it will return something right so it will return a promise whether it has been resolved it has been failed or not right so if we go to the documentation here and let's search go to okay go to page so it will Returns the main resource response right so basically whether the navigation has been successful or not okay and you'll see that frame let me go to the page one so go to page so page go to URL okay different arguments that are that you can pass with this particular and what it returns it returns a promise promise is nothing but a object okay and which will have these three states okay one of these whether it's pending okay whether the execution whether that particular step is pending or it has been completely or it has been completed successfully that means fulfilled or rejected that means the operation has failed okay now these promises ensure that yes this particular step has been successful if say for example this the promise that is returned because we have used asyn an a that means promise will be uh built in within in it so if we say go to this particular URL that means unless and until the promise is or promise object with the required details is returned right whether it's successful or failure this particular step is not going to move or basically the program is not going to move to step five all right so this is how promise async and await or the concept of promise async and await is now with each of the function that you see right so which with each of the function that you'll see around the page or the web element you will see the return type that it will be a promise and if there is any return value that needs to be returned okay for example here is Clos closed it doesn't return a promise it's a bullion right so anywhere that you'll see that yes there is a promise that is being return then asnc and await will help you to basically make sure that each step is executed in a sequential order and your test is executed in a sequential order okay otherwise there will be a problem all so for example both of these if you don't use say for example await okay here I remove await all right and then save it and then let's try to execute okay let's execute this test and see what happens okay so it has launched this page all right let's see the console here you'll see failed worker ran one test okay so even though it has launched the page all right but then there is an error page. go to browser has been closed right now why is this the case this is because you'll see that on the goto there is an error right and then one error was not part of any test see above for detail right what exactly it means that this particular error browser has been closed why does it occur here okay why did it occur here because with we are defining this as an asyn but then we are not waiting for the promise object to return right so you have to use asyn and await together so that the promise object whatever we have seen here right so whatever we have seen that these State unless until this state is returned if it if if it says fulfilled then it will go ahead and then execute the next step but if we don't use this what happens is this then executes all the steps together all right and that's where basically the problem happens right because it's an asynchronous so all the steps or all the test steps can ex be executed all at once and you don't know what response will return on a particular step whether it has been successful or failure and then it becomes a problem in the asynchronous test cases right now if I say for example I remove this async from here okay let's remove async and just use await okay you'll see that there is an error okay await expressions are only allowed within async function so if you have to use await you have to make sure that you use async keyword there all right and if I change it all together and don't use async and AIT obviously the problem that we have faced will still there right so you'll see that if I go ahead and run this you'll see now this is not synchronous anymore or there is no promise or asyn and AIT so it is still going to fail because these both commands will get executed at once and then you will see the similar sort of error browser has been closed right so in play rights you have to use the keyword async and await so that's all for this particular video I hope it was helpful thank you very much for watching

Channel: Software Testing Mentor

Views: 1,532

Keywords: playwright tutorial, playwright automation tutorial, async await, async, async await javascript, asynchronous javascript, playwright promise, playwright async, playwright async await, playwright sync vs async, playwright await, promise in playwright, async await in playwright, playwright testing tool, asynchronous javascript explained, playwright, playwright automation, playwright testing, playwright javascript

Id: LiQq7hZM2Xk

Length: 8min 22sec (502 seconds)

Published: Tue Mar 05 2024