How to Handle Bootstrap Dropdown in Selenium Webdriver

hey hi everyone welcome back to another video I'll learn - Automation comp this is Mukesh today in this video we'll see another very interesting topic called bootstrap drop down so you will face this bootstrap drop down in almost every new web application nowadays so let's get started with the agenda for today sorry the title is wrong it should be bootstrap drop down so we'll see a what is bootstrap drop down how to inspect element for bootstrap drop down how to select the values and and how to verify the values so first of all the word comes what is bootstrap so bootstrap is just another framework for developing responsive or mobile websites it's a completely open source so anyone can use it so you will notice nowadays the web applications are coming quite responsive so when I say responsive I mean when you open in any of the system or in tab or in mobile the UI will change based on the devices resolution so if you see this is application itself I minimize this you will see it's coming in a responsive so when I change the layout it is automatically adjusting right and when I do in this mobile format you will see it's completely changing the UI based on the layout so this kind of application called responsive when it it will change the look looks and feel based on the device resolution so nowadays almost every application is coming and of which use bootstrap framework and they design their web applications so if you want to go through this boot step you will find they have very good tutorials here if you want to check what this bootstrap alert you will get this kind of alerts and if you see the tables you will get the tables in this format so it is a new framework it's not the tradition old HTML format you will see come everything in bootstrap input fields you will get a new input field password field in this check boxes so you can say it's the next level of St ml so the drop-down example will be like this so when you get example like this you can understand it is a bootstrap drop-down so I created example on my block so I will show you how to handle this kind of drop down so I will show you I just copied the bootstrap paste source so I just created this page from the bootstrap and what I did this is the main thing which you need to understand here I have four drop-down so one contains HTML one contains C C's one contain JavaScript and last one contain about us so whenever you have drop-down which does not come under select tag then you have to use the technique which I am going to show you right now now question comes how to work with this so let's start this inspector so first of all until you don't click on this option these options will not come so your first step should be you need to click on this drop-down you have to click on this menu item then only these options will come so now if we inspect these elements let's inspect the outer one so if you inspect the outer one outer one is coming inside you well you will stand for unordered list so if you expand this UL then you will find some li li one two three four five if you click on the first li you can see it is highlighting this HTML right second is highlighting cesis second third is highlighting javascript and the last one is about us and you can see one more Li that is only for this horizontal bar right so you can know it but you can see they have some more tags if you expand this is the anchor tag so this anchor tag will not navigate to any of the site because it is blank but you can see the text is HTML if you expand the Li rate it is CSS again Li this is JavaScript so what I did I just added my blog hyper link for the JavaScript so we'll click on this menu item and we'll click on the JavaScript and it should navigate to my blog so first of all we need to click on this so this is the XPath for this so quickly I will write the program I will start eclipse I already have one program which is written here so I will only change the URL so this URL you can find in the video description now the next step I have to click on that particular menu rate so the XPath for this is menu one so I will write driver dot find element by XPath and dot click after click these options will come up right so let me sometimes what happens when you click on it this will take some time to load so better we will add one implicit wait so it should not fail my test so I will write driver dot manage dot timeout dot implicit weight of 10 seconds time unit dot second so now let's inspect these so first of all I can see this you l have one class called drop-down menu right and if I expand this each L I have a specific role called presentation so either I can take this weird X path then also it will work but let's take this ul which is nothing but this and this you will have one specific class name which is nothing but drop-down menu so I will write my own expand or what I will do I will search for ul so you can see I have for ul here 1 ul is this and right hand side you will find three more ul so I will search for specific UL which contains class name is this so it is only matching with this UN but inside this ul we have for a lie so I will write double slash Li so it will match all the Li which we have now we can see inside Li also we have H sorry a so I will write a so when I say a it will check all the hyperlink only so I will use the sex path now since you can see we are working with for matching nodes so I have to use driver dot find elements now you cannot work with one because right now we have multiple so I will use this XPath so when you use find elements you will get a list of web element so if you see put mouse over and it will return a list of web element so I will store this in a list of web element and I will say I will give a meaningful name here called DD menu like drop-down menu I will import the list from Java dot util make sure you are taking from Java dot util and I will import the web element as well so now we have this list ready now I can run a four loop so I will use one enhance for loop or let me use the basic for loop first it will be easy for you then I will check the size of it because I need to iterate till the number of web elements we have right so this loop will start with zero and it will go till the number of elements we have so we need to call one method call size so if you have five options it will start with zero till five so it will iterate your five web elements now once we get this we need to iterate right so I will say DD menu DD menu is nothing but our list so from this list I will take the first element so we are running a for loop so I will pass I every time it will return me web element so I will say element now once it will return me web element I need to capture this text like HTML CSS JavaScript to capture this I will use one method called cat attribute and attribute name will be inner HTML so when I say inner HTML it will only return you this in a rest ml part so which is nothing but your HTML CSS so here I will store in a variable and I will say let's say inner HTML if you want I can print as of now in the next run we will see how to select the value as of now I will say values from drop-down is in a rusty mm it's very straightforward first we have clicked on that menu then we identified all the hyperlink then we started a for loop this for loop will start with zero so one by one it will return me all the web element and then I am capturing their inner HTML which is nothing but the text and after this I will close the loop so let us run this and see the chrome started to click and you can see it is printing all these four options it is not maximizing so let me maximize this window so driver dot manage dot windows dot maximized so you can see it is printing all these value one by one but our intention is not only printing what we need to do we need to click if particular link exists right so let's search for the JavaScript I will write a small code and we'll check if inner HTML contains or contains equals JavaScript then we need to click write for clicking we need this web element so I will say web element dot click so this might change so let us say if in feature you need to click on about us so simply you need to change here so now we have written a very custom code or you can say reusable code where simply I have to only change the content here and it will click after click do not forget to call the break method otherwise it will keep calling all this until the full loop is not getting finished but I want to break the loop when I will get the space fake matching no let's run this one more time and then in the next turn I will show you in the debug mode how exactly it works so it is started and you can see it is it after matching with two HTML CSS it clicked on JavaScript and it is navigating to my block and it's closing the session Israel so you can see it's very straightforward now let me show you in a debug mode so I will add one debug mode at line number 23 and this time I will run as debug as java application so it is started and so this is the application so when I say as of now you can see the menu option is here when I say click it will click here and these options are displayed so when I inspect or when I execute this line it will return me list of web elements so you can see this ready 3d menu have four web element let me show you so you can see every element having a separate property so this is one this is two three four so the main thing we need to see the for matching nodes here right now let's execute one by one it will take the first web element which is nothing but our HTML so it will take the inner HTML and you can see it's STM el right so it will check if HTML equal to Java Script definitely not so it will come out it will not enter inside this if statement it will end will print HTML again it will go back it will take the second web element it will take the second inner HTML and this time second in a rest ml is CSS again it will not satisfy the if condition and it will print again it will go back to the third one and it will take the inner HTML this time the condition is fall or like true so you will notice it will go inside this statement right now we are on this page when I say click it is navigating to new page it is breaking the statement now and it will come and it will close the session you can see how easy it is in straightforward only thing you need to understand how we can take this XPath so that it can match with all the drop-down menus and this become very robust code so let us say in case in future you need to click on about us you have to simply change and just change here let us say you want to click on CSS or HTML right so so this is how you can write the code for handling bootstrap problem so this is just one way but the the next one which I generally prefer is using enhanced for-loop because here I am using basic for loop so let us see how we can use the same with an enhanced for loop I will simply copy and paste and this is the 1c functionality-wise nothing will change only the thing is I will make the changes in this enhance for loop so the code will be I will write for if you see this drop down menu is nothing but a list of web element right so in enhanced for-loop we need to keep with kind of value you will get every time so I kept DD menu DD memories list of web elements so enhance follow automatically will take one value from this in fill assign into ele so the good thing about enhance for loop you do not have to worry about this increment and passing this method every time it will get the element one by one and it will store into ele here i can call this particular piece of code so here I'll I will make this element and let me remove this not required so now same code but we're within hands for loop every time it will get web element will capture the inner HTML will check if equal to JavaScript then click otherwise break sorry otherwise continue and if it is matching with exact JavaScript it will click break the statement and it will come outside this for loop so let us run it before closing to the bootstrap so bootstrap having so many advanced web elements so whenever you're free just try keep exploring how we can work with the different bootstrap elements because nowadays every company is moving to bootstrap so you will find couple of new input form so if you see they have progress bar pagination list of groups taps navigation bar input two so if you see in input two e they might have some at once so just try it yourself right they have some enhanced UI so just try this bootstrap when we have free just go through this w3 school hope this concept is clear for all of you so thank you so much we'll see in the next video have a nice day bye bye

Channel: Mukesh otwani

Views: 94,042

Keywords: Selenium, Webdriver, Automation, Framework, Dropdown, Bootstrap, Test Automation

Id: eMLXegqvuwU

Length: 20min 30sec (1230 seconds)

Published: Sat Aug 27 2016