cting with cookies and storage objects in selenium okay so we've got our jupiter notebook set up and we've got our selenium session open so we've done all of our imports from the settings file we've got the chrome driver path and the website we're going to take a look at is python.org so you can import the python url we've got the service we've got the driver set up and we've got the python url so we're good to go so what we're taking a look at in this lecture is are the cookies and the selenium session storage you can access this type of information in your chrome dev tools dock or window rather if you go to the application tab and under application you've got this storage section so you can look at cookies under cookies so we've got one which is for this website so python.org and these are the cookies that we have so far so we can access these cookies from selenium or from python rather using driver.get cookies and that will give us the list of all of the cookies available to us and if you look at it the names are all the same so we've got this looks like a double underscore utmb double underscore utmz and it's got all this information associated with it I'm not entirely sure what all of this means but the point is you can you can get cookies if you need to interact with cookies in some way in selenium now if you want to set a new cookie what you can do is driver.add cookie so we'll do driver.add cookie and then let's make this a dictionary and so the name of the cookie will be my new cookie and then the value will be let's just make this hey look at my cookie and so for this you do need a dictionary with name and value you can't just make it two things my new cookie and hey look at my cookie that won't work in selenium but we can pass this now using add cookie and so if I refresh this in here in my chrome dev tools tab we've got the new cookie down here so you can see we've got the name let's move this over a little bit the name is my new cookie and the value is hey look at my cookie so that's how we're able to pass cookies to and from selenium using this type of functionality now the next thing that we can do is we can look at local storage and session storage so that's up here you can look at these types of things so you go to the website right now there's nothing there for local storage nor is there anything there for session storage again selenium doesn't provide us with an api to do this type of work or to interact with local and session storage but it's good to know that you can execute javascript if you need to again the use case for this will probably be pretty specific so I doubt you need to remember it to use it in lots of scenarios but it's a good thing to be aware of and so the way we do this the way you set an item is you have to use window dot local storage we'll do local storage first and then do session storage so window dot local storage dot set item and then you have the key and the value so we'll say key one execute that script and now if we want to get the item we can do driver dot execute script and the script we're going to execute is return window dot local storage dot get item so instead of setting we're getting and we're going to search based on that key so it's key one now if I go to the local storage here key one and value one are now set in the local storage for this this selenium session and so if I run this get item here you get value one which is just the value of that variable or that key in our local storage things work the same way for session storage you just change the type of storage so driver dot execute script to window dot session storage instead of local storage that's set item key two and value two and then we'll run that now if we go look at the session storage here for the website we've got the key and the value that we just passed with the execute script method from our jupiter notebook then if we wanted to get that item out of storage we could execute a script again and this time it's basically the same thing so you're going to return window dot session storage dot get item and the key of interest here is key two so that's all well and good we've got our javascript in there execute it and value two which is what we sent to it in our session storage so in this lecture we took a look at interacting with cookies in selenium so it's pretty straight forward because we have apis for that so you can get and add cookies if you want to work with local or session storage however there's no good api for that so you'll have to use execute script the execute script method in order to run these kind of snippets of javascript to interact with those storages okay thanks for joining and we'll see you in the next lecture hello everyone and welcome to our lecture on resizing windows in selenium changing the window size of your web driver session could be useful while you're using selenium if you want to test website accessibility mobile actions and things of that sort some of the useful methods in selenium for getting information about window size and position are as follows you could use driver.getWindowSize to get the size of your window in terms of the height and the width you can also use driver.getWindowPosition to get the position in terms of the x and y position on the screen and then if you use driver.getWindowRect or getWindowRectangle it'll return both the size and the position of your current window if you'd like to change or set the window size and position you can use the following methods set window size just like getWindowSize is a way of setting the window size in terms of height and width of the window you can set the position on the screen in terms of x and y with the setWindowPosition and then setWindowRectangle or setWindowRect takes both of these so you can set both the size and the position if you'd like simpler actions so just minimizing or maximizing your window and maximizing your window is a good thing to do usually at the start of your sessions you can use driver.minimizeWindow to minimize your window and driver.maximizeWindow to maximize it let's head over to jupiter to see these methods in action alright we've got our jupiter notebook open the website we're taking a look at not that it's super important because we're just resizing windows in this lecture but the website we're taking a look at is books of scrape start your service, start your driver get the books of scrape URL and then we can dive into all those methods that we talked about in terms of getting and setting the window size so you can use Selenium to resize your browser window to an arbitrary dimension or position and you can also get information on the current window size so we can get window size for example so it says width of 697 pixels height 775 pixels if we wanted to get the position we could use driver.getWindow position so that tells us the x and the y position of our browser on the screen or our window on the screen and then you can get both of these if you get rectangle which is rectangle and so then you get the height and the width and the x and the y all at once so that's one way of accessing all that information now if you want to minimize your window you can use driver.minimize window run that and go to the background there and then you can use driver.maximize maximize window 2 and now that will open it up and now you can see it takes up the entire screen so let's go back over here to our jupyter notebook now if you want to set window size or position you have all of those so set window so position rectangle size they work the same as the getter methods so let's just do set window rectangle and we can just set in some arbitrary things here so position of 20 y position of 50 let's make the height equal to 600 and then the width is equal to 600 as well run that okay so now you can see we've got the window resize there and that's the way that you can interact with the window sizes in this lecture we talked about all the way you can minimize, maximize your windows or get and set their sizes thanks for joining and we'll see you in the next lecture hello everyone and welcome to our section on filling in forms using selenium and the first thing we're going to talk about is buttons and how you work with them buttons are all over the place on the web in all different types of forms you can find buttons in the web pages you're working on using all of selenium's locator strategies that we've seen in previous sections so for example if you wanted to find all the buttons on a page you could search by tag name and then just use the button tag you can interact with buttons in a few different ways the first is you can click them obviously since that's a pretty normal way of interacting with buttons on a web page and selenium gives us the dot click method for any button element we're working with you can also do what's called context clicking or right clicking on a button or you can do a click and then a hold and a release for things like click and hold or the context click which is a right click instead of having those methods on the web element of interest or in this case the button element of interest what we need to do is we need to use something called action chains a class called action chains in selenium what action chains do is they chain together specific user actions or inputs such as moving a mouse between a specific location clicking mouse buttons for example so that context click where you're right clicking or clicking and holding it pressing keys together so if you want to do something like control P for printing drops and a lot of other different actions we'll see some more of these as we go through this section on filling in forms from the code like we saw in one of the previous slides if you want to work with buttons in selenium like clicking on buttons you do all your imports set up your driver then you can find your element of interest whatever way is easiest and you can click it just using the dot click method in terms of using more complex actions on the button first you have to instantiate an action chains object and the parameter going to pass is your web driver and you should store this as a variable as well to perform actions you can use methods associated with that action chain object so for a context click you can write action dot context click specify the element you want to context click or right click on and then run it dot perform in order to perform the action for click and hold you do basically the same thing except use the click and hold method and then specify the element of interest now that we've talked about how this works let's head over to jupiter and get some practice alright so we're in our jupiter notebook and we've got the imports that we usually have so web driver service and buy but the other thing we're going to want to use because we have to use action chains this time is we need to import that class so from selenium this comes from selenium dot where does it come from webdriver dot common dot action chains and then we can import that action chains action chains class so let's run that so we've got that available the settings from the settings file we've got the chrome driver path books to scrape url we've set up our service and all that so we've got the window open so let's just get that books to scrape url in there go to that page okay so now it's popped open so we're going to be interacting with buttons so the first thing we want to do is select it like anything in any given web page right so let's take a look at this button at the basket so here you've got the button tag it's a submit type the data loading all that stuff but let's just select all the buttons in the page the other thing you might want to be aware of is that with certain types of html markup or classes so with bootstrap for example which is a way of styling your web page you can also get buttons that aren't buttons so for example you could have an anchor tag an a tag with a button class in bootstrap that makes it look like a button even though it's not technically a button html element but that said you can still interact with it the same way so let's get all the buttons on this page so we can use driver.find elements and then we're going to search by tag name because we just want the buttons so by tag name and then we're looking for a button the button tag so that gives us all of the buttons on the page so if we look at that there's 20 buttons 20 buttons on this page which checks out because I think that's the number of books on the page too so we can select the first button if we want so button one is going to be let's make it button zero button zero so we got that we look at button one.text should be add to basket so that's kind of what we're looking at here and if we want to interact with it we can just click on it so buttons have a click method so we can just say click run that and I think this action just reloads the page so you can see all it does is reload the page now what happens however if you try to click on it again is that the page is reloaded so you're going to get an error here this button is not on there stale element reference is the error that you get so we're going to have to find that button again if we want to work with it delete that cell go into here so we can just do what we did again driver dot find elements by tag name button so that's buttons and then button one is going to be buttons zero first item on the list so now we've got that button one and it's just that it's just that add to basket text from the first first button underneath that first book okay so for more complicated actions or click actions with buttons or whatever there is on the page we'll have to use the actions action chains object so we'll instantiate it so actions is going to be action chains then we have to pass the driver so we can just do that and then let's do a context click on that button here so it's in the page so we should be able to see it on element it's the parameter of interest there on element it's going to be that button one so that's just this add to basket here so context click on that which is a right click and then dot perform so you see that now we've got this right click menu up here that we can interact with somehow if we really want to let's click out of that you can also do a click and hold so let's do actions dot click and hold on element again it's the parameter of interest to us and we just want to do that on button one and then we'll end with perform so it performs the action so you can see that here it's kind of chains it's got that black outline and then if we wanted to I think we could do actions dot release dot perform and that should unclick the button right so now the page is reloaded again and like I mentioned you can do some of these actions with various parts of the page so if we go up here the the books to scrape is let's click on that it's an a tag right we can still click on it we can still act like it's a button and click on it so the link element let's just do driver dot find element find element a by tag name so we're just going to get that first link and then we can click on that so link element dot text is going to be books to scrape so again it's the website title up here books to scrape and we can click on that because we still have access to that click method and now it's just reloaded the page it's just gone to the home page again ok so in this lecture we learned how to interact with buttons on a page and we got our first exposure to that action chains class again so the action chains will become useful in the future as well as we deal with things like drag and drop sliders and sending keys to a web page thanks for joining and we'll see you in the next lecture hello everyone and welcome to our lecture talking with input elements or text boxes in selenium input elements or text boxes are very very common on forms throughout the web in terms of the actions you'll usually want to be performing on these fields you'll probably want to fill it out with some text or clear it to clear it you can select your input element or text box and then use the dot clear method on it that will remove any text inside the text box in order to fill it out you can use input element dot send keys and then pass the string of interest for how you want to fill out the field let's say you've got a first name field that you want to fill out you can get that element and then you send keys and pass the string with the first name of interest that you will be using to fill out that form field in terms of the code that's in service and drivers setup you can get the input element of interest using any of the methods we've used before so id, tag name, name any of that stuff then you can clear it if there's any placeholder text or if you want to make sure that it's clear when you send keys so you can use dot clear and then you can send the text using dot send keys with the string of interest so here we've got filling forms is cool and that's the text that we're sending to the input element now that we've talked about how this works in Selenium let's go over to jupiter to get some practice alright so we've got our jupiter session open our jupiter notebook open we don't need that action chains import that we had in the last lecture so that's been removed from our imports we just have web driver service and buy then from the settings file we're going to be taking a look at the python web page so like you can see over here we're on python.org we've got our service and our driver setup and then we've gotten that url so now the input element that we're going to take a look at the obvious one on the page is this search box here so where we can enter some text and then go search for it on the website so if I inspect that with my chrome dev tools inspectors what you get is this input tag here it's got an id of id search field and a name of q so we can search for that either by id or name let's use let's use the name for now just because we haven't used that in a while so what we want is we want to input element call this input element and this is equal to driver dot find element and it's going to be by the name and the name is q so now we should have that input element that's a search box if we dot let's check the tag name so the tag name is an input so that's good and then let's check the attribute so input element dot get attribute and the attribute let's take a look at the placeholder it will be search so all that works like with locating elements like we've seen before in terms of the text in this we can check that with the text attribute and there's nothing in there so the search we see like we saw up here that's just a placeholder in the html it's not actual text in the text box so if we wanted to uh maybe send it some text to do a search I'm going to make this a constant so that we can reuse it so let's do search text python news it's going to be what we're searching for so we've got the input element we can use that and then what we want to do to fill it out is we can send keys and we're going to send it that string that search text string now you can see it's been filled out up here right we've got python news if I scroll back over to the right you can see the beginning of it we've got the end of it that's the string that we're going to be searching for now if I wanted to clear it I could just do input element dot clear and now it goes away now we're back to just that search placeholder there alright so now if we wanted to run a search what we can do is we need to uh we can let's get that search button so search button and that's the this one here so let's click on that let's go so it's a button it's got a name of submit id of submit so we can use either one of those to find the button so let's do driver dot find element let's do id id is submit so that's pretty easy the text on that let's just make sure is go so that matches up so now we can send the um send that search text search text that's right dot send keys so input element dot send keys and then I can send it search text let's do that so that's there and then we can do search uh let's use search button and we can click that button like we saw in the previous lecture it's just a button we can interact with it that way so now it's gone the search has been performed uh scroll down a little bit so now you have all these results here on the python website alright so in this lecture we took a look at how you interact with text boxes so it's pretty there's a couple of easy steps so basically you want to find the element you want to clear it if there's stuff in it using the clear method and then you can send keys to send a string of interest and if you want to click that go button you can find the button and click it like we saw in the previous lecture as well okay thanks everybody for joining and we'll see you in the next lecture hello everyone and welcome to our lecture on interacting with radio buttons and checkboxes in selenium radio buttons and checkboxes are used to specify options in html forms both radio buttons and checkboxes work fairly similarly to what we've already seen with buttons in selenium you can use a click method on them for example to click the element and select it and you can use the is selected method to check to see if the element is selected in the form the one difference to be aware of with checkboxes and radio buttons is that if you click and then click again on a checkbox that will select and then deselect it with the radio button as soon as you click it it will be selected and it can only be unselected if you click on another radio button element to use this in python you can do all your imports and service and driver setup finally you can get the checkbox element that you're looking for or that you want to interact with you can check to see if it's selected if you want to make sure that it is or isn't before you interact with it the dot is selected method and then you can select it via a click so the dot click method as I mentioned radio buttons work much the same way with the one exception that you can't unselect it by clicking it let's head over to jupiter now to get some practice with this here we are in our jupiter notebook we've got our imports the website we're going to take a look at in this lecture is the goldbugs website so this is just a fake band website basically you can see it's open here so the goldbugs.com or you can import it from our settings file set up the service, set up the driver get the url and then we're good to go so in this lecture we're interacting with checkboxes so if you scroll down here you can see there's a form here so let's click on this to see if we can find the form or find the generic object here so we've got the div and I think this div holds the form so we've got the div with the form wrapper form inner wrapper and then we've got this form here that contains all the stuff that we need so let's get that let's get that form or the other thing we can take a look at actually is the is here so we've got the field set so let's click on this where is this okay we've got legend and actually here we go we've got the field set so it's actually a field set tag that we're interested in and it's got an id so let's control c to copy that and just copy it out of the dev tools and then we can select that so that we can look at the checkboxes there so field set let's call that field set let's pull this up a little bit field set is driver.find element by id and then copy and paste that id so it's fairly long you don't want to type it out so okay shift enter now we've got that field set tag name let's just check this out so field set okay so that's kind of what we expect so now if we want to pull the checkbox elements out of that we can just look inside the field set we don't have to look for the specific thing in the entire html this is that chaining of locators right so we've got these option divs here with a label and then you've got an input so the input is over here where you can click on it with the element explorer here so it's input type checkbox so that's probably one way that we could look for it so let's do field set dot we're looking for here find elements so we want all of the checkboxes on this so we can do let's do by xpath we're looking for the input maybe make this on a new line we're looking for the input and an input with a certain type so we want the type to be checkbox and you can check this in the in the depth tools console tab if you like but it should work so we're not going to check it this time we can just it works so it's a good xpath so we got the checkboxes so checkbox one just make that checkboxes checkboxes let's see one and so checkbox one let's get attribute of the value so the first one here if we click on that is no response required so let's get attribute value no response required and so if you look at zero that text it's sort of like this hidden checkbox on the page so we don't have to worry about that that's why we're not using zero we're using one instead okay so get attribute no response required and now we can check is it selected so it's not selected on the page let's just verify that is selected false so it's not selected so if we want to select it we can click it checkbox one click now it's selected you see we got the checkmark that shows up on the page there we can check if it's selected again so click or not click is selected and now it's true right we switch the state on that checkbox if we do it again checkbox one click and then check it's gone back to not being selected so false now for the next part we can take a look at the radio buttons so we'll just find elements on the page if I click on this let's click on that input so it's an input of type radio so that's what we're going to look for and we're going to use an X path again for this so radio buttons on the page is equal to driver dot find elements we're going to go by X path again and then the string we want is pretty similar to what we did above so slash slash input so relative inputs with a type field that's equal to radio and that's what we're going to search for here so run that radio length of radio buttons seven and the reason for that we've got these two here and then we've got these five radio buttons down here to work with so we're just going to probably deal with the type of event radio buttons so let's do radio button one is going to be equal to radio buttons zero so the first one which should be private show so if we check that out radio button one dot get attribute and then we want to look at the value so the value like we can see here is private show or the text would be private show too I think radio button one get attribute value private show that's what we expect we can check to see if it's selected and this is false so we can click it just like we did with the with the check box right but now it's selected so radio button one is selected is true unlike with the check box like I mentioned before if you click it again it's not going to do anything it's still selected right so that's just one thing to keep in mind while you're working with radio buttons versus working with check boxes here okay so in this lecture we learned how to click and unclick check boxes and how to click radio buttons as well and then we talked about how to unclick radio buttons essentially to unclick them you have to click another one to unselect it and we went through the methods that you can use in Selenium to use those actions thanks for joining and we'll see you in the next lecture hello everyone and welcome to our lecture on working with drop down menus drop down menus are really select elements or select tags in the html source file of the web page that you're interacting with the options in these drop down menus or select elements are contained within the option tags you can interact with these elements using all the basic methods that we've learned so far for forms so you can select them using whatever by method that you that you choose or whichever one is easiest you can click on that if you'd like or and this is really the much easier and the better way of interacting with them you can use what's called a select object select objects in Selenium are basically objects that provide very nice wrappers and very nice methods for dealing with these select or drop down menu elements on a web page for example you have the options attribute of the select object so you can see what the options are for the things that you can select in that drop down menu you can then select by index so 0, 1, 2, 3 so on and so forth you can select by visible text so that's going to be the text that's visible or you can select by value which is the HTML attribute associated with each option these types of methods and attributes also work with multi-select menus where you can select more than one thing at once additionally with the multi-select menus we get some deselect methods as well because you can both select and unselect multiple items in the code the way you work with these things is you have to have an import from a module that we haven't used before so from selenium.webdriver.support.ui you can import the select class then to instantiate that select object you find the select element on the page or that drop down element and then you pass it to the select object to instantiate it to look at the options on that object you can write select.options and that will list all the options you have for the drop down menu in terms of selecting items on that list in order to fill out the drop down menu in a form you can use the dot select by index method and then just pass a number of the index that you want to select in order to select by value and so that's the value of the HTML attribute not what's shown on the screen use dot select by value and then pass that value string for multi selects as I mentioned you also have deselect methods that are equivalent to their select method or the opposite counterpart rather of their select method so you can have that select object and then deselect by index works just the same way except you're deselecting and then you've also got deselect all so that's if you want to clear out a multi select and start again let's head over to jupiter now to see how these work on the web okay so we're in our jupiter notebook and we've got all of our normal imports the one other thing that we're going to want to import for this lecture because we're going to be dealing with drop down menus or select items from a selenium perspective at least is we want to import from selenium web driver dot support dot UI we want to import that select class so let's run that and then we're good to go we're on the goldbugs website so we've already done our driver dot get and now we can take a look at this so if you look at this website we can scroll down to the booking form and down here we've got a how did you hear about us drop down menu so let's click on that for a second and take a look at this select item so there's a few things we can do here to interact with it so if we want to just select it the kind of our classic methods we can select the let's do a select call it select element new driver dot find element I think the best way of doing this is probably by ID so let's do ID and then we can just copy that from the ID field in our dev tools copy that paste it over here it's a little bit long but that's okay and then we can run this and then we've got our select element there so now let's print the let's do select element dot text maybe see what's inside so then we've got kind of this messed up text that's all the that's all the options for it or maybe if we do print then we can get the get the nice way of formatting it let's do that so here we've got all the options for that select element the other way that you could get the options is that you can maybe do option elements let's do select element because they'll be inside there find elements we'll search by tag name and so if you look inside here we've got these option tags right scroll up a little bit so option, option, option with some values so let's just do by tag name we want the option tag lower case okay now let's loop through this real quick just to look at some stuff so for the element in the that list of option elements we can print an F string and what we want let's do element dot text and then do element dot get attribute and we'll do the value there so the value and the option like you can see in the html here that's like google facebook that's in the html that's not in the user facing text on the page let's get this to stop scrolling there so let's run that so here they're one and the same but they might be different on a different web page so google is a text google is the value attribute so that's one way of getting it and in terms of clicking on it again we'll take a look at the select but we're doing it the hard way now so let's do option elements let's do hit the bracket there let's hit the right key so let's just do the last one negative one which i think is other and we just click that elements so let's try that so now you can see we've got that clicked and it's clicked to other if we run this again but let's do it with one then it should switch to you can see it switched to facebook which is that zero one it's that second option one in python because it's zero based indexing of course so we've gone through this that's one way of dealing with it but it's really not the easiest way you want to make your life easy in selenium and so what you can do instead is really instantiate a select object to deal with these drop down menus we've already got the select element picked out on the page so we'll just do the select object in this way so now if we want to look at the options we can just do select options and then we've just got essentially a list of these web driver elements so instead of doing that let's do let's do a print and we'll do a list comprehension so that's a little bit easier to read let's do option dot text for option scroll this down a little bit for you guys for option in select dot options so select dot options is that list of web driver elements that we see down here and so we're just going to get the text off of each one of those options and now you can see we've got Google, Facebook, Instagram so this is a lot easier than trying to figure out where these options are on the page and if we want to select we can just select by index as well so select by index we can do index let's see 0, 1, 2, 3 so if we do 3 that'll give us other so you can see now this is switched to other right another way of doing this is select dot select by visible text in this case visible text and value are the same so it didn't really matter but sometimes value and visible text are different so you might want to use one or the other but here we'll do visible text and let's do Google so now we switched the option to Google so as you can probably see by this this is a lot easier way of dealing with drop down menus in Selenium than having to go through and find element by element basically now if we were to do a multi-select you'd have these methods like deselect all or deselect by visible text so on and so forth this isn't a multi-select so we can't do that but just so you're aware in case you see multi-select forms on or multi-select fields on forms you're dealing with in Selenium ok thanks everybody for joining this lecture where we saw how to deal with drop down menus using the select class in Selenium and we'll see you in the next lecture hello everyone and welcome to our lecture on interacting with calendar pickers in Selenium calendar pickers have really become a very common form element in a lot of different websites these days so you might think of an airline booking site for example where you have to pick the date of your flight to a place and the date of your return flight you could think of a hotel booking site or a hotel reservation site where you have to put in the start date and the end date of your stay all of those might be involved with calendar pickers calendar pickers are generally composed of three components of interest to us in terms of how we use Selenium the first is an input field where the date of the list will end up the second part of it is usually some javascript or jQuery that will make the calendar pop up as soon as that input field is activated and then the calendar itself is usually some sort of table element to hold the rows and columns of the dates of any given month these components and our list of these components really provide us the outline of how we're going to interact with calendar pickers in Selenium the first things first so we have to find that calendar input element on a page then we can activate the javascript or the jQuery that will make the calendar pop up so we can do that usually with a click in order to activate that input element and then activate the javascript once the calendar picker has been activated and we've got that table element showing on the page you can select the date of interest column or using some sort of data coming from the html tags in that table sometimes you can also use send keys on the input element to simply fill out the date rather than picking it from a calendar picker the one thing to note about this method is that you may still end up activating the calendar and so then you'll still have to click into the text box or click the date in order to get the calendar to go away now that we've talked about the steps of how we interact with a calendar picker in Selenium let's head over to our Jupyter Notebook to get some practice okay so we've got our Jupyter Notebook open we've done our imports the website we're going to be using is the jQuery UI website so you can import that URL the jQuery UI URL and then once you have your driver set up the URL you can actually get is the date picker so we're going to be interacting with that jQuery functionality here to get some practice with using date pickers in Selenium the one thing to note on this though if you click on this so let's click on this date picker here this is inside a head and a body inside an html inside of an iframe with a class of demo frame so as we should remember from our iframe lesson we first have to switch into that iframe before we can start interacting with the date picker if we try to just do it the normal way we won't be able to do that because that's how iframes work so we can do iframe element is driver.find element by css selector and then it's going to be iframe.demoframe so iframe tag with a demo frame class then we can do driver.switchTo we're going to switch to a frame and the frame we're switching to is that iframe element so now we're inside of the iframe and we can try to find that input element that date picker so input element is going to be driver.find find element let's take a click on this again let's just see it's got an id of date picker so we'll just use that that's the easiest way to do it so find element by id date picker that's the id so now we've got that input element if we want to activate it we can click on it so now you can see we've got this calendar that's popped up right that we can use as a calendar picker so selecting an element in here is basically the same as selecting any element that we might want so if I click on that so you've got this a and you've got a td which is a table cell basically and it's got some information so data month data year and all sorts of other stuff in here a data date date 18 so that's today's date so you've got the month you've got the year and then you've got the data date now this is slightly more complicated so in order to select things here you can do a couple different things but I actually think the best way is probably to do an x-path and I'm just going to select today's date because obviously you can watch this video at basically any point in time here just to select a relative date rather than picking something specific so that everybody has to change things so the first thing I'm going to do is import let's do a datetime import so from datetime import datetime just so that we can get the now the now method so let's make a couple of objects we want month day so now is datetime.now the year is going to be now.year month is going to be now.month and then day is going to be now.day so run that if you look at year 2022 you look at month month is 11 and then day is 18 so that's everything that we really want there now we need to do the x-path for this so you can test it out in the chrome dev tools if you want but we're just going to construct it so the first thing we need is we're trying to get to that we're trying to get this a here that's got a data date of 18 but first we have to go to this td with the data month 10 and the data year 2022 so how do we construct this we can do an f-string so we'll use those variables that we just made it's relative so we want to go to the td first td where let's see we've got data month and data year those are the two variables that we want to match or the two attributes that we want to match so here if you look at the month the month was 11 but in here the data month is 10 so again I think that's a one indexing thing so you want month minus one to match data month and then data year is just going to be year so that's the two parts of that and then the next part we want once we have that td we have to go inside it to the a tag and we want the a tag where data date is equal to our day so this is a long f-string but it should make sense to you once you compare it to here so we've got year month day it's going to be 10, 22 and 18 so we're going to bring this down into this a tag that we want to click on or that box that we want to click on in the date picker now to find that element, let's find that let's call it date element driver.findElement we're going to search we've got the x path there let's just search by the date path so now we've got it selected should be selected let's see could be that I've got a bad string somewhere invalid selector okay I'm missing a missing a quote here I think yeah I'm missing a quote and okay I've got the brackets messed up so let's see delete that close the bracket so that's one and then we've got this other bracket over here so let's try that okay there we go make sure to check your brackets and your quotes on these things so if I look at the date element.text that should be 18 that's the date we want to select so that's all good and then we can just click it let's click this element and then it gets filled in so you see now we've got this date in the input field there 11, 18, 22 that's today's date selected since it is an input field you can still clear it so let's do input element which is that text box there clear so that'll clear out the date but you can see it also activates the the date picker so now if I've got this input element and I want to try to fill out the date using using keys so we got month you saw the format it was month, day year so we can send that you can see we filled it out now and it's valid but we still have this date picker up so if you fill out your date this way if you just send the keys you're going to have to click on it or something to deactivate that javascript with the date picker click on it or if I maybe click outside of it again you know then that'll be what this activates the the calendar table in there and we'll clear that off your screen so like you can see there's a couple pros and cons to using both methods if you're clicking on the input field and then selecting from the calendar table that takes a little while to get your search string that you're looking for to click on the right date but if you send the keys to the input then you kind of have to click around to get the calendar to go away because sending keys to the input will usually activate the calendar okay so in this lecture we went through how you interact with a calendar picker with selenium thanks for joining and we'll see you in the next lecture hello everyone and welcome to the lecture on uploading and downloading files in selenium generally speaking file uploads only involve sending text or keys to an input element like we've seen with any text box or input field before however one thing to note is that the path sent to the input element must be a real path on your computer and it must satisfy any upload restrictions so for example if the form only accepts .png files you should only send a .png file if you don't adhere to these rules so if you don't send a real path or if you send a file that's not permitted by the input element you'll trigger an error in your python code in terms of file downloads they're pretty straightforward all you have to do is click on the element or the download button of interest and that will activate the download and it will end up in your download directory one thing to make note of however is that you can change the download directory with chrome options the way this looks like in code is that you can instantiate an options object using webdriver.chrome options and there are other ones for firefox or the other browsers then what you can do at least in chrome is you can do options.add experimental options the first parameter is going to be prefs for preferences and then you can pass a dictionary with these preferences for us right now we're only interested in changing the default directory for our download so we'll pass a dictionary that says download.default directory and then the value for that key is going to be the path to your default directory if you want to change it then we can instantiate our webdriver which is normal just using webdriver.chrome passing the service but then we'll pass another parameter which is the options parameter so we can just pass that options object that we defined above if you don't do this before starting your webdriver the options you add won't get added to your webdriver so you have to make sure to do it before you start your webdriver not afterwards let's head over to our jupiter notebook okay so we've got our jupiter notebook open with all of our imports the websites we're going to be looking at for this practice are you can import them from the settings file it's a python download url so python.org slash downloads which is open to the left there in our chrome browser and then the imager upload url as well we'll take a look at that later when we talk about file uploads start the service start the webdriver and then get that download url and then we can get going so to download a file there's typically a button or something similar a link or something that you can click on in order to download the file of interest maybe it's in a form maybe it's not in a form so here it's not really in a form but we can still get some practice with it let me just zoom in on the html here we've got this button to download python 3.11 and if you look at the class there's a p here with a class of download buttons and then an a tag with a class of button but there's not really a good id or a name to take on that's very specific there might be other things in the page with a button class for example so what we can do is we can copy this xpath and search for this button element by so I'll just store this as a string constant so button xpath and then paste the xpath that we copied from our chrome dev tools so you can see it's pretty long which is why we don't want to type it out by hand we can just copy and paste it from the chrome dev tools that's a lot easier it's a much better way of doing it then we can find this download element so download element we'll just do driver.findElement we're searching by xpath here and then our xpath is that string that we just wrote so the button xpath okay great so now we've got that going to so to download something all we have to do is click on it so it might be a button it might be a link with a button style but we can just click on it and that will start the download so you can see here on chrome there's a little bit of a warning so we can keep it there we're not worried about it it's just a python.exe file and then the download starts and once it's done you'll have your whatever file it is that you downloaded the one other thing that we do want to talk about though for you to be aware of is that chrome options that we were talking about in the lecture so by default and most browsers your default download folder is just your downloads folder right so on windows for me it's users b-a-b-i-g downloads and the file will download into that folder if I want to change that however I can change that using chrome options so let's cancel this download for now cancel that I can do that with chrome options so the download directory for me write this out this is windows unfortunately on windows you have some issues with the backslash so I'm going to do that without the raw string just so that you see the error so I'm going to make this c users b-a-b-i-g and then desktop so download to the desktop instead of instead of the downloads folder if I do this I'll get an error because of these backslashes so you have to double slash out of it or pass it as a raw string on windows you usually don't have that problem on linux or max because there are forward slashes for the file paths and for this one just as a notice if you are on windows make sure to end it with the double slashes because if you don't changing this option it won't work I ran into that issue when I was testing this out so our download directory is just that string that we've changed here and then if I want to change it in our in our web driver what I can do is I can instantiate this chrome options object so I'm going to say webdriver chrome options that's going to be our options variable and then one of the things you can do is you can add an experimental option and this is a way of changing preferences or changing certain setup items or options in chrome so what I'm going to do here let's get this just delete this make this a little bit easier to look at here okay there we go the experimental option we're going to add is to prefs so that's preferences and then what I can do is have this dictionary the option that I'm going to change is download default directory so that's that default download directory and what I want it to be is that string that I just wrote so it's going to be my desktop my desktop folder in order for this change to take effect you do have to quit your driver and start it up again you have to pass it as an option first thing so we're going to start this up again our driver is webdriver.chrome service is the service object that we have and then the other variable that we're going to pass now is the options variable or the options parameter right the options variable that we set up that's that chrome options object with the default directory changed so now if I start that up the window will pop up then we can do the driver.get let's do the python download url just like before so that'll take us let's go back click on something that'll take us here and then we can find that the download element is driver.findElement searching by xpath and then we've got that button xpath string and then you can click on that downloadElement.click and the download will start again and now if I show this in the folder the file path is my desktop right so that's the changed file path and the other way you can check that in chrome is by going to your settings and then clicking on downloads and that'll tell you what the default download location is so that's essentially what we're doing with that option is we're running that change there okay alright so we talked about talked about downloading files using selenium now let's talk about uploading files so in order for an upload let's first get our upload url so that's imager and so we've got this here and what we're gonna do is we need to choose the photo or the video so let's stop this cancel that download exit out of that to maybe get some more space maximize the window here and then inspect so inspect this element dock it to the bottom zoom in okay great now let's click on this choose photo or video so if I click on that it's label for input we've got an input here so it's got an idea of file input that's good we can use that you can do multiple ones we're just essentially all we have to do is send keys to that element so let's get the upload we'll call it upload element this is equal to driver.find element and then we're gonna look by id because it has that id and id is file input right so I can just copy and paste that into the as a string into that driver.find element so now I've got the upload element let's just check that it's got tag name so it's an input alright so now we can just send keys really in order to fill that out to upload a file but what you'll find is that you get an error if you send a path that doesn't exist so upload element let's send keys and I'm gonna go find let's see I've got this intraslide png file properties so it's users be a big desktop and then intraslide.png so I'm gonna the first thing I'm gonna do let's do this remember for double backslash for windows let's do fake image.png if I send an image that doesn't exist I'll get an error so if I do that it's gonna say blah blah blah invalid argument file not found right fake image that doesn't exist so just to remember if you are uploading a file you have to make it a a real file that really exists otherwise you'll get an error now let's say intraslide this exists so we send that and the file gets uploaded so now we're uploading that image file to imager here we go everything's good and we've got everything that we need okay so in this lecture I realized it was a long one but we talked about how to download items and how to upload items and it's really just interacting with elements almost the same way we've seen before the one the couple of differences are we talked about how to change your download directory using chrome options and then we talked about the error to be aware of so that's passing a string to a file that doesn't exist so if you are uploading uploading something you need to make sure that file actually exists thanks everybody for joining and we'll see you in the next lecture hello everyone and welcome to our lecture on dragging and dropping items in selenium since what drag and drops really are are essentially mouse actions and they really involve a couple different actions so you'll click, you'll hold you'll move and then you'll release we'll need to go back to our action chains object again we can use a pure drag and drop with a source and target element in order to drag and drop items in selenium what we can also do however is we can use a drag and drop with an offset so we'll start at a source element on the web page and then drag and drop that source element with some sort of x and y offset what this looks like in code is that we have to instantiate another action chains object so we can just make it actions is equal to action chains and then pass the driver as the main parameter if we're doing a drag and drop with a source and a target element we can end those two elements on the page using whatever method is best for finding those elements and then we can pass those elements as parameters in our action chain so we can do actions drag and drop then we can pass a source element and a target element and then we can end it with dot perform in order to perform that action drag and drop with an offset works much the same way except you don't have a target element you just have the source element and then an x and y offset let's head over to our jupyter notebook now to see how this works in practice alright so we're in our jupyter notebook we've got our imports from selenium the one thing to note is that the other import that you're going to need for this lecture is from seleniumwebdriver.com and action chains you need to remember to import the action chains class because we need that for the drag and drop action the URL that we're going to use is the jQuery URL so you can import that or the jQuery UI URL rather you can set it up and then we're going to be going to the jQueryUI.com slash dropable so that we can work on the drag and drop so this is the drag and drop you can play around with it in the page if you want to find this right now so it's a div in there so it is an object with an id but if you look at it as with many things on the jQuery UI website when you look at it it's inside this iframe with a class of demo frame so first we have to go inside of that iframe in order to interact with the drag and drop object so the iframe element let's find that we can use driver.findElement we're looking by cssSelector and it's going to be an iframe tag with a class of demo frame so find that we've got the iframe and then we can use driver.switchTo .frame to switch into that iframe element so now we're inside the iframe if we want to do a drag and drop we have to instantiate actionChains object so action is equal to actionChains and our driver parameter is just going to be our web driver so do that now for the drag and drops you can do this two ways like we talked about you can do it with a source and a target which is what we're going to do first or you can do it with an offset so source and target we need to find the the source and the target so the source is going to be this drag element and the target is going to be the drop element so if I click on that we want this div with an id of dragable and then the target is this div with an id of dropable so the source element is equal to driver.findElement we're looking by id because we have those nice id's to use so the id is dragable that's the source element the target element is driver.findElement again we're searching by id and this id is dropable so like you see down here in the elements tab of chrome tools or chrome dev tools div with an id of dropable is where we want to drag and drop that dragable element so now we can set up the action to drag and drop things so we can say action we're going to drag and drop first we've got a source element so source is this source element and then the target element so the target is the target element and then we can perform that action within the action change you always want to end with perform so that the action gets performed so let's run that and that's what you see here so now we've dragged that square from over here where it was over on top of this this drop target so it says drop right the state of it changed because we dragged the square onto the target now if we want to do it with an offset so an x and y offset what we can do is we can do the same thing action.drag and drop but we're going to drag and drop by offset we still need that source so the source is going to be the source element but then we have the offset so x offset is the parameter but you can also just pass it positionally if you'd like and then the y offset let's just make that zero and then as always you need to end with perform so that the action gets performed so if I run that you'll see that square has moved a little bit not too much but a little bit and that's how you do the drag and drops so in this lecture we went through how you drag and drop elements using selenium and the way you have to do that is with action chains and then within action chains there's these two methods so drag and drop where you have source element and target element or the drag and drop by offset where you have a source element and then some x and y offset source element around thanks for joining and we'll see you in the next lecture hello everyone and welcome to our lecture on interacting with sliders sliders are an interesting form item or form element because they can really be interacted with in two ways in selenium the first is you can just click on them as an element if you do that what will happen is that you'll move the part of the slider that's the indicator for where you are on the slider that will just go to the center of the element really the other way is you can use action chains again within action chains you can use the following methods to interact with that slider you can move to an element with an offset or you can drag and drop by an offset in terms of what this looks like in the code if you're just clicking on a slider element you can first find the element to select it so here we're just doing slider element is find element and then find it whatever way works best and then you can just click on it with dot click again this will click on the middle of that slider element the other way is you can use action chains so we instantiate that action chains object with the driver as our parameter and then we can move to an element with an offset so we specify that slider element then we can specify the x and the y offset click on that offset from the slider element and then finally dot perform to perform that entire chain of actions this essentially moves you to the slider element of interest and then moves you some direction in the x and y direction in order to click on that slider additionally you can use a drag and drop so you can do action dot drag and drop by offset specify the slider element and then specify the x and y where you want to drag and drop that indicator on the slider finally you end with dot perform so that the action gets performed via the action chains object let's head over to our Jupyter Notebook now to get some practice with this functionality alright so we're inside of our Jupyter Notebook like we did in the last lecture you need to remember all the imports and then also remember the import dot webdriver dot common dot action chains import the action chains class because we'll need that to interact with the slider here from our settings file the URL we're going to use is a jQuery UI URL again set up your service and your driver and then the URL that you're going to get is the jQuery ui URL plus slider so we're going to an example jQuery slider on this page as always with the jQuery website we're going to interact with the slider so if we click on it it's got this slider class it's got a div with an idea of slider so that's what we're interested in but it's still inside this demo frame, iframe so we need to move inside there first so again the iframe element let's scroll this up a little bit iframe element is driver dot find element we're looking by the CSS selector and it's an iframe tag with a class of demo frame select that and then we can switch into it so driver dot switch to frame and then we'll just use that iframe element great now we're inside that iframe so the slider element that we want we can click on it again just to take a look so we're going to do driver dot find element and it's got an id so let's click on this again so that we remind ourselves what the id is so div with an id of slider it's right there so that's what we want so searching by id and then the id is slider alright so we've got that slider element selected one option like we talked about in the lecture is to just click on a slider and that will drag the handle so if I do slider element dot click it basically just clicks in the middle there so you can see the box was over here and now it's in the middle that's basically what happens when you click on a slider object it'll just move it to the center of the element the other option that you have is to move with an x and y offset or to drag and drop it basically so to do that we need to instantiate the action chains object so we'll say action chain action chains rather the driver parameter is our driver set that up actions action chains no s so there we go so action is the action chains object we can move you can do this move to element with offset is the one that we want so the slider element is what we're going to start with so that's basically where your mouse is starting and then you have an x and a y offset so we'll go 40 in the x direction 0 in the y direction and then we'll click so we'll click that and then we can perform so that's going to combine all of these actions in the action chain so first we move to the element with offset so it's like we move to this slider and then we move to the right since it's a positive x value and then we click so that's like clicking the slider that's kind of like doing this so now I'm clicking around with the slider that's basically what we're doing with this set of action chains so move to element with offset click and then perform that so if we click on that now you'll see it's moved that box has been moved over to the right because we gave it a positive a positive x value so we can try that again with a negative x value just so that you get an idea of how things move so move to element with offset so slider element we're going to go there then let's go negative I don't know, negative 100 so we'll go to the left here and then zero on the y click and dot perform so again it's kind of moving down to this slider element moving over to the left and then clicking that's the action that we want to do here so now you can see it's moved over to the left so that's a second option for how to interact with sliders the next one is that you can do a drag and drop so we can do action drag and drop again by offset it's probably the best way to do this so we start the slider element let's go over to the right again let's make it, I don't know, 150 zero on the y because we don't want to go up or down really and then just perform that so if I run that then I'll move it over to the right again so you see it was over here now it's moved over to the right if you have some sort of slider where you need this value you're going to have to interact with that web page to figure out how exactly to get that exact value that you might need for changing a slider on whatever web page you're interacting with but in general these are the three ways that you can do a drag and drop with a slider or the three ways that you can interact with a slider so you can click it, that'll just send it to the middle you can do a move to element with offset and then just remember the positive and negative X values or you can do the drag and drop with offset which works much the same way okay thanks everybody for joining and we'll see you in the next lecture hello everyone and welcome to our lecture on keyboard actions in Selenium as mentioned before in previous lectures the action chains class enables us to automate certain basic user interactions in the browser this can include running key combinations that may be used as shortcuts on certain websites one example of this that you might be able to think of is the keyboard shortcuts that we can use in Gmail for example or Outlook or any other type of email website or email application if we want to use this type of key combination functionality in Selenium with special keys like escape or control or alt we'll have to import a new class which is the keys class we need to use action chains to send keys to the browser as opposed to a specific element and to mimic those key combos so control P to print we can't just use send keys and then try to send the keys control and P to some sort of element on the page that won't work we have to use the action chains object we can use the methods key down key up and release action chains class in order to mimic those key combinations what this looks like in code so first we have to import that new keys class that we talked about so from Selenium webdriver.com and keys you can import the keys class you instantiate the action chains object like always passing the driver as that main parameter and if you wanted to emulate control D for example there's usually bookmarking in most browsers you could do action dot key down send keys dot control so that's the way you send that special control key then you can also do dot send keys and pass the D key as a string then you can do release and then you can run perform so that's the way of emulating that control D action that you might use to import that new keys class that we talked about in our bookmarker page let's head over to our jupiter notebook now to see how this works in practice alright here we are in our jupiter notebook we've got a few new imports are a few more imports than usual for this section so we've got our web driver our service make sure to import action chains that we talked about in the lecture is from selenium dot web driver dot common dot keys we need to import that keys class because that's where we'll get the special keys on our keyboard to use them so things like control tab escape all that good stuff the URL we're going to be using for this lecture is the selenium URL so you can import that from the settings file set up the service in the driver and then get that selenium URL and if I go over to my chrome browser here one of the things you might see on this selenium page is that we've got this search box and the search box actually has an image to show us the hot keys for it which is control K so if I want to do a search here I can just open that up so I just typed in control K on my own not from selenium so if I want to interact with that we can do that with selenium so first things first let's find this element so I'll click on it click on this search bar here and really what am I looking for I think I'm looking for the span actually so we can just do the span send it to this span here so we'll find that element so the element search element let's do search element and actually I think in this case because you can send it to the page we just need an element on the page so search element is driver.findElement we're going to look by CSSSelector and what we're going to do here what do we want we want a span with a class let's say doc search button container doc search button container ok so we found that now if you want to you can't just do you can't just send keys to the element using our send keys method that we've talked about before so we want to do control K so we can do keys.control let's try plus K you might think to do that that's just going to get an error though you can't interact with the element in that way so it'll throw this error so that's not the way that we want to do this kind of hot keys stuff in selenium in order to do it we have to use an action chain so we'll say action is action chains driver is equal to driver instantiate that so one of the ways of testing that search shortcut is we can do action key down we want to hold down the control key so keys.control then we want to send keys we want K so again remember control plus K is what's the is the search shortcut for the selenium website then we want to release both of those keys on our keyboard and we want the action to be performed in selenium so we have to end it with dot perform so this combines a lot of different things but it's pretty straightforward and it's what you do when you interact with the browser you hold down your control key you hit the K key and then you let go of all the keys so that's what's going on we can run that and now you can see in our browser we've opened up the the search box here so we've successfully used a keyboard shortcut in selenium just by using those action chains now here we've got an input element so again we can interact with it if we'd want to it's id is doc search input so let's use that so what am I looking for input element is equal to driver driver dot find element we're going to search by id and it's doc search input so now we can search with this and the reason we'll search for this or search with this is that this also has some hot keys that we can practice so we can send up and down we can send escape to close but right now there's nothing in there so I want to get some search results in there so we've got the input element and now for this one we can send keys directly to it because it's just a normal box right? so let's look for some information on web driver weird let's try that again I don't know why it sent that element first so now we send keys web driver so that's in the search box and then we could scroll through the results if we wanted to action change so we've got our action object let's send some keys and again we're going to use the keys class because these are special ones let's do arrow down remember to close it with a perform so that the action gets performed and now we can go down the page right? if we're looking through these results so keys dot maybe arrow down again perform goes down again and you can go up if you want to keys dot arrow dot perform and you'll go up in the search and then if I wanted to get out of the search you could send the escape key so we'll send keys via the action chains the keys we're sending is keys dot escape and then perform that and then it'll take us back out of the page now we're back into this normal Selenium web page okay so the other option instead of using release just to be aware of it's usually easier to just use release down here when you have the key down just do release so that you release all the keys the other action that you can use just so that you're aware of it is key up so you can release whatever key it has down we can also do key down keys dot control here we'll do that search shortcut again then we're going to send keys with a K and then we can do key up if you want to instead of release and just specify that keys dot control key again so if you perform that you'll get the search box up again as well here in the browser so those are two options key up key down or key sorry key down key up or key down release both of those will work alright okay so in this lecture we talked about how you can use action chains and send keys and action chains to work with hot keys or shortcuts on web pages if you need to test that out thanks for joining and we'll see you in the next lecture hello everyone and welcome to our overview of our second guided project for this Selenium course in which we'll be building a form filler the goal of our second project will be to fill out and submit the booking request form at www.thegoldbugs.com this is our test website that's basically a fake banned website the booking form has text fields it has check boxes and it has drop downs so it has a whole bunch of stuff that we've practiced in the previous section with Selenium the booking form looks like this so like you can see pretty standard and we'll go into more depth into it when we open it up in the guided code along section in this project what we're going to use is we're going to use what we've learned about identifying elements in the HTML source code or the DOM to select the form fields of interest to us we're also going to use what we've learned about filling in forms to interact with the various elements so clicking on things, selecting items from a drop down menu checking check boxes or radio buttons so on and so forth finally we'll submit the form because that's of course the purpose usually of filling out any given form is that you want to submit it and then move on to some other action everything we do in this project applies to other forms that you might see in real life or on other websites so booking forms for hotels or airline tickets, surveys searches checkout pages where you're filling in credit card information or something like that so all of that can be applied to other websites now that we've talked about what this guided project is let's dive into the code alright so you should have your jupiter notebook open to start off with and then obviously the first thing we want to start with in this project is we need to import everything that we need so from selenium let's import the web driver it's our basic object that we need or module that we need then from selenium.webdriver .chrome.service we need our service class so import service from selenium.webdriver .common.by we import by so that we can find elements on the page and then finally we're going to be interacting with a drop down element so we want that select class as well so from selenium.webdriver.support .ui we'll import select okay so that's everything we need from selenium from our settings file let's import the chrome driver path as always and then we're going to be doing the form on the goldbugs website so we need the goldbugs url as well so run that cell and then we've got all of our imports there as always we need to set up the service so the service is service executable path is that chrome driver path driver is equal to webdriver.chrome service is equal to service run that let's have that driver start up there and then let's we can do driver.maximize window although actually let's tab this over to the side so that's easier to work with and have the code side by side and then we can get the website that we're going to take a look at so goldbugs url so let's do that it opens it up over here and let's open up our chrome dev tools as well while we're waiting for it to load okay so here we go and then let's zoom in so that this code is easier to see okay great so we've got our chrome window open we've got the goldbugs website up and as mentioned we're going to fill out this booking form so if you scroll down you'll see the booking form down here do you want to book the goldbugs for your own show private or public and we've got all of these fields so we've got some text fields message, checkboxes radio buttons drop down drop down menu here and then some radio buttons and then a submit button as well so let's first narrow our search if we let's click on this so click on this let's find this div here and I think this is in a form let me just take a look at this real quick inside the div there should be a form element that's what we want to look for div form wrapper form inter wrapper and then we've got this form, okay great so we've got that here so that's the first element that we're going to drill down into so that we're not messing with other things on the page and there's only one form on the page so we don't have to worry about selecting other things form element is going to be driver.findElement we're going to search by tag name and the tag is form so that'll just get the first form element on the page like I said there's only one so that's the one that we want to be working with and it's just so that we don't have to worry about maybe some other messing around with other things on the page so now we've got this first name element so let's click on that this is input class field element and it's got a name of fname so that's how we're going to search for it so fname element is equal to driver.findElement by we're going to search by name it's called fname so again that's the attribute the name attribute that it has so let's fill this out so we're going to send keys to that so fnameElement.sendKeys just make this john ok so now as you can see we've filled out the name and the first name let's keep going fill out the last name so that's let's see this has a name of lname last name another good way to find that so we'll search by name again driver.findElement by name lname and then let's send some keys to fill out the last name so sendKeys doh again you see last name has been filled out and we'll just keep going one by one through all of these form elements click on email input ID it's kind of got a lengthy ID but it's got a good name so name email that's good we'll do it by name again emailElement driver.findElement by name email and then we'll send keys to fill out the fill out the email field so john.doh at mail.com subject and this one does not seem to have a good name so it doesn't have a name but it does have an ID so we can search for this by ID so subject element driver.findElement by we're going to search by ID not by name and then we can just paste the paste the ID in there so again you can just click on this form dev tools copy it paste it into your jupiter notebook send a subject to the subject element so send keys again our subject is what are we going to call this love your band exclamation point great and now the message if I click on this this is not going to be an input class field element ID text area and we'll just search by tag name change things up because there's only one text area element on this page and inside of our form as well so let's see message element tools and actually I just realized I've been using the driver to find these things but you can search inside the form element um like I mentioned before you can find elements on web elements so we'll search by tag name inside the form and again that's to make sure we're not searching for text areas outside the um outside the form so we've got that text area message element let's send some keys to it so we'll say you are the greatest double quotes because we got a single quote here with your you're the greatest I love your band exclamation point send that keys shows up in the message okay so we've done this first part of the form here filled out all the text boxes and the text area here which is a new element but like you can see it basically works like any other input element or text box element so that's all fine now the next thing we want to do is click on these check boxes so what we're going to do let's say we don't want a response we're just saying that we we really love their band this does not have an ID but it does have a name so let's search for this element this check box element by its name so response element we could say response check box is we're going to search inside the form element then let's find the element by name and the name is what we copied from the chrome dev tools right so it's a check box with the long string of characters after it and then we want to click that so response element dot click alright so now we can say response element dot is is selected is that true that's true right and we can see that here it's checked so our check box is good to go now let's move on to the radio button let's click on this and we want to do we want the band to attend a public show so it's input type radio and it's got this long name as well so we can we can do that so name so we're going to say what is this radio element it's going to be equal to form element dot find element by name we're going to search by name again in case the the name that we pulled from the DOM there so that's good to go shift enter to run that got the radio element and then let's click it so that we activated click run that let's see okay so I took a look at this a little bit closer and I forgot about this both of these radio buttons actually have the same name so if you look at this the private show the name is radio 560 0 f9 so on and so forth and then if you look at the other option it's got the same name as well radio 560 0f9 so in fact name is not a good one to use to select that public show radio button what I think we'll do instead is let's get the copy the X path and we'll use that instead to find this to find this input element or find that radio button element so let's say button X path SQL we can copy that copy that X path and actually I don't like this X path I think the ID on this changes when you click on it on the page so that's that ID isn't actually very very stable so what we'll do instead let's just say at input is equal to right now at at value we want this to be at value is equal to public show that should be good enough so we just want to find the input item where the value is public show that's what we want to click on so then we can say radio element is equal to the form element find element we're going to search by X path and then we can search by that button X path we should be able to find that we got that ran successfully let's click on that public show okay great so we change it up now we're not clicking on private show we're clicking on public show great keep going down the form the next item that we have is this drop down menu so if you remember from our lectures we can use a select element on this so let's get the select element so select element is form element dot find element we're going to search by what are we going to search by I think for this one we can search by yeah we've got an ID so let's search by ID copy and paste that string and then we can make that a select object so select is equal to select capital S select element great so now if we look at the options we've got all the how do you do this again we have to do the text so let's do option dot text for option in select dot options so we do that Google, Facebook Instagram and other are the options that we can select there so let's do select dot select by value so we'll do that by the value here and we'll do other select other there like you can see how did you hear about us other that's filled out we're good to go the last thing we have to do is select the survey radio button will you tell your friends about our band strongly agree input type radio value of two so for this let's see survey radio element is going to be the form element find element we're going to search by let's just after doing the last looking at the what was it last radio button I just want to make sure that inputs actually have different names so BC3 it looks like they have the same names so what we're going to do is do it on value and so strongly disagree what is that value negative two okay right so this is negative two negative one zero one two I want to do strongly strongly agree so we're going to do this by an X path again and the X path is going to be what is this this is an input element and it's got a value so at value is equal to two so two is going to be strongly agree that run successfully so we've got that survey radio element and then we can click it right that's all we have to do with the button okay like you can see strongly agree is selected now all that's left to do is submit the form so you can find this button it's not hard to do right you can use your chrome elements input class button value submit type submit you could search for things that way but Selenium actually gives us a nice method if you have a form element selected so the tag name is form element it's a form right it's the html tag but we can actually just do a submit method on it and then that will submit the form for us that will run the submit action on the form and now you can see you should have seen on the page it said submitting we scroll up do you want to book the gold bugs blah blah blah thank you the form has been submitted right so let's talk about everything that we did here we really did a lot of stuff there were a number of text fields that we had to find and fill out and those basically just sending keys to them and filling out a text area which is a new tag that I don't think we talked about or worked with before but pretty straightforward again just sending keys to it then we kept on going through the checkboxes the radio buttons we used xpaths we used names we used IDs we used the select element as well the select object so that we could just select things by their value, by their index, by their the other one visible text I think is the other one and then we learned about this new submit method on form elements in Selenium that's really useful when you don't want to find a button and you just want to submit a form very easily so that's the end of our guided project I hope you appreciate that we really went through a lot of stuff here and that you've learned a lot about Selenium in the past few sections so congratulations on finishing this project and we'll see you in the next lecture hello everyone and welcome to our section on weights in Selenium we're going to start by talking about implicit weights most modern web pages will have elements on them that can load at different times if you think about running a search for example you may have the search bar with your search text in it but you may be waiting on search results to show up on the page this can cause problems for us in Selenium if we try to find elements that don't yet exist on the page but they might in a second or two Selenium gives us a way to address this problem with what are called weights weights can be either explicit or implicit we'll talk about explicit weights in the next lecture but for now we'll focus on the implicit weights implicit weights are basically a session setting during the life of your web driver object or your Selenium session what an implicit weight does is it tells Selenium to continually check the DOM for some set amount of time for any element that's not found immediately so when you use driver.findElement for example if the element's not there Selenium will basically pull the DOM or the web page for some amount of time until either the element is found or the request times out based on the implicit weight that you set generally speaking it's a lot better to use explicit weights than implicit weights or using the time.sleep which is something of what you might call a beginner method to wait for things to show up on the web page with an explicit weight compared to an implicit weight you'll only be waiting as long as you have to and your program will run faster than if you use time.sleep for example additionally implicit weights in your program don't provide information don't provide the reader any information on why or when we're waiting for objects to show up on the web page let's say for example that we're filling out a form to check out and we're inputting our information and we have to wait until the submit button is clickable once we filled out the information with an implicit weight we're only waiting for that to happen but we don't know that's what we're waiting to happen with an explicit weight we can specify that we're waiting for that button to be clickable you can set the implicit weight in Selenium using the implicitly weight method and then passing a seconds parameter in the code what this looks like is you have all your imports and setup and then when you instantiate your driver after you do that you can just call driver.implicitly weight and specify some number of seconds such as 10 seconds let's head over to our Jupyter Notebooks to see how this works in practice alright so here we are in our Jupyter Notebook we've got all of our imports and by and we're going to be taking a look at the books to scrape URL so you can import that from the settings file set up the service, set up the driver, get the web page and now that your driver is active we can set the implicit weight by just calling driver.implicitly weight and then passing some amount of time so here we'll say 10 seconds and now this setting has been set for the entire setting or for the entire session rather so anytime that we try to find something on the page if it takes a while to load then we can Selenium will wait for that set amount of seconds so 10 seconds here until the item, the element either loads or fails to load and then we'll get an error so let's say let's find an image you know let's just image element since this is the books to scrape website and has these images down here so we'll just say driver.findElement let's look by tag name we'll just get an image tag so that just gives us one element right now if this page we're slow loading or something like that as I mentioned the implicitly weight by setting that Selenium our web session would wait until the item loaded or failed to load and then thrown error so there's not much more to implicit weights than that it's something that if you are going to set it you want to set it at the beginning of your session so that applies to everything you're looking for but as we'll see in the next lecture it's generally better to use explicit weights instead of implicit weights in Selenium just because you can be more specific about what you're waiting for so thanks for joining this lecture and we'll see you in the next one where we talk about explicit weights in Selenium. Hello everyone and welcome to our lecture on explicit weights in Selenium as mentioned in our previous lecture generally speaking explicit weights are much more useful and better to use than implicit weights where you're specifying some general time threshold for waiting for objects to load on a page. Instead explicit weights specify certain conditions that need to be met before proceeding in your code for example if you're trying to fill in a form it might be smart to wait for the form to load on the page before you start filling it in. Setting an explicit weight in Selenium generally involves two different objects a web driver weight object and then an expected condition Selenium provides a number of methods for these expected conditions on the page. You might want to use title is if you're waiting for the page title to be a specific string you could be using visibility of element located waiting for a certain element to be visible on the page or you could be using something like element to be clickable so let's say you're filling out a form and you have to fill in the required fields or click a box with the privacy policy and terms and conditions before you can submit the form in that case you might use an element to be clickable expected condition there are a lot more and we'll see some of them as we go through this section but as always refer to the Selenium documentation for Python if you want a full list of all expected conditions that you can use for explicit weights explicit weights in general are characteristic of better and more maintainable Selenium code because they are much more robust against network conditions for example so slow loading web pages then the typical alternative or what you might call the novice or beginner alternative which is to use time dot sleep before you try to find a certain element you may also want to put your explicit weights inside of try catch and finally blocks in case you want to spit out certain exceptions if something breaks down on your page let's say you can't find an element and you'd like to alert the user that the element couldn't be found because maybe that means the web page has changed and you need to change your code in terms of some new imports that we need to use this functionality we'll have to import the web driver weight class from selenium dot web driver dot support dot ui and then from the support module we can import the expected conditions module as ec that's typically how you see it shortened in python code to explicitly wait for an element there's a few things going on here and we'll compare this to our code without the weight so if you see below here the way we used to do it is to just have driver dot find element to be by id and then pass the string id but if you're waiting for the element to load in your python code this line of code might break to do this with an explicit weight what you can do is say web driver weight pass the driver as your first parameter and then some time and seconds as your second parameter and that'll be how long you wait for the element to load or be clickable or be visible after that you can write dot until and this is where you pass your expected condition so with ec which is the expected condition dot element to be clickable so we're waiting for an element to be clickable and then you pass the tuple of the identifier so maybe you're searching by id or by name here we're searching by id and that'll be the element that the web driver waits for to show up let's head over to our jupiter notebook to see how this works in practice so for this lecture we're going to do things a little bit differently because it's easier to show how explicit weights work and are beneficial to us if we just use it with a plain vanilla python script if you run it in your jupiter notebook the jupiter notebook kind of interferes with the way the explicit weights work you don't see the benefit as much so what we're going to do is we're going to write just a plain python file and then run that and see some of the errors that we get and how we can fix that so in terms of setting things up just have all your main imports so from selenium import web driver import the service import the by class then from our settings file we can import the chrome driver path and we're going to take a look at the selenium docs search url so if you go to that declaration in our settings file and we can actually take a look at this so I have I have this up in chrome right now and it's basically just this page it's the selenium python docs so we can type something into here and search for it so the first thing I'm going to do is let's get this input so the input the name is q so we can type that out in our in our python script we're going to do this a little bit in parallel right now so the input element we can say that's driver.findElement and we're going to look by name and then have this be q so if I go back to selenium in chrome you'll see here in the html the input type is text name is q so that's the one that we're looking for right now and then what we're going to do with this is we're going to search for something so let's search for explicit weight because that's what we're taking a look at in this lecture when I hit search it searches for something right it searches for what we typed in the search box and if you notice it took a while to load on this page right it took a second or two to load and then we've got this list here with references to our explicit weight in the documentation but the search results came up and the rest of the page stayed the same so if you look at this div down here and let's maybe go in one more not up here down here in the docs or in the DOM you've got this div id search results so if I go back there we still have this div the id of search results but there's nothing in it until we hit search and then something loads into that div with the id of search results and it's all this stuff here the explicit weight so this is a good example page of where we might want to use an explicit weight if we're waiting for the search results to come up so what we're going to look for let's just look for this first link and we can let's do a right click and let's copy the xpath and that'll be our xpath string that we use in our script here so what we want to do is let's do input element dot we're going to send keys and what we're going to send is what we just looked for so explicit explicit weight is what we're looking for and then this is a form element so like we learned in our second guided project we can just submit this use the submit method on this now what we're looking for in that result so the result element is we need to look on the page driver dot find element and we're going to search by the xpath that we copied and then let's call this link xpath and that's going to be the link to this 5 weight so when you look for explicit weight on this page you expect the first link to be 5 period weight so the link xpath is we can just copy paste so control v and again all I did was I got that from the chrome dev tool so you right click here copy copy xpath so that's the result element that we're looking for we're looking by xpath and we're going to do link xpath is the string we're looking for and now what we can do let's just print result element dot text so that's what we've got up there so in an ideal world what would happen is we would run the script and then we'd output the text but because of the way that web page loading works this result element what should happen when we run this script is it will fail because it won't find this result element that's 5 weights that we're looking for and won't print the text so let's run this and see what that error looks like so run the python file it'll open things up then it'll submit that searching search results and now let's go down here you might see just for windows users you might see some of this this USB device handle win error failed to read the scripter from node connection I did look into that because I ran into that error after coding on windows when I was coding on linux before and from what I can read online it's not a serious error you can just ignore it but if I scroll up here what I'm going to see is this error message no such element exception no such element unable to locate element method xpath selector and that's that string selector that we passed in there so what this is showing you is that our script as it stands right now is running into an error trying to find that element because it hasn't loaded on the page yet so that's why we need explicit weights so what we're going to do now is we're going to we're going to rewrite this script so that it uses explicit weights so in order to do that we need a few more imports like we talked about in the lecture so from selenium dot web driver dot support we're going to import expected conditions or import that as EC what else do we need from selenium dot dot what web driver dot support dot ui import we're going to import the web driver and what else from and then we're going to import an exception to because we're going to write this in a try try accept block so from selenium dot common dot exceptions let's import the element not visible exception so there's a whole bunch of these we won't go into it if you're interested in knowing all about the selenium exceptions you can read the documentation we're just going to take a look at this one for now so now we've got this input element that we're going to find in the page and then we're going to submit this form and then we've got this result element here but like we saw the result element doesn't work and we try to find it because it's not on the page yet so what we're going to do let's have a try catch block here scroll this up a little bit make it easier to see so the result element in this case what we're going to do we're going to have that web driver wait pass the driver and then the time we're waiting for let's wait for 10 seconds until and then this is where we put in that expected condition so I'm going to say presence of let's do presence of element located so that means it's found it on the page we're looking by xpath and we're passing that link xpath string again so if I go back to my is this the one that's the automated one if I go back here this is the what we're looking for here so 5 waits so let's go back to VS code or whatever editor you're working in so that's how we do our explicit wait and then we'll do what we tried to do before so print that element result element dot text which should be 5 period waits so then what we can do so we got try so accept let's see element not visible exception and then we'll just say print element not visible so we can handle that error if it crops up and then finally after all of this I forgot I wanted to just to keep things open and have the script run a little bit slower I'm going to use time what am I importing from this import time that's what I want again you don't use this in the real world but it's just so that the script maybe runs a little bit slower so that we can see what's going on so let's put time dot sleep 3 seconds there time dot sleep 3 seconds there time dot sleep 3 seconds there before it submits and then I won't use it when we're doing the explicit wait because that's the point the explicit wait is that that's what's waiting for the element to load we don't have to call time dot sleep but then at the end just to keep the page open for a little bit I'll keep it open for 3 seconds and then we'll quit the driver since this is a script not a notebook we'll quit the driver so that we don't end up with it hanging so like here if I go down here because the script failed the driver didn't quit so close out of that so this is the way it works now we've got a nice try accept block here try accept finally so let's run this and see what happens so it opens up the chrome window it's the documentation it's going to wait then it sends the text next it submits and then it closes if you see here we don't have that error the presence of element okay there was one error I forgot you have to pass this as a tuple this is so let's add that add that as a tuple here and run this code so it opens up chrome here we go again sorry about that opens up chrome to this page then it'll send the text right then it'll submit the search results pop up and then it'll print the text so here that's what we've got five weights right that's what we were looking for if you go up here as I mentioned before there's no we don't get that element not located error you still have these two windows errors but again you can ignore that so now our code has worked perfectly well right it's handled that if I exit out of this and go back to our script here by using the explicit weight inside of a try accept path so if there is an exception we'll catch that exception by using the explicit weight we are able to capture that result element even though we're waiting it for it to load on the page so this should help you see why explicit weights are really powerful compared to implicit weights because now we know exactly where we're waiting for something to load it's not on this original page or while we're sending keys or submitting the form we're waiting for the results to show up before we're checking it and so this is a pretty pretty good manner of handling that in Selenium so again in this lecture what we took a look at is how you use explicit weights so for that you have to remember to import your expected conditions import your web driver weight if you want to catch exceptions you can import some exceptions from that module in Selenium and then you can use this pattern of web driver weight driver and time until that expected condition is satisfied and then pass a tuple with those locators so the buy method and the string of interest and that should help you help you avoid running into these timing issues where things are loading on a page thanks everybody for joining this lecture about the explicit weights in Selenium and we'll see you in the next one hello everyone and welcome to our lecture on adjusting network settings hello everyone and welcome to our lecture on adjusting network settings in Selenium sometimes while you're working in Selenium you may want to emulate slower network speeds in order to better understand the user experience of your site or maybe the user experience of some site that you are working with Selenium Chrome tab tools does provide some tooling for this so there's a network throttling setting in the network tab you can use this for example to emulate a slow 3G connection on a website however we can't access this setting in Selenium from our python code so it's not always a good thing to use if you want to emulate different network conditions the way you can automate it in Selenium is with the set network conditions method on your web driver object set network conditions has several parameters that we can fill in the first is a boolean for offline so you can set the network basically to be up or to be down I don't know why exactly you might turn it offline but that's just to be aware of that that is one of the parameters you can set the network latency in milliseconds you can upload and upload throughput in bits per second as well by adding this latency or lowering and changing download and upload throughputs for example you can emulate different types of networks and especially slow networks if you want to know what the experience is like for users on those types of networks to use this type of functionality you can have all your imports and surface and driver setup as usual and then you call this method on your web driver object so you can say driver.setnetwork conditions and then fill out the parameters so here we're keeping the network online so offline is equal to false setting some latency in milliseconds and then setting the download and upload throughputs as well and remember this is in bits per second so you're going to have to do some multiplication just to make things realistic because otherwise you might end up very very slow otherwise wouldn't want to be let's head over to our jupiter network our jupiter notebook now to see how this works alright so here we are in our jupiter notebook we've got our normal imports of web driver and service we don't have buy because we're not going to be looking for anything on the page today and then the two URLs that I imported are just the selenium URL which you can see in our chrome window there and the python URL as well because we'll be switching between these two sites set up the service, set up the driver and then get that selenium URL so to change the network speed you can just do this on the driver so all you have to do is use driver.set network conditions that's the method that you want to use and then there are a number of different options so one of them is offline or parameters rather offline we can set this to true so this is going to set our network offline right latency this is in milliseconds so that's additional latency beyond whatever your normal network conditions are and then you can put download throughput download throughput and upload throughput and this is in bits per second so if I wanted to do let's say 500 megabits per second 100 times 1024 and we can do that for download as well so we run that now we've changed the network conditions so if I try to get a get the python URL go to a different URL I'm going to get this error that says there's no internet right and this will throw an error in here as well so message blah blah blah error internet disconnected so that's because we set offline to true so our network is offline now so in order to fix that we're going to have to turn it back on so we can do driver.set network conditions then let's just do all of this again so offline is equal to false so it's back online latency we can add maybe let's add 5000 milliseconds so 5 seconds of latency download throughput we're going to put this let's cut this in half so 250 times 1024 and then upload throughput we'll just say keep it the same since we're not uploading we're not uploading anything so set that as the network conditions and then let's try driver.get python URL and what you'll see is that it takes a lot longer for this page to load so if you've got a normal stable internet connection it should load pretty fast and we'll try it again with another website when we reset the network conditions but you should see that it took a really long time and that's because of that latency that we changed and the download throughput that we changed you can also get current network conditions if you want to see what they are or what they're set to in Selenium using get network conditions and then that'll output a dictionary with the speeds or with the value of the values of those those parameters so now if we change the conditions again so driver.set network conditions and do offline is still false and latency, remove the latency and then bump up the download and upload throughput so we'll make this this is 500 times 1024 and just do the same thing for the upload throughput too so you know reasonable pretty reasonable web speeds and now if we just get the we go back to that Selenium website you'll see it loads a lot faster than the Python one that we went to and that's because we turned off the latency so okay in this lecture we went through how you can change and change your network conditions if you want to test web pages under slower or faster conditions, change things up and how you can see what your network conditions are so the two methods of interest to us are the get network conditions and then the set network conditions thanks everybody for joining and we'll see you in the next lecture hello everyone and welcome to our lecture on setting up mobile views in Selenium we can automate the emulation of certain mobile devices using our standard Selenium web driver if we want to do this in Chrome all we have to do is add mobile emulation option to our Chrome options object and then specify a type of device so maybe it's an iPhone 12 or an iPhone 14 Samsung Galaxy whatever the options are for your particular version of Chrome or your particular web browser if you're using Firefox or Opera or one of the other ones just a note on this section since it will be a short section the information of mobile testing is not always straightforward in Selenium so you may need to use a mobile specific package to achieve what you're trying to achieve for example I know there is a Python package called Appium that's basically Selenium but specific for mobile testing of apps and things of that nature what we're going to find is that Selenium may not be the best choice for mobile testing but there are some options that you have if you need to do something basic on a website to set up your Selenium session to emulate a mobile device what you can do is import and start your driver and service as usual and then you'll have that Chrome options object that you instantiate and you're going to use the method which is add experimental option and the parameters here are going to be mobile emulation so that's the option that you want to activate and then you'll pass a dictionary the key in the dictionary will be device name and then you can pass a string specifying whatever device you want to emulate on your particular version of Chrome let's head over to our Jupyter notebooks to see how this works in practice alright we're starting off in just a normal Chrome window with our dev tools open for now because I want to show you what we're actually going to be doing with these Chrome options that we're going to use with the mobile emulation basically what we're doing if you look at this Chrome toolbar you've got the normal elements page that we're used to seeing we've got the select an element in the page to inspect it so we can do that click on it and I'll show it in the DOM the other option we have is the device toolbar however this will give us is various ways of and let me exit out of this for now actually let's go back so the dimensions that you have here you'll have a whole bunch of device options that you can emulate so we can do an iPad Air and that'll give you the dimensions of the iPad Air iPhone SE, dimensions of the iPhone SE let's see Samsung Galaxy that's got the dimensions there so your web page might be laid out a little bit differently than it usually is but that's how you get that mobile view just using the Chrome dev tools so that's basically what we're going to be using in Selenium all we're going to do is pop it open using that automated Selenium those automated Selenium options so here we've got our Jupyter Notebook open we've got Selenium WebDriver service imported from our settings we're going to import the Chrome driver path and then we're just going to go to the Selenium URL to see how that looks on various devices so we can import that start the service and then actually the first thing I want to do here so I'll make another cell is you want to pass the dictionary with these options so we're going to do mobile emulation and the device name that I want to use is I think let's see we can use one of these I think iPhone 12 Pro is an option so we'll just do that let's so iPhone 12 Pro is going to be our option there so do that and then we can do the Chrome options so pass that to our Chrome options object we need WebDriver .chrome options instantiate that and then we can say chrome options .add experimental option the option is mobile emulation the parameters for that come from our dictionary so we've got that that all works great so now what you need to add is that options parameter like we've seen before with some of the other chrome options that we've used get rid of that space start it up and it pops open this chrome browser and then if we get the Selenium URL pop this over you'll see what we've got here is basically a mobile view of it so this kind of looks like an iPhone so you're still running Selenium as normal in this browser window but the window size has now made the website smaller so that it's basically the mobile view and specifically the iPhone 12 Pro view of that web page and so then of course you can let's quit this you can do a different mobile emulation option so you can do mobile emulation do this again so device name is going to be you making an iPad mini for example like I mentioned it depends on your version of chrome so you have to check that out to see what options you have so chrome options is equal to webdriver.chromeoptions and then chromeoptions.add experimental option and we're going to do that mobile emulation with the mobile emulation dictionary there and then we can pass that start up the start up the web driver again with those new options and then you'll see a new window with a new window size chromeoptions run that it will open up chrome and then we can do driver.kit seleniumurl and now this is like an iPad mini so you can see it's not the normal selenium website you've got this mobile view drop down menu there and all this other stuff so that's just a basic overview in this lecture of how you start off with mobile emulation if you need to do that the gist of it is you just have to add this experimental option of mobile emulation and then pass the dictionary with a device name as the key and then some sort of value that comes from your version of chrome thanks everybody for joining and we'll see you in the next lecture hello everyone and welcome to our lecture on mobile actions with selenium as mentioned before in the previous lecture selenium is not always the best choice for mobile testing although it is possible to use it for that purpose so as we saw before you can pass certain chrome options to emulate mobile devices for example and certain web page actions something like clicking on an element or clicking on a button really work just like with anything else it doesn't matter that you're in a mobile view of the page other actions however might require that you use the execute script method with javascript and that's why other packages might be preferable depending on what you're using it for if you don't know javascript for example and like I said before this is not a javascript class then you might want to look into other python packages that could better suit your needs rather than trying to learn javascript to code around the limitations of selenium and when I talk about those limitations of selenium it's things like there aren't really actions that you can use for mobile specific actions things like using two fingers to click on something or hold your screen or three fingers on your screen things like that there isn't really that capability in selenium that said we'll head over to our jupiter notebook to get some practice with the execute script and some other methods just so that you can see the boundaries really of what you can do for mobile using selenium alright so we've got our jupiter notebook open and we've started it with some of the options that we used in the previous lecture in terms of imports to start off with you need web driver and service you should also import by we'll need that in this lecture and we're going to take a quick look at the action chains object as well the url we're using is a selenium url so selenium.dev and then we can start the service add the chrome options that we talked about last time so we're emulating an iphone 12 pro here we added that option to using using add experimental option to our web driver and then we started our driver here with those chrome options and we got the selenium url so that's how we get here to start with now what you'll see as we saw in our last lecture is that we've got this selenium view up in mobile right now right it's not totally mobile because there's no cutoff you can just kind of scroll down but it's good enough for us right now so what I want to show you is that certain actions are just basically web actions right there's nothing specific to mobile about them often times in mobile websites you might get this kind of navbar toggler icon that we've got here the hamburger menu as it's sometimes called and so maybe we want to click on that and all we have to do is that just works the same way as anything with a normal web page right so we can call this just call this a button element and we can just use driver.find element we're going to look by the css selector and the string we're looking for is a button .navbar toggler so that's the class on this button here it's at the top of the page so it should be the first one so run that we've got our element and then what we can do is click on it so you clicked on it you should see here that menu drops down right you can click on things in the menu and it's still that mobile view of a hamburger drop down menu and the way these usually work is you click on it again and then it will close things back up right now you're back on the normal page so in terms of selecting and clicking on stuff in mobile sometimes it's just basically the same as with with a normal web page it's just that you've set up your chrome session to use those emulation settings as chrome options so in terms of touch type actions like I was talking about maybe to scroll or kind of flick with your finger right double tap something like that where a mobile device could have some sort of specific action that that interaction generates right like a screenshot or something I don't know we can try it with action chains but what we'll see is we'll just get some errors when we when you maybe try to do things that you would otherwise think would work so we can set up an action chains object and what I'm going to try to do is scroll to this this getting started header here in the middle of the page so that's just a basic scroll action right it's nothing too complicated so let's see how that works using using the action chains so first I'm going to specify that element it's an h2 element so let's get that let's see h2 let's get all the h2s on the page driver dot since it doesn't have a there's no id or name on that h2 so driver dot find elements plural we're going to search by tag name and we're looking for that h2 tag there should be multiple on the page but we're just going to get the first one getting started what do we call this getting started element and this is h2 this is from the h2 elements and it's the first one so zero index it's just that now the action chains object has a scroll to elements on it so on this page you might think that if we scroll up to the top here stay started up there that we might just be able to use that and specify the getting started element and then dot what is this dot perform to perform the action but we get this kind of error here which what's it say invalid argument invalid parameters let's take a look at yeah invalid parameters so you can try to perform it there is only that one parameter that you need and yet you still can't do it using an action chain in selenium so instead what you have to end up doing sometimes is using this driver execute script so we're going to execute some javascript so you can use windows scroll to and then 0100 so that's just like an x and y value here window to scroll to is just a javascript scrolling function so we can do that and then it kind of scrolls down right we can maybe do it again execute script window dot scroll to 0 like 800 right do that and scrolls a little bit further down to more or less where the getting started header is but as you can see we've kind of got some limitations really to using selenium for emulating mobile actions or emulating mobile devices as well like I said before this isn't a javascript class we don't want you to have to write a whole bunch of javascript inside of your execute script because it makes your code hard to debug and it means you might have to learn another language too instead of just using selenium so if you are using selenium for mobile testing or you'd like to try to use it we just want you to be aware of some of these limitations of using it and you might want to check out some other packages like apium if you're going to get deeper into trying to use python for mobile testing unfortunately selenium doesn't have a whole bunch of great functionality for us here ok so hopefully that was an interesting lecture for you guys again it's a little bit of knowing the boundaries of selenium rather than getting deep into functionality but should still be useful if you find yourself needing it you'll know what not to use it for as well as what you can use it for thanks everybody for joining and we'll see you in the next lecture hello everyone and welcome to our section on the page object model to start we're going to talk about how you might do page testing in selenium without using the page object model before we take a look at what the page object model is the design pattern and how to implement it in python we're going to try to test a page using what we've learned so far specifically in this lecture we're going to write some code testing the search on wikipedia's main page so before we get into the page object model we might want to think about what are some of the drawbacks of not using a design pattern for testing our web pages some of the potential drawbacks that we're going to see as we go through this testing exercise of scripting things so to speak or writing things in a jupiter notebook versus using the page object model are as follows the first is there's this splatter you might say of locator types and strings across your code so the locator types and the strings for finding page elements are just going to be wherever you need them they're not going to be centralized in one place and so if the page changes or the id of an element changes for example you'll have to search through your code to figure out where exactly it is that you're using that locator type or that locator string the second thing that you'll find is a drawback is that you have repeated code in a lot of places so for example let's look at finding an element and sending keys for filling in a text box that's really two steps in Selenium so it's finding the element using some sort of locator type and string and then you have to send the keys now if you have a large form to fill out or a large form to test filling out you'll have to repeat both of those steps for every input element that you work with obviously that's not ideal right and with the page object model as you'll see later we can actually avoid that and cut down quite a bit of repeated code and finally the last thing is that it's very difficult to scale your Selenium testing code if you're not using a page object model so you'll just have all of these scripts that maybe work maybe they don't as the web page changes and it'll become very hard to maintain and that makes your testing code difficult to scale so with that said let's head over to Jupyter Notebook now and what we're going to do is we're going to take a look at the Wikipedia search and test it just using just coding as we've done before mostly in our Jupyter Notebook alright so we've got our Jupyter Notebook open and we've got the web driver open as well to