Automate Buying online using Playwright’s Codegen feature

playwright has this really cool feature that will actually record your inputs onto our website and turn it into code for you what this means is we can quickly and easy create a shell for our script that is a good place to start with for our automation and testing and in this video i'm going to show you how it works so the first thing is you have to make sure you have playwright installed i covered that in my first video and then we want to run playwright codegen like this what this is going to do is it's going to pop up this browser window here and also this inspector now anything that we do in this left hand browser window is going to be recorded and put into our inspector here which we can then copy and run in our vs code later so i'm going to go ahead and input a co a url here for a testing and a demo store and you can see that we now have on line 12 our page dot go to and the url which is how you go to a new page on playwright so there's one thing that i want to cover first and that is that although i said it records all your inputs it won't actually record your mouse wheel which means if you scroll down and look for an element that only appears when you get scrolling past a certain point or maybe the content is dynamically loaded you need to actually type that into the code yourself and i'll show you what i mean just now so on this website if i scroll down you'll see that we get this little up arrow in the corner which is quite common on these sorts of websites that you can click to take you back up to the top but you'll notice that in this code gen here we only have page.go2 and page.click so if i copy this and close out here and paste our code in and run it what we're going to get is we're going to get to go to the first page and it's just going to wait because it's not going to find that element nothing's happening and it will eventually fail and tell us that the element doesn't exist on the page however as soon as we start to scroll down it appears and our code closes because of our code our browser.close and our context.close here but what we can do is we can actually use page dot mouse dot wheel and this takes two arguments uh x and y axis and if we don't want to go sideways we do zero and we'll do 4000 in here and that is actually going to scroll down the page for us what i'm going to do to demonstrate that is i'm going to import time and above it and below it we'll do time.sleep just so we can see what's happening so let's do two seconds before and we'll do four seconds afterwards so when i run this now what you're gonna see is it's gonna scroll down the page and then we're waiting for that four seconds that element does exist it gets clicked and because we're in our context manager and our browser.close the page closes up so what we're going to do now is we're going to actually do a more in-depth automation script on this website we're actually going to simulate buying something from here which is quite a common thing that you would do when you were testing a e-commerce website to make sure adding to the car etc etc and the data input all works properly and you can actually take orders so let's get rid of all of this let's clear that up and we'll run playwright code gen once more we have our browser pop up i'll move the inspector over so we can see put that there and grab the url one more time and let's paste it in so what we're going to do is we're going to click on the menu we can see that come up page dot click menu button and then this one men tops and we'll do jackets now it's worth noting at this point that code gen actually does prefer the text element selectors now this is all well and good and it will work however i find them quite unwieldy especially when it's trying to select a lot of text you obviously can override this when your code when you want to it's just something to keep in mind so we're going to do let's click on the first product here load it up we can see that we've come over here and it's all added in we'll change the color we'll click on a size and then we'll scroll down we'll click add to cart now we do get this pop up so i'm going to click on ok and then scroll up to the top and we're going to click on the um shopping cart here now if you notice when i scrolled up that browser navbar actually pops down we'll need to deal with that at the end so we'll click on this then go to checkout and we'll fill in some details steve now i quite often use tab to move in between the fields but it's going to be more reliable to click so we'll do that this time put in some fake data click continue to shipping let's go for the street name put in some numbers city la ca put in a zip code a phone number let's just do that scroll down click continue payment all of this is being recorded on this side and we're going to go click on this text box to fill that in and we see we've got our page dot click here scroll down again click go to review the order click on the accepting of the terms and click place the order so all of this has been recorded now we're going to get our order confirmation and there's a couple more things i want to do whilst we're still on this page and we want to make sure that this works and we want to have our order number stored as a reference so we know what actually happened now you can go ahead and hit inspect element on this and find everything that you want so what we're going to do is i'm actually just going to click on some of these because i get the selectors in our code so i'm going to click on this one because we're going to want to add in a wait for element to exist and we're going to pick that one there and we want to have this number here stored so if i go to the inspect element tool here we can actually see that when i select it there's not an awful lot to go on here what you can do is if you stop recording you can click on explore and it will actually show you the same sort of thing so we could click on this you can see that it's saying here's the text and when i hover over it it would be that specific element however that's not going to work for us so what i'm going to do is i'm actually just going to go ahead and go copy copy the x path and i'm going to save that over here because we're going to want to use that afterwards and just to make sure we'll use the css selector as well just to make sure in case that one doesn't work so those are two are saved so what we're going to do with this one i'm actually just going to go record again and click just so our clicks recorded so it's in there and i'll show you why i did that just a second but now everything is done i'm going to go ahead and copy this because we're going to want to replicate this so let's go and paste in here and this is everything that we did you can see all of our inputs this is where we hit tab like i said probably best not to hit tab but we'll leave it in for now and we'll check because we're going to check that this is all going to work anyway so let's run it we can see it going through everything and hitting add to cart and this is the point i told you that we were at before so watch what happens if i scroll up it carries on so what we need to do is we need to go back to our page and we need to add in a scroll up on that bit so it goes up to the top so it can find that button again you notice it's hanging on this point and that's because i did deliberately did a click on this order number and it's looking for an element but obviously we've got the next order ad but up so it's not finding it but that's okay for now so when i click close out of this it's not finding this element because it doesn't exist because we've moved on to the next number so what we need to do is we need to find our add to cart and it was just before so we couldn't find this element without me scrolling up so in between this i'm going to do page dot mouse dot wheel like i showed you earlier zero because we want to go sideways let's go a thousand up we'll hit save and now we'll run this again and hopefully we should manage to get all the way to the end and only fail on that element that doesn't exist okay so that failed because i actually decided to scroll down when i meant to scroll up so we needed to have a minus because if we scroll to the bottom page that element's not going to be there there we go now i've corrected that that should work nicely scroll up there we go that worked so that solved that issue and we're making it all the way to the end placing our order so now all we need to do is let's close this because we know that this is not going to find this element here is we're going to change this into our uh let's have a order is equal to page dot query selector and i'm going to paste in let's try the xpath selector here paste that in and we want the text content of that and we'll print out order now this part here where we're clicking on this element i'm leaving it like this it's not it's not perfect because you don't want to have to click on an element this is just a piece of text to wait for it you would probably want to use the weight but this is going to work for us just fine so let's run this now and hopefully this should all go through nice and quick and at the end we should get in our terminal the printout of the order number that we just placed there we go so you can see we placed this new order number here so what we could quite conceivably do now is take this script and manipulate it and make it run multiple times so we could really test this website to make sure that all different sorts of inputs work clicking on all of the extra buttons work make sure that it fails on the text input in the cart properly and make sure that all functions properly and we've done that all using playwright and automation if you've enjoyed this video i would highly recommend that you go ahead and watch this one as well which i think you'll find equally as interesting

Channel: John Watson Rooney

Views: 1,961

Keywords: playwright, browser automation, python playwright, playwright tutorial, playwright testing, automatic order placing, e-commerce store testing, python tutorial, python automation, john watson rooney

Id: oPjfDkge8Vc

Length: 9min 45sec (585 seconds)

Published: Sun Nov 21 2021