E-Commerce Website Automation with SELENIUM + PYTHON | Browser Automation | Full Project

hi everyone my name is alex welcome to this tutorial in this one i would like to show you how we can automate an e-commerce website using python in selenium and i would say let's jump directly into the project and let me show you the requirements so first of all this is the website we want to work with it's a dummy page that means yeah it's not a real one and the whole project goal is to simulate a real e-commerce purchase scenario right and let's just imagine that we have chosen this website and we want to buy one iphone and one laptop right so first of all let's get a feeling how this page is structured right let's say we want to click on yeah this first button in order to see this iphone then we want to take a look on all these pictures right so all in all we have six iphone pictures here we take a look on everything and afterwards we want to yeah capture a screenshot of this specific picture right and then let's say that we liked this product so much that we don't want to buy just one of it we want to select two pieces right so then we will add two iphones to our card afterwards we want to select one laptop in our example it will be this one so let's click on this and we want to choose a specific delivery date right so that means here we have the opportunity to work with calendars yeah after we have chosen one specific date we will add this laptop to our cart then we go to the checkout process as you can see here we have chosen two iphones and one laptop right let's go to the checkout page create a guest account afterwards we need to provide our credentials again since it's a dummy page you can just use dummy data and yeah we will finish the whole checkout process and finally we want to print out the final price in our console and also the success message and yeah let's let's try to simulate this scenario i also have one short requirement overview so everything i just told you i split it up in seven steps right and for the delivery date i have chosen the 31st of december 2022 and yeah i would say let's automate this process and enjoy so let's go back to our page this is our starting page right here we can remove these items i have just selected and remove that one let's go to our yeah fresh home page and right now let's begin first of all you need to open your ide here in this example i want to work with pycharm i have already created one project folder that means in the next step you just need to create one new python file and give it the name let's say we want to call it ecom project right and right now we are good to go so first of all we need to import the webdriver from the selenium package from selenium import webdriver this is the very first step that means we can initialize our webdriver and then we can start writing our script and to do this first of all let's provide the driver variable then webdriver dot chrome because i have chosen chrome for this project it's my favorite browser and yeah this is the reason why here you need to provide the path where your web driver is located so let me copy and paste my personal path obviously you will have a different one but this is where i um saved my web driver and yeah don't forget to comment this initialize web driver so that the next person who is reading your code will know what this is about right afterwards let's just open our homepage so it's driver.get and in this step you just need to to copy the url so this is yeah let's start with this url right just copy it and paste it to your to your code right driver.get paste it here and in the next step we can maximize our window and then we are good to go right so let me just comment this out too so we have right now open url and maximize window so first of all let's take a quick look if this initialization went well or not so right click let's run the code and let's see if this website will open all right chrome driver is loading url is loading window is maximized so you can see here this when now opened and we can right now proceed with our requirements right again let's take a short look what we want to start with first of all we have successfully opened this website right right now we need to select two iphones and take one screenshot so these two are our next requirements let's see how we can manage it first of all we need to click on this button in order to be able to see this iphone we want to select right that means let's put a right click here and inspect in order to build the specific locator for this particular button right again let's inspect on this and you can see here we can work with this a tag and with the text to build our specific locator in this case i want to use xpath right so let me show you how we can build it first of all um let's put down the tag it's a and then we can mention this text we have just copied right and right now we have our xpath expression for this particular button so i have just copied it let me go back to the pie chart ide let's provide a variable let's say phones equals to driver dot find element by xpath paste it here and in the next step we want to click on this right so don't forget to comment this phones let's say phones button and then [Music] in the next step we want to click on this one right again right click inspect same structure here we have an a tag we have one text element right so that means we can just copy this text part and remove the old one and replace it with the new one right so you can see here we have again created successfully our x-path expression for this particular field and yeah let's copy it and paste it in our ide and we want to click on this too right to be honest i don't know exactly how much knowledge you have right now about selenium but i'm also recording yeah a different tutorial where i will cover all the necessary elements from selenium right so that means if you're right now not familiar with everything we cover in this video don't worry i will cover the basics in my yeah next tutorial and for example for this one so let me go just back to this expression it's iphone store driver find element by xpath and paste your copied expression here and then again we want to click on this iphone right actually it's not iphones it's just one iphone we want to click on right and what we can do here is let's say after this line of code after clicking this the script should wait for one second until it will proceed with the next line that means we need to import this time package just move your mouse here and click on import right then you can select this this one click on this time package and right now you can scroll up and you can see here this time package was imported right now let's say we want to wait for one second here and actually you have different opportunities how you can work with weight expressions in selenium and i will cover all the different approaches in my tutorial in my selenium python basic tutorial but for this project i guess we are good to go if we just use this simple time.sleep function right so after we have clicked on this iphone again we want to take a look on all these pictures here right so that me that means we have one picture we want to click on and then we want to click five times on this arrow button right in order to get to the last picture and let's just say after this last picture we want to capture one screenshot right let's automate this process that means again we need to inspect this first picture right let's find the correct x-path expression and as you can see here our pictures are stored in this li tags right we have six li tags and each tag is representing one picture first of all we need to get access to the first li right let's say we want to start with the parent tag with the ul tag and then we want to traverse down to the first picture let's try and see if we can do that so first of all let's write down the x path expression and right now disappeared it's not a big deal we can inspect it again and we need to choose that one right so it's ul class and then the value is thumbnails let's paste it here right and right now you can see here we have chosen this parent class and now to get access to the first picture we need to traverse down to the first element so it's li 1 and you can see here this is unique for the first picture and this is actually the element we want to click on first so again copy it go back to your ide let's again provide one variable let's say first pick equals to driver dot find element by xpath paste your xpath expression here and let's click on this right after we have clicked on this first picture let's say again we want to wait for let's say two seconds until the next line of code will be executed and in the next step we want to click on this arrow but not just one time we want to click on it five times right because right now we see picture one out of six and we want to click five times one two three four five until we get to the very end and see the last picture and let me show you how we can do this actually first of all we need to find this this arrow right so again let's inspect it right click inspect and here we can we can use this button tag this title attribute and this value here so first of all let me copy this value so that i don't need to remember it so it's double slash button at title let me remove this space here right title equals to the value element and right now you can see here we have successfully located uniquely this arrow element let's copy it and paste it here to our ide right let's just give it a name and let's say next right for all let's say next click so next click equals to driver dot find element by xpath and paste it here right now you need to click on this button five times right so that means one approach is not the best one but you can do it you can say next click dot click so selenium will click on this specific arrow button one time then you can just copy this line and paste it here five times that means um that yeah at the end it will click on this arrow five times but it's just not a good approach we have a cleaner way to do this here we can simply use a simple for loop to do this and what we can do is we can write down for i in range from 0 to 5 we want to click on this specific element right let's do it so put this expression here and let's say after each click we want to wait for two seconds right that means with this lines of code we will have access to the first picture and then with this cleaner scenario we can click on yeah this arrow button five times but not using this five lines of code but just this two lines and this is just for yeah for for the weighting right let's say we want to remove these lines and make it a little bit cleaner right and if this script will run successfully after this step here we will get to this last picture and let's say that finally when we have reached this picture we want to capture one screenshot right let's see how we can do that it's actually quite simple only thing you need to do is you need to call the driver object dot save screenshot and here you need to provide the file name that means we can just choose a random name let's say screenshot and then hash yeah alias number so screenshot hash plus let's say we want to select one random number between let's say 1 and 100 but first of all you need to import this package right again you need to move your mouse here and go to import then you can import this package here and if you scroll up scroll up you can see here this this one was right now imported and we can use it to create our random number right so that means random dot renting and let's say we want to choose one number between 0 and 100 so we need to put down 101 because the last one is not inclusive right and afterwards we want to save it as in dot png file so what we need to do let's write it down dot png and here this is our file name for our screenshot that means we need to concatenate three elements this screenshot this random number and the dot png ending right but in order to be able to do this we need to convert this number to a string it's also quite simple just put down str open a bracket and close it and right now if everything worked fine we have successfully concatenated three string elements and this is right now the file name for our screenshot so first of all let me just put a few comments here right first picture next picture [Music] and here we can just write down save screenshot right so i would say first of all let's run this code again and let's see if everything worked fine and if not we need to debug it alright so let's cross our fingers right click and let's go so the browser is opening windows maximized iphone is clicked on all right first picture was clicked on second one third one number four number five and number six great this is our last picture we want to see let's go back to our ide and let's see here we have successfully captured one screenshot you can see here this was our name screenshot hash then we have a random number between one sorry between 0 and 100 and we have this dot png ending so that means that this step was successfully done right so in the next one we want to click on this x button let's quickly do it right click inspect let's locate this x button and write down our x path expression again i'm always almost um copying this value element so i don't need to remember it so here it's button add title and paste down your value element right so you have an access to this x button go back to your ide and yeah let's give it a variable say x button equals to driver dot find element by xpath and we want to click on that one right so x button dot click right so then let's again wait for one second until we proceed and let's see what's the next step here we want to click on this x button and then again remember we liked this let's imagine we like this product so much that we don't want to buy one iphone but we want to select two iphones right so this is a good practice how we can work with with text boxes first of all we need to click on this text box and you can see here the default value is one we need to remove this one and replace it with a two and then we need to click on this add to cut button right so first of all let's locate this text box right right click inspect and here just for example we have one id right it's input quantity let's this time use the id instead of xpath to locate this specific text box i have just copied this id expression let's go back to our ide and let me write down this expression so it's quantity equals to driver dot find element by id this time and we click well we paste this id expression and we want to click on this checkbox right so it's quantity dot click afterwards let's wait for one second so this will be not executed too fast and yeah so we clicked on this right now we want to remove this element right so the first step is to remove it second step is to put down a two in this text box right let's do that after we have clicked on this text box let's write down quantity dot clear that means everything what is inside this this text box will be just removed in the next step let's say we want to have two iphones so it's quantity dot send keys that means if you want to write something down in a specific text field you need to yeah use the send keys expression here we want to write down a two right that means quantity dot send keys and here we put in this two right afterwards let's again wait for one second here and then we want to click on this add to cart button right let's locate it and here we also can work again with the id right so just copy it go back to the ide and let's give this a variable add to button equals to driver dot find element by id this is our id for our add to cart button and we want to click on this right so it's add to button dot click and if everything worked fine after this step we have successfully yeah put two iphones to our cart let's see if this worked right so it's right click and run this again again finger crossed browser is opening windows maximizing but i mean right now you know the steps until this screenshot screenshot part you have already seen what happened right so it's just a small repetition of everything until this specific step here we have our screenshot and you can see here the text field is cleared we have selected two iphones and successfully clicked on this add to cart button how you can see that it was clicked successfully just take a look here on this card item we have two items right and if you click on this one you can see here that we have successfully chosen two iphones great so let right now let's take a short look on our requirements and we have selected two iphones successfully and we have taken one screenshot right so i think it's we are good to go right now and in the next step we need to select one laptop we also want to select specific delivery date for our laptop in this example it will be the 31st of december 2012 let's see how we can manage it so first of all in order to get access to the laptops we need to move with our mouse to this specific region right and then we want to click on this button so again first of all move your mouse here without and this is right now very important without clicking on this button just move your mouse here and then when this area appears here right we want to click on that one that means after clicking here we have access to these laptops and notebooks let me show you how we can manage it with selenium so first of all let's find it this element right click inspect let's locate it again same structure it's the a tag and here we have this text element right let me locate it again because it disappeared we need that one right so copy it paste it here you can see here it was selected then copy your expression and let's go back to our ide let's just say laptops equals to driver dot find element by xpath paste your x path here but right now we don't want to click on this again and first of all let me just add one short comment right it's oops add to card right so here in this example we want to work with the action chains class let me show you what i mean by that first of all let's provide a variable action equals to action chains this is also a very important aspect of selenium first of all we need to import this action chains class again putimos here and click on import and you can see here it was imported here from the selenium package but we need to put this a little bit um above because this comment is related to this driver object right so again let's go back and here you need to provide one argument so it's the driver argument and then what you can do is to write down action dot move to element right and we want to move to this specific button right imagine you your mouse is here right now and you want to move it to that button so that you have access to this bar right that means action dot move to element and we need to move to this specific element because in this variable we have stored our xpath expression for this button right so provide this laptop's variable here right and every time you work with the action chains class you need to put down at the end dot perform otherwise yeah it just won't work and you get an error right so after our mouse was moving here we need to click on that one right so again right click inspect and we need to take this text and since we have again the same structure right so we have an a tag and we have a text we just can copy this text and remove the old one and put down here the new one right so let's copy it go back to our ide let's choose a different variable let's say laptops 2 to make it a little bit simpler driver dot find element by xpath and here we can paste our xpath expression and yeah let's work again with the time.sleep functions so i can um show you what we did when the script is running so it won't run too fast and i can explain to you while it's running right so again let's put another time.sleep function let's say here right we can put it here and then we want to click on this laptop's laptops 2 element right and afterwards we will be redirected to this specific area so let me close the dom and we want to choose this laptop right so again i mean the concept is almost the same so like let's locate it we have again an a tag and we have a text just copy this text and build your xpath so it's a text and here we have our new text right so this is our laptop let's copy it back to pycharm let's say we name this variable as hp equals to driver dot find element by xpath paste your xpath expression here and right now we can click on this right so time dot sleep for one second and let's see what happens after we have clicked on this laptop a new page will appear right and right now we need to use this calendar right because again we need to select a specific delivery date and in this example we need to get access to this one so after clicking on on this specific notebook we see this page but you can see here we just see clearly the delivery date but we don't see clearly this this box of this quantity element right so that means we need to scroll down a little bit until we have access to this region or to this area right so this is for example a good opportunity to show you one of different approaches how we can scroll in selenium so first of all let's say we want to scroll to this element right because that means if we are on this page and we want to scroll to this element we see clearly this region right so how we can do this let's just say we want to scroll to this page that means that selenium will try to bring this element on the top of this page or at least on the highest position what is possible for this one let's say if our page is ending here and selenium tries to bring this element as high as possible we will see this specific area here right okay i think you should get the concept if not um let me know and i try to explain to you again but i think when we run this code you will see what i mean by that right so let's do this and let's scroll to this element so right click inspect and here we need to locate this add to cut button again let's work with yeah one xpath expression button tag then with the type attribute and the button value right let's try to build it so it's button type and it disappeared again let's find it right click inspect button type and again we have this button value right so let's paste it here and you can see here this is not unique right so what we can do here is let's see what we can how we can change it we need to find that one and it should be unique right so let's just remove this type attribute replace it with id and we can use this value right so let's take a look and right now it's unique right and you can use it so copy it back to pycharm and let's give this another name let's say all right add to button we have already used this variable let's say add to button2 that means it will be a unique variable for our example driver.find elementbyxbath and then you can paste your ex path here and right now we need to scroll to this element right we don't want to click it right now after we have selected our delivery date we will click on this button but for this moment when we will be redirected to this page we want to scroll down to that one right let's see how we can do this i just need to put down the driver object dot scroll oh no it's it's not the driver object it's the add to button to variable dot right now you need to choose the fourth one all right right now i i got this alright so again let me repeat it again because i mistakenly told you you need to work with the driver object here you need to choose the specific element you want to scroll to right so let's use this it's add to button 2 dot scroll and right now you need to use this web element right location once crawled into view that means selenium will try to find this element and scroll to it right all right this is actually the concept and selenium will try to put this button on the top and again if the site ends here this is the highest possible selenium can bring this element to and we will see this specific region very clearly so we have access to this calendar we can if we want to we can choose a quantity and click on this add to cart button right okay so let's proceed let's again say time dot sleep and we can wait for one second here don't forget to comment it click on hp laptop here we want to scroll right and after we have scrolled to this button we want to work with the calendar right that means click on this calendar button right click inspect and you can see here we can use this expression and build our xpath out of it so let's do it it's i class equals to the 2d value right and this will give us the calendar button right let's copy this expression and go back to our python ide and paste it here right let's first of all choose one variable calendar variable equals to driver dot find element by xpath paste it here and let's click on this calendar right okay my picture needs to be moved let's say here great after we have clicked on this calendar again let's work with the time.sleep function and wait for one second and let me comment this calendar right great so calendar is chosen in the next step you need to get a feeling how this calendar element works right so you have different options how you can select a specific delivery date in our case let's take a look on the requirement again we want to select the 31st of december of the year 2022 right let's do it so you can see here here we have this default value it's april 2011 and let's see how we can go to 2022 to this december month and to choose this specific date right so it's not a good practice to yeah write down let's say 100 click statements until we get to a specific month to a specific year and something it's it's just not a good practice right so that means we need to think about something what is yeah what is cleaner right what we can do here we can just take a look how this one is working so right click on this month and year let's inspect it and you can see here we have this th tag and we can use either the cool span [Music] attribute or the class attribute let's see let's say we want to work with this class attribute and then we want to get access to this text field right so for example um you can see here we have this text field may 2019 then next month it's june 2019 july 2019 and so on right and we need december 2022 right that means manually we need to yeah click on this one a lot of times but we can write just down a simple while loop and this while loop will do this job for us right so first of all let's try to find out how we can build this expression let's say it's th we work with this class attribute right and we need to locate it again class and the value is picker switch right this is the element we want to work with and we need to get get access to this specific text so let me show you how we can do this first of all let's copy it back to pycharm and let's name this variable month underscore year right driver dot find element by xpath paste your xpath expression here and right now we can use this simple while loop let's say while this text element of this element is not december 2022 so it's our required delivery date if we don't have this text december 2022 please please click on this button right so first of all let's write down this while loop let's say while month underscore year dot text does not equal to december 2022 right and then sorry and then we need to get access to this specific arrow right so that we are able to click on this again right click inspect and here we can just work with th class equals to next and you see it's the same structure right so take this next value copy it and remove this picker switch one and paste this next value here right so right now we have access to this arrow element let's copy it back to pycharm and first of all let's just select one variable next click we had already used let's say next click and then calendar right this is our new variable for this specific arrow driver dot find element by xpath paste it here right now we have two variables and two elements right so next click calendar is this specific arrow and the month year variable is refer referring to this specific region right so in our while expression we can just say while the month year dot text does not equal to december 2022 please click on this next arrow element right again so let's say this is our default just an example right we are here right now we take a look let me clear this this field so right click inspect we are oh no sorry i need to inspect on this one so you can see here we have this text march 2020 and in our while loop we say while this text does not equal to december 2022 this is our delivery date please click on this specific element right this is our expression in this simple while loop right so after we have done this this specific year and the specific month will be selected the only thing what right now is missing is to select this date right let's do it inspect and then we can work with this td class and day value or we can make it a little bit easier we can just say okay we have this text element here and this is stored in the td tag that means we can just yeah get access to this let's say td and then text equals to 31 right let's just type this down in brackets don't forget it and right now we have access to this 31 right and after we have selected this month the year we need to select the specific date so let's paste it here let's say calendar underscore underscore date equals to driver dot find element by xpath and here we can just paste it again let's say or let's comment this day 31 and here we can put a comment year 2022 and [Music] month is december right great right now we are good to go cool so i would say in the next step when we clicked on this specific date we need to click on this add to cart button right we don't need to change the quantity i mean i have shown you in the iphone example how we can work with this text box i think if i show you just how we can yeah work with this calendar element we are good to go okay so we have already defined this variable for this specific button right you can remember when we reached this page we wanted to scroll down to this element that's why we have this variable already let's see it was this add to button underscore two right and then this one we need to click on right let's do it it's add to button underscore 2 dot click and after we have chosen the month let's wait for 3 seconds because i want to show you clearly how it works and i think two seconds is enough to and then after we have selected a specific date we can also wait for two seconds and then we want to click on this button right and if everything works fine we have selected three items and we will see two iphones here one hp laptop here and this specific delivery date right so let me close this window before we run this code we need to click on the specific date right otherwise we will run into an error and it won't work calendar date dot click so let's see if we have all our statements so we have this text element here we want to click on this next arrow button wait for two seconds and click on this specific date 31 and then we want to put this to our cart let's try right click and let's run it i need to grab more water [Music] but i'll do it afterwards so browser is opening windows maximizing i mean this steps you are already familiar with right it's the same again and yeah let's click this for the next picture last picture screenshot here quantity change here add to cart go to the laptop overview with the action chains class click on the specific laptop move down and right now you can go or the calendar is right now moving towards december 2022 with this simple while loop right we reached this specific month and year and the date was selected and you can see here after everything was selected so 2022 december 31 this add to cart button was clicked and you can see here we have three items we have two iphones s yeah as planned and one hp laptop and we have also the correct delivery date great right now let's begin our checkout process but first of all let's take a look on our requirements so we have selected one laptop and we have selected one or the correct delivery date great so right now let's create a guest account and complete the checkout process let's go back to our site and we need to click on this card button and then to the checkout button to reach the checkout page so inspect right now let's see how we can locate this element here we can use this id right just copy the id back to pycharm and let's say go to cart equals to driver dot find element by id and here we can paste our id expression first of all again let's work with the time.sleep function and in my python selenium beginners tutorial i will cover different approaches how we can use the waiting elements in selenium but right now let's proceed with this simple step all right so let me put one another comment here add to button and here it's just the check out right go to cart click on this element right and then let's again wait for one second until we proceed in the next step we want to reach this checkout element and here we can reach it by yeah using this p class text right and then we can just traverse down to this second a tag let's do it so it's p class equals to this specific text let's inspect it again it's this one text right let's paste it here and then we need to traverse to the second a tag so it's a and two right and you can see here this is chosen and we are good to go cool copy back to pycharm and then let's say check out equals to driver dot find element by xpath so you can see here in this project i work mostly with xpath but of course you can also use different locators let's click on that after we have clicked on this checkout element let's wait for one second until we proceed and then go to cart click on this checkout button and you will be redirected to this checkout page here let's choose the guest checkout actually it's a radio button and you can also see it here right type is radio and yeah the structure will be the same let's use this input tag and then we can work with value and guest let's do this input value equals to guest this is right now our xpath expression for the specific ready button copy it back to pycharm let's say guest equals to driver dot find element by xpath paste it here and click on the specific ready button so that we can select that one afterwards let's click on this continue button right click inspect and here let's say we want to use this id copy that id back to pycharm and let's name it as continue underscore 1 equals to driver dot find element by id you will see we need right now a couple of yeah continue buttons right now during the whole checkout process which will appear after each step that means let's just write down for this one continue one and then proceed by counting continue two three and four and so on for the next um continue buttons but for that one first of all let's click on this and wait for one second until we proceed so let's click this button now we have reached the second step of this checkout process and you can see here we don't see everything what belongs to the second step that means we need to scroll a little bit down [Music] until we see every element which belongs to this second step right let's do this let's automate this step and again we can use the scrolling web element as we did in the previous step that means selenium will bring to the top of the website a specific element and let's choose that one right let's say that selenium needs to put this to the top that means we will have this kind of view and then we can work with all this text boxes and with this drop downs let's do it right click inspect and right now we can work with this text again so let's refer to this a tag and work with this text i copied a few seconds ago and something i messed up i forgot the equal sign okay so this is our xpath expression copy it go back to pycharm and let's say we want to have one variable for this let's just call it as step two i think it makes sense and again if you have any kind of questions please let me know and i will try to help you out in the next step we want so first of all scrolling again and here click continue here we can say want to click on guest account good cool next step we want to scroll to this specific element right let's do this step two dot and right now just write down scroll and you need to click on this web element okay afterwards let's wait for let's say for two seconds time dot sleep and here we want to wait for two seconds until this view appears and right now we have a perfect access to all this necessary text boxes and drop downs so if you see a right star here that means this fields are mandatory to fill out and let's do this you will see the process is almost always the same but yeah let's just start so first of all let's provide our first name again right click inspect this one and here you can work with the id that means copy this id go back to the to the pycharm put a comment first name and then again first name variable and right now let's find it by id paste it here when you find this specific text box we want to click on this and then we want to write something down that means we need to one second we need to click on this in the first place and afterwards we need to say first name dot send keys that means please write something down let's say test name since yeah we can just use dummy dummy data right and let's put a time dot sleep function here so it will wait for one second after it's clicked on this text box and then the next step the same for last name and you will see here this is the same the only difference is we need to replace this id that means and if you also take a look on the next text boxes we always have a different id and the procedure is always the same so first of all find this text box click on this and write something down right that means we can save a little bit of time and just copy this few lines of code and paste it here and afterwards don't forget to replace these specific steps first of all let's go to the last name last name and here we need to do our modifications last name driver find element by id and we need to find the specific id for this last name box it's that one copy it paste it just here right then take a look you need to click on this last name not on the first name anymore and right now we are good to go again replace it last name dot send keys let's say test last name and here test um first name okay all let's work with underscores it's yeah usual in python and let's do it great next we have i think this email okay right so comment section email then we need to replace this variable we need to find the correct id let's do it by inspecting this box it's that one let's copy it go back to our pycharm and paste it here right and afterwards we want to click on this email fields wait for one second and then we need to provide our our dummy email address let's say test at test.com next we need to locate this phone box the phone text box again using this id and replace it properly here you need to replace it let's say we have this phone we use already phones when we selected this iphone right let's just say telephone and this will be unique for that one telephone equals to that specific id then we want to click on this you see the procedure is the same this will save us some time it's great sorry telephone send keys and here put just a random number right and afterwards we need to find this address field same this is the id but first of all let me copy this few lines of code so it's one time two times i don't know how many we need it's one two three so three times right after telephone so then it's one two and one more time copy and paste it here don't forget to comment otherwise um maybe you will have difficulties so it's telephone right next one is address and again replace the necessary steps address equals to let's search the id it's that one copy it back to our code paste our id here and then click on this specific text box wait for one second and then put down a random address let's say it's test street and then put down one random number let's say 187 good next one we have the city so first of all let me check if i messed up something so it's email telephone address okay we are good to go now we need to provide a city again inspect on this city text box we have this id copy and paste it here don't forget to comment this one especially in this steps it's quite important to not mess anything up city equals to driver dot find element by id click on this check box sorry text box city.click and then city dot send city dot send keys let's say we choose the city i live in it's frankfurt right now next step postcode we need this id right right click and let's provide this id here comment postcode declare a unique variable passcode equals to this specific id we want to click on this and then provide a random passcode let's say one one two two three three next let's wait for one second until we proceed and actually let's do this for every text box let's after each time we type something in let's wait for one second until we proceed so because i want to show you how the script is working and if we don't provide this time to sleep maybe it will be too fast and i can't explain to you properly what is happening right now but i think with this step we are good to go and you will see clearly what happens when we will run this script right now we can use this drop downs you can see here click on this and you can select yeah countries same here the regions and let's do this so first of all let's locate this drop down right click inspect we have again an id right right click copy it and here let's provide first of all country as a comment and then let's declare a country variable country equals to driver dot find element by id paste it here now we need to use the select class in order to be able to work with the drop downs let me show you how we can do this first of all let's provide a variable drop down equals to select this is the select class we want to work with again location walls here and click on import and here you need to choose the last option click on this to cross check just move up and you can see here the class was selected and or the select class was imported maybe you can say it in this way and yeah let's proceed again scroll down select and what do you want to select this specific drop down right that means let's type in country and right now when you work with drop downs you have three different approaches how you can select um yeah a value let's say let's see one second go to this country click on this one and right now you need to select one specific country how you can do this this is what i just mentioned you have three different approaches you can select let me show you select by visible text select by index or select by value so since we have right now two different drop downs i want to show you two different approaches how we can handle this drop downs right first of all let's select the country and here i have yeah chosen germany because at the moment i am living in germany let's select this one and to be honest before i have recorded this video i have um let's see what is here germany and this is at index 87 so i just counted from here down to germany and this is at index 87 and here we can yeah selected by text right so then you have seen two different approaches let's do it and say select by by index and here we need to provide down 87 good next one we want to get access to this drop down the logic is the same but first of all let's say time dot sleep and wait for a few seconds um let's paste this two times here and here right so we have a little bit of time to see what happens when the script is running um next one let's copy it paste it here because the logic is the same we just need to modify this again so here we have chosen the country and this one we want to choose the region right so let's do our modifications and write down region equals to driver dot find element by id and this one let's inspect on this region drop down copy the proper id and paste it here afterwards we want to select the region right and let's say because we had here this drop down let's say drop down one uh sorry drop down one here it's the same drop down one and here we have drop down number two okay we provided this region here we wait for one second and then we want to go with the different approach and say select by visible text here let's see what we have first of all we need to to click on germany this one and then you will have this specific regions and let's say we want to choose to hessen because yeah frankfurt is located in hessen and we can go and say select by visible text and right now just write down hassen and that's it and if i did not mess anything up we will have this one selected and we are good to go next one we want to click on this continue button to reach to step number three again locate this button and let's work with input type button so you have again here different approaching steps how you can locate it but for this one i want to choose so once again to continue input type button good input type equals to button this is our element copy it um go back to our code and let's say continue so we had continue on right now we want to um to continue with continue to variable driver dot find element by xpath and paste it here continue to dot click right and then we want to click on this button okay we see this error messages here because we didn't provide any value here yet let's do it and just write something down i mean when we run our code you will see everything we put in this send keys function but for this for this moment we have not run our code yet that means let's just write something down to be able to proceed right here to postcode okay country and region were already selected right now we can click on this continue button and we will reach this step next we just want to click on this continue button let's inspect on this one and say yeah input id button shipping method let's do it you can either write an xpath expression or just working with id let's say you want to continue and using the id maybe it's a little bit faster right so afterwards let's wait for one second after we've clicked the last continue button then let's declare next variable continue 3 equals to driver dot find element by id paste the new id here and let's click on the third button again wait for one second until we can proceed click on this one right now we need to select this checkbox that means we need to agree on this terms and conditions and then we can click on this continue button first of all let's inspect on this checkbox and let's say we want to build our xpath writing down input type checkbox input type checkbox just yeah write it down here check box and well it's not unique right now let's inspect it again and let's go for name agree let's see if this is unique name [Music] wait let me replace this one name agree okay right now this is unique let's copy this and go back to our code let's say accept terms and con editions right and as a variable let's just make something simple t underscore ear t underscore e for terms and conditions driver dot find element by x path and paste here our x path right and now we can click on this specific checkbox and afterwards let's wait for one second cool we have wait yeah everything went fine let's click on this one and then we want to click on this continue button let's inspect on this one again okay so right now let's work with let's say input type equals to button so we can write different kind of xpath expressions um again it disappeared let's go back input type equals to button and right now let's use this one copy it go back here let's declare a variable continue number four driver dot find element by xpath paste it here and don't forget to comment this one [Music] click continue so let's yeah copy this one and comment also the last continue buttons let's say click continue 2 click continue 3 and click continue 4 so where is continue number one let's search for it and i can't find it right now it's here click continue one and right now we are we should be good to go let's click on this continue 4 button dot click and then we reach almost the last step you can see here we have a summary we have this confirmation order we've selected two iphones one laptop we have our delivery date and we have this total yeah purchase sum and let's say we want to print this total amount in our console first of all let me remove the last expression and go for this one right click inspect and here you can see that we need to work with tables let's move up a little bit and we can let's try to start here and then we want to traverse down to this specific td tag where this price text is located okay let's start here right so it's a table class equals to this value expression let me copy it so it will save some time table at class equals to the value expression i just copied so we have just found this table right can double check by clicking enter this one then we want to go down to t foot slash t foot and then we need to reach the third tr tag so slash tr number three and now we need to get to this second td oh sorry to this second td slash td and two right and right now we have this element where our final price is located we copy it go back to our code first of all let's put a comment here and write down final price equals to driver dot find element by xpath paste this expression here and let's say we want to print this in our console what we can do is let's write down print and then we can say final price sorry final price dot text right and afterwards the final price will be printed here in our console let's also write down in string format the final price of both [Music] products is and then we can concatenate plus final price dot text and here we will get printed our final price right let's do this and first of all let's complete the last i think one or two steps and then let's run our code again and let's see if everything worked fine so now we need to get to this button and click on this let's inspect it and let's go for id button confirm okay or wait let's no okay we can go for this one button confirm right so copy that back to the back to the ide and let's give this a variable name confirmation button equals to driver dot find element by id paste it here and we want to click on this confirmation button dot click and we should be good to go let's wait for two seconds until we proceed and don't forget to comment this one click on the confirmation button good after we have done this you can see here we reach this success text and yeah let's say that we also want to print this in our our console it's the same procedure let's locate this text here what we can do let's go for div class and this value here first of all let me copy this and build the xpath out of it so it's diff at class equals to the value i have just copied and then we can go to the h1 tag and yeah so let's work with this one copy it back to our code um let's choose one variable and say yeah success text right i think this is a good one success text variable is the same success text equals to driver dot find element by xpath and paste your xpath expression here and in the next step it's the same what you did on this final price element can just write down print success text dot text that means we will have access to this specific text and if everything works fine it will be printed also in the console then we can wait for one second let's remove this um empty line here wait for one second and then we want to close our driver right driver dot close and if everything works fine let's just see let's just see if we have written everything correctly if not let's debug it together okay let's cross our fingers hopefully the last time right click and let's let's run this code all right let's see browser is opening again [Music] it's loading let's see come on all right great it's reached the iphone step come on click on this picture okay i think it's a little bit slower right now okay but it's clicked on this picture next one next one last picture take one screenshot click on the x element go to the laptops and notebooks let's see okay it was successfully right now work with the calendar again december 2022 scrolling scrolling scrolling great 31 awesome add to cart cool go to the checkout page guest account right now fill everything out first name last name email come on telephone address great city cool postcode good country let's see great germany region hessen click on continue come on click on continue okay it did not click on continue cool or not so cool i think let's take a short look on our code what went wrong here let's take a look on the logs so error message is element not interactable line 189 so let's scroll up a little bit so this is one line 189 and this is our second continue button right and it breaks in this line so that means let's cross check again this expat expression copy it go back to our um site right click on this button right this is the step where our script um yeah break right click it's oh sorry i think i need to move my picture to the other side um right click inspect and now let's take a look here right so let's paste this xpath expression and okay this was my mistake this button is not unique so let's change this xpath to a unique button for example let's go by using this xpath expression input input tag id attribute and this button guest value let's build it so input then for this we need to put down id and then we go with this button guest value right good right now it's unique let's try to copy it and go back to our code right now and here we need to change this xpath expression and paste it here let's see if the other buttons are unique right now or not for example the next one so continue this one let's take a look and yeah let's just make the same procedure here input id and then let's replace it just to be let's say very sure or 100 percent sure that this element is unique right and then let's replace it i don't know what's happened right now with my computer but we will get it okay so driver find element by id let's change it to by x path and paste here our new xpath expression right and the same we can do with the last button so after clicking here on continue this is our last continue button again let's locate it and structure is the same input at id and here we just need to modify the value remove the last one paste in the new one and right now this continue button is also unique okay let's take a look if this mistake happened due to the fact that our buttons were not unique and let's try to run this code again so button two uh let's see button two button three button four everything was changed okay let's just try out and see what happens right right click and run let's see let's see let's see it's very interesting right now browser is opening maximizing same procedure so let's take a look next picture next one then we reached the last one taking one screenshot change the quantity add to cart go to laptops and notebooks let's see good right now we work with the calendar december 31st 2022 let's see let's see good cool check out guest checkout and right now this is the critical point so let me move my picture to the different place and let's see what happens here right address city postcode country region and right now it should yes great everything works fine so far let's see let's see if we reach the last step and we did not reach the last set let's see what went wrong this time let's open our pyjam and take a look on the error message unable to locate element let's scroll up a little bit it happened in line 207 let's take a look here we have the final price and according to the logs it wasn't able to locate this element right so let's make here a cross check again if this is unique right click somewhere and let's paste here our xpath expression and you can see here that this is definitely unique we have one out of one and this price is selected that means this actually should be the right xpath expression let's take a look on the code again the previous step was to click on this continue button number four and okay in this step we didn't provide the time.c function let's try to yeah provide this in this step time dot sleep and let's say it should wait for three seconds until the next step will be executed and yeah so let's take a look if this is the root cause to prevent maybe another kind of error messages let's take a look that we have also provided timelessly functions in the next lines so here we have um said that the script should wait for two seconds right then let's go down and in the almost in the last step let's also write down time dot sleep wait for two seconds just to make sure if we will run again into an error it's it's root cause it's not the fact that we didn't provide the time.sleep function right okay so right now we have this timeless sleep here and we have this at this place this was actually the critical step right because it wasn't able to locate the final price element right now again right click run this and let's see what happens right now okay browser is opening so let me put my picture into different place right now okay let's see let's see it's clicking next one next page okay it reached the last iphone picture quantity select two iphones go to the laptops overview select the right model go to the calendar and choose the correct delivery date december 2022 the day is 31. okay we are good to go add this to our cart go to the checkout page okay our details again so this was the step we have already successfully fixed city postcode country a region click on continue continue continue and right now come on this is our next step great so the last button was clicked awesome and you can see here we have printed out the final price and the success message all right i would say we are done with our project let me take a last look on our requirements so we have created a guest account and completed the whole checkout process check and print the total price and the confirmation message in the console check all right guys we are right now yeah reached the last step of our project this project went successfully and if you have any kind of questions let me know and i will definitely try to help you out thank you very much for your time for your patience and i hope to see you on the next time bye bye

Channel: LX_schlee

Views: 2,640

Rating: 5 out of 5

Keywords:

Id: e9Bf769mXu0

Length: 104min 31sec (6271 seconds)

Published: Tue Sep 29 2020