Session 31 - Selenium with Java | Handling Different Types of Drop-downs | 2024 New series

So in the today's session we'll see how we can handle drop downs drop downs or we can say drop down box right so dropdown is most important topic so let us see because there are different type of drop downs we will handle them in different ways okay some predefined methods also there and without predefined methods also we can handle the drop down so majorly there are three kinds of drop downs we can see on our applications so the first type of dropdown is normal selected drop down and boost strap drop down and then hidden drop

down so these are the three kinds of drop downs we can see normally in our applications so if you have a selected dropdown this is very easy to handle because we have some built-in methods are available so we can easily handle those selected drop downs so these are the default drop downs and most of the latest type of applications nowadays having boost dropdowns and hidden dropdowns so these are the two latest Technologies but the old selected dropdown is a old one and sometimes you can see Select drop downs sometimes most of the times you can

see boost strap and hidden drop downs and different approaches are there to handle these dropdowns we'll see one by one so first let us start with the select drop down so how we can handle the selected drop down and one more thing uh in these three dropdowns only the first type of drop down is having select tag if you inspect that drop down element in HTML you can see select tag okay and then you can confirm that is a selected drop down if you see if you're able to see select tag in your HTML you

can confirm that is a selected type of dropdown and if you don't see select tag sometimes you can see D tag okay and other than D tag some sometimes you can see button tag or some some other else tag so those are all comes under bootstrap or hidden drop do okay if you're able to see selected tag in HTML that comes under the select drop down and other than select if you see any other type of tags that comes under boost strap or hien drop okay so I'll show you sample example how we can handle

these three typ of drop down first let us start with the select type of drop Down select drop down so I'll show you a sample example so let's go to test automation practice and here if you look at this there is a drop down called country right there are multiple options are there in this drop down so if you inspect this element and you can see select tag here and if you expand the select tag you can see multiple option tags so every option in this dropdown is having a separate tag okay so how many

options are there in the dropdown there you can see those many number of options present inside the select tag so these are all options are child tags of Select tag okay and this is called select drop down so as as you can see select tag here in HTML that is called select dropdown okay now the drop down element itself is one web element and inside this there are multiple options are there right every option is a web element so that means one web element contains some more web elements so the drop down itself is one

web element and inside this the each and every option is also a web element every option is a web element but these are all child elements of the parent element that is drop down okay so if you inspect this element in HTML you Can see that so the select this is the element which is representing the entire dropdown and then okay and then if you expand the selected tag you can see multiple options so each of every option is a web element okay now we'll see how we can handle handle this type of dropdowns so

let's go to Eclipse create new package so I'm creating new class select drop do okay so now we'll see how we can handle the selected op so first of all we need to create a web driver instance launching application and all those things so let me do that okay so web driver object created this is implicit weight and this is our application launching and then maximizing the web page all right so first we'll see how we can handle the drop down so whenever you see the drop down what's the first action we do we will

select The value from the drop down so we'll select one of the option from this drop down like this right so this a major option major action we do most of the times but before that we have to capture this element okay how to capture this drop down element and from that how we can select these value so whenever you see select type of drop down to handle this we have to use something called select class there is a predefined class is available in selenium selenium which is called select okay this is a class so

by using this we can handle the select type of drop downs not every dropdown only select type of dropdowns we can handle by using select class so for that what we need to do is first let us inspect this element this is a drop down element and select a tag is there class option class attribute ID is there so if I go back and see the selector Hub and which is given and xath by using ID attribute it is given X paath for that element so I'll capture it and try to find that element driver

dot find element by. xath okay now this element we have to store in a variable I'm taking DRP country some variable and Type of the variable is obviously web element okay web element so now import this web element yeah so now we captur the drop down web element but uh the next thing is we have to choose one of the option in this dropdown right so it is not directly possible so we can capture this element as a web element drop down as a web element but every option is a web element again so what

we have to do is whatever element we have captured we have to pass this element in the select class object so we have to create something called select class we have to take select okay and uh this is element we captured DRP country element and that we have to pass in a variable select DRP country equal to new select and whatever element we capture we have to pass it inside the select object like this now we need to import this select from org open qu selenium support. this is a process so first we have to

capture the drop- down element then we have to create a select class object inside that object we have to pass the drop down element so this is a special class which you have to use if you're working with Select type of dropdown and if you're able to see select tag in HTML that is called as select drop down okay now once you create a select class object by using this object we can perform other type of operations like what are the operations we can do we can select the value or option from the drop down

like this or suppose sometimes I want to find how many options are there in the dropdown I want to count how many are there or sometimes I want to retrieve each and individual values right these are the different operations we can do so we'll see how we can do those operations so we captured the drop down as a web element now we have passed into the select class object so now we'll see how we can select the option from the dropdown select option from the dropdown so to select the option from the dropdown we have

three methods are available in the select class and we already created an object so through the object we can access those three methods so by using three methods we can uh we can select the value from the drop down so what are those three methods select by visible text select by value select by index so these three methods Are available in the select class itself so we can access them by using an object of the select so we already created an object called DRP country so by using this we can access this meth only one

of the method is enough three options are available three methods are available we can use one of the method select by visible text select by value select by index now let me show you how we can select the option from the drop down so we need to take this select class object DRP country dot you can type here select by visible text select by visible text and here we need to pass which option we want to select so in this there are so many options are there let me select something called France nce so that

I'm going to like this so what is a visible text visible text means whatever we can see in this UI these are all visible text so whichever option you want to select from the drop down you can pass that value as a string variable like this so select by visible text and this will able to select the value from the drop down so now execute and see yes now we can see the Frances got selected here this is one option select By visible text select by visible text and there is one more option suppose uh

one more method is there so I can say DRP country dot select by value select by value so most of the people will confuse here what is visible text what is value value is an attribute of the element okay value is an attribute of the element so if you look at this particular options in the HTML every option tag is having a value attribute can you see here the value attribute so what is the value of the value attribute is something e we need to specify that so suppose if you look at here let's say

Japan Japan is a value right so I can just pass it in the double quotes we have to pass and sometimes the visible text and the value will be the same so if I look at this uh you can say here it is a Canada and the value of the value attribute is also Canada right but there is a difference visible text is started from upper case and value started with the lower case and here if I look at here the visible text is United Kingdom but the value is what UK okay sometimes they may

be similar sometimes it will be different so don't think value is nothing But not a visible text visible text is different the value is different visible text means these are all inner texts which we can consider as a visible text and value means the attribute of the particular option element right so now I want to select something called Japan so I can pass it as a Japan here select by value and when to use it some sometimes if you don't find Value attribute sometimes you don't have a value attribute in HTML in that case we

cannot use visible uh select by text sorry so select by value so you cannot use this method if you do not have a value attribute in a HTML so that's the reason they provided multiple options sometimes you may find that option sometimes you may not find it so if the value attribute is available for that option then only you can use this method select by value and select by visible text you can every time you can use because visible text is always present but selected by value you can use only if the value attribute is

present so now let us execute it and see it should select Japan yes so now we can see it is selected Japan from the country so this is one method select by Visible text select by value now the next method is Select by index DRP country so what is this DRP country DRP country is a select class object so we should not use this web element directly because the drop down is one web element inside this op every option is a web element so we cannot directly use this web element that we have to pass

pass in the select class object then we have to refer the select class object to access all the methods now DRP country dot select by index so what is an index where we can find it so we cannot find index specially in HTML we need to count manually so for example index will start from zero again so this is 1 0 1 2 3 4 5 6 7 8 like we need to count it okay okay so for example uh I want to select uh okay United Kingdom so what is an index of it 0

1 2 so now I can pass two as an index okay so I can pass two as a an index let's see and execute select by index so you have to count this manually run as Java application okay now we can see United Kingdom so options we need to count from zero index will count from 0 one2 like this so United Kingdom 0 1 2 so United Kingdom is got selected okay so these are The three methods are available select by visible text select by value select by index by using one of these method we

can select the value from the drop down it is very easy very straightforward but if you go with the Boost drop down or hidden drop down you don't see these methods because we do not have a select tag there so we need to handle them differently so these methods are applicable only if you have select dropdown select a tag you should have in the HTML then only you will able to create a select class object you'll able to use these methods okay now let me show you one more operation so this is how we can

select the value from the drop down by using these three methods select by visible text select by value select by index now zero is always starting index okay we need to count index Zero from especially from Top Downs index most of the cases index will start from zero only so but index is not an attribute of the element if it is available no problem you can use that no issues okay okay so okay let me understand let me just try to do it sometimes okay let's say You have a selected tag like this select ID

equal to see down something or you can say ID equal to you need to change it according to your HTML okay let's say this is my select inside this there are multiple options are there let's say one option is having something called normally we have a value attribute okay value is equal to suppose I and visible text is let's say India okay now the option tag is got closed so suppose if you see select a tag like this so normally you can use this value as an attribute this is an attribute right so we can

use value select by Value method so if you want to use select by visible text you need to pass this one if you want to use select by value then you have to use this one if you want to use select by index then normally we will count index from 0 1 2 3 4 but sometimes you can see one more attribute here called index like this okay attribute now here index is a attribute it is available as an attribute so then what we can do you can use this index zero right so that you

can use as an index itself okay so this is an attribute index equal to zero right so you can pass zero here so even that is also Correct sometimes it may ien see many times but sometimes if you see this you can pass it or else no okay this is you can pass no no problem even if you're not seeing this attribute still you can pass index 0 1 2 3 4 like this still that will work fine okay so this is how uh we can handle the drop down we can select the option from

the drop next one suppose my requirement is I want to find how many total number of options in this particular drop down okay I want to find total number of options and I want to compare that with my expected number that's a part of my validation so my requirement is I want to check whether this dropdown is having 10 options or not or 20 options or not so how we can do that so we will try to First capture all these options into a variable then we can count how many are there okay so how

to capture all the options from the dropt and we no need to write a common expath here because which is a selected drop down we can easily handle this so normally if you want to capture multiple options or group of opt options we will write a one common xer or we will use a common locator But here to capture all the options from the dropdown we use one method called get options capture the options from the dropdown so how to capture very simple take this select class object DRP country dot there is a method called

get options get options so this particular method will return all the options into a variable I'm creating one variable called options okay options now what is the type of this variable get options method will return return list of web element because every option is a web element every option is a web element so if you return multiple web elements the return return type should be list of web element it is just like a find elements so normally if you write a common X paath which is pointing to group of web elements that will return list

of web elements same thing get options also method which is returning multiple web elements and what are those web elements options now import this list collection right now we got the options so once you get an options can we find how many are there so we can say system. p options dot size okay this will give you total number of options in a drop so number of options in a Dr right now execute I'm not selected anything I'm just capturing the number of options I already captured the options and then I'm just printing total number

of options okay now I can go back yes now I have a 10 options are available in 10 countries are there in my drop okay now suppose I want to print those options in my console window printing the options so whatever options I've have captured whatever options I have captured from the dropdown I just want to print them in the console window there's say 10 options are there so I want to print those 10 options so how we can print them so we already captured all the options as a web element now we need to

print them so if you want to use normal F Loop you can use it or else we can use enhanced F Loop so first let me show you with the normal f for okay so options is a list collection basically right so where is the index will start zero so I'm taking index in I equal to0 how many times we have to repeat depends on the number of options so I less than options do size so depends upon the number of options and i++ every time I'll increase the Size so listen carefully so how we

can capture the elements from the drop down see in the last class also some of you having some confusion here so what is this options options is a list collection list collection and what is there inside this list collection here there is one option here another option here another option here another option right here another option what is these options actually these are the web elements okay these are the web elements now there are multiple positions so in every position of the list collection there is a web element now what we have to do is

we have to capture the web element from this position to get the web element from this position we use a get method get of zero or get of one so when I use get method that will return the web element from that particular position and once you return the web element then I'm using get text okay so what is get method will do get method will return the particular web element from that list collection once it is returned then I apply get text so this will extract the text of that particular web element so we

cannot print web element directly because web element is a type of an Object which is having so many attributes and methods and so on so first we will get the web element by using get of zero or get of one and get of two and get of three and so on once you get the element then we will capture the text of the web element using get text meth so these are the two methods we have to use simultaneously now what I will do is here first I will get the web element from the list

collection how we can get so from the options from the options dot get off so here I will pass index I representing the index 0 1 2 3 4 and so on so I pass I this will return the web element and from that web element I'll capture the text value by using get text method so that will return the actual text of the web element text of the option that I'm printing here system.out.print options dot get off. get of text all right so this is how we can write a normal F Loop to read

the options from the drop down okay let's Execute so most of the times we try to use enhanced for Loop it is better to use it instead of using a normal F okay I have not selected anything so far I go back see all the 10 countries are got displayed here right so this is how we can also find how many options are there by using get options and we can also capture each and every option one by one and from that option we can extract the text so what is another method is get options

so what this method will do this will return returns all the options from the drop down as a web element every option is a web element remember this okay this is one more method which is available in the select class okay now let me close this all right so now let us see how we can use enhanced for Loop get options is only for selected type or drop down yes yes so what are all methods I'm discussing here these are all belongs to select class object so if you have a select type of dropdown then

only these methods we can access okay if there is other type of dropdown how We can do these operations we will see that okay so the get options get visible text from where we are accessing all these methods we're accessing all these method from the select class object if I look at here DRP country do select by visible text DRP country do select by value select by index even get options also have accessed from the DRP country what does it mean all these methods are present inside the select class only so if you have a

selected class drop down then only we can use select class object okay now let me show you how we can do the same thing by using enhanced f using enhanc loop it's more simpler than above very simple let's take we already capture the options so take that variable and read each and every option in a variable I'm creating one variable called op now what is the type of this variable obviously it is a web element because options are contains a multiple web elements we are reading each and every web element one by one into this

op so op is a web web element okay we directly capture the web element here from the options so once you get a web element from that web Element you can capture the text by using get text method here we don't need get or anything because we are not using any index okay just pint op do get text but here we are using Index right that is the reason because we have to first get the web element and then find out the textt but here we already captured the web element into op from the options

so that web element. get text I'm directly used so this also will print all the options from the drton yes so now we got all the options okay so this is how we can handle normal drop down which is having select tag the first type of drop down okay everything is clear so far everyone so please confirm in the chat box you understood about normal selected dropdown next we will move on to the next one so selected dropdown is very easiest because the built-in methods are available but bootstrap and hi is a a challenging stuff

fine so how we can identify a drop down is a normal selected drop down or not in HTML Or when you're inspecting the dropdown you will see select tag okay if you're able to see select a tag in HTML you can confirm that is a select a type of dropdown and then you can apply this approach right so now the next method next one is Boost WAP drop down so this is something the latest type of drop down bootstrap drop down so you don't see select a tag for those type of dropdowns you can see

D tag or sometimes you can see button tag okay tags will be different but it is not select a tag now I'll show you one example for boot STP dropdown so let me go to some application okay yeah so look at this this is the actual HTML code which is got created to design this HD bootp drop down if you look at this this is the drop down and which is having options along with some checkboxes also right which contains some checkboxes also option contains a checkbox also there is a different type of drop down

so if you inspect this element and again this is also multi select a drop down in the drop down again there are two categories one single option We can select sometimes we can select multiple options so in the previous example we can select only one drop down one option at a time we cannot select multiple options but here we can select multiple options so this is bootstrap and also multi- select dropdown bootstrap and also multi select drop down you can select multiple options okay so bootstrap and also multi- selected drop down okay now if you

look at this and inspect this element see you can see button tag here okay you can see button you don't see select and if you expand this okay this is button and inside this nothing is there this just multi select as what are the values by default is got selected they displayed here and if you inspect this UL option user list every option is present inside the LI tags you can see every Li is having internally one anchor tag and inside this again we have a label tag and inside this we have a actual label

web development this is a label act and let's go to the next one and you can see La tag inside this anchor tag inside this label again inside this an input tag so this input is representing the checkbox label is representing The text beside the checkbox okay for example G JY is a label beside this there is a checkbox so here input is a checkbox label is the actual value of the option okay so this is a hierarchy we can see in this every element is same thing again L tag anchor tag label and input

so you you may not have the same kind of hierarchy in every type of Bo it is keep changing accordingly we have to handle the different way so basically all these items are present inside the Li inside the LA there is an anchor tag inside the anchor tag there is a label and input label is representing the text of the option input is representing the checkbox of that particular option okay this is what we have understood from the HTM so now we will see how we can handle this how we can perform different operations on

this drop down and this in this we can select single option we can select multiple options also okay and xath will play very very important role in this type of drop downs especially hidden drop downs and boost up drop downs we will totally depends on the xath only okay so we'll see how we can handle every operation we can do only through Xath let's create a new class boot strap all right so we created one web driver object and this is implicit weight and lo launching the application and then maxman right so how to handle

the first operation how to select an option select how to select multiple options I will show you through the looping but if you want to select a single option select single option from the dropt here the select class won't work okay select class we cannot use because it's not a select class uh select object so select a single option from this drop down so by default HTML CSS is already selected now I want to select another option so simply what you can do is uh we need to First click on this element like this we

need to perform the click action okay so for that we need to First locate the element this is element button element so capture the xath of this element right see if you take this x paath will it work every time So to identify this element selector Hub is given this x path when I use this x path to locate this element every time this x paath will work no why because this xath is got generated based upon the value which is got selected suppose tomorrow some other values got selected okay now we inspect this element

xath will be different so here the options will be different okay so we should not write xath like this based upon the values titles okay so we need to write one common X paath so how we can write one common xath for this so without using the existing options we want to write in common expon okay so let me write my own X paath so instead of using title attribute so the title attribute is there but the values are not standard these values keep changing okay and other options we have like data toggle we cannot

use and uh type is equal to button maybe the other options Also may have the same type so other thing other than this we have only class attribute so in the class we can see multi- select right so we can write like this so at theate class I'm taking class Attribute okay class attribute equal to and selector Hub is giving something here you can use this option see one element is matching so button at theate class equal to multi select drop down toggle BTM so this is able to locate an element okay again it seems

very lengthy right the class name attribute seems very lengthy so I don't want to specify the lengthy one I just want to select only multi select so I can use one more thing called contains method so we have a contains method right contains at theate class comma and here I just say only multi- select I remove rest of the thing I can just remove it okay and then close fine this is also correct this is also able to this is more uh Dynamic right so this is perfectly fine if even if you specify the full

class name Sometimes some part may be changed here you can see drop down toggle BTN B and default these things may change so multi select is a common so I can just put like this contains class attribute is multi select so this I can use so you can write many ways but whichever you want you can just keep using it now here I Can directly click on the element driver. find element by. XPath and here I want to perform the click action so when you do click action then it will open other options so once

you perform the click action on the drop down element then only other elements are visible other options are visible so this particular command will opens drop down options okay so once you open the drop- down options now we will able to select the value so I'll keep this before this because this command is most important so once you click on this it will open all the options now we will select the single option so if you want to select the single option can direct option direct approach okay for example let's say this is a default

stuff when I click on it it will open options now I want to select one of the value let's say I want to select a Java so then simply you can inspect that checkbox Java checkbox like this not label you have to select the checkbox okay now it is got generated One X paath and use it directly and say driver dot find element by dot X paath and Dot click dot click so this will select select an option from the drop down so if you want to Select a single option if you want to select

a single option you need to do like this fine execute yes you can see Java is also got selected here along with the two default options Java is also got selected okay so if you want to select a single option from the drop down you can directly get the xath of that option and perform the click suppose my I want to select all the options okay I want to select how many options are there in the drop down so how to first we need to capture the option then we can count how many are there

right so this is my first requirement select a single option from the drop down second requirement can capture all the options and then find out size so I want to capture all options and then find out the size this is most important thing so here we don't have a get options or anything we have to write our own expa so capture all the options and find out the size so how we can do this so we need to write one common xath which is matching with all the labels in this particular drop down Okay so

if you look at the xath look at the HTML all these options are present in what UL tag okay inside the UL tag inside the UL tag every Li tag suppose I'm expanding one Li tag there is an anchor tag inside this there is a label tag inside the label there is a input tag so label is having actual value okay so this what is our label suppose I'm expecting this one label if I inspect the label here you can see the value in this label the value will be displayed these values will come at

the run time actually so that's the reason exact values we cannot see uh inside the HTML so the label is empty actually but this value will be substituted at the run time and input box is there so we need to capture labels from all all the options okay so how we can write an exper for this now first I'm going to directly use UL tag I'll go to UL I'm starting from the UL here it is inside the UL where we can find the labels inside the UL inside the Lis and inside each and every

Li there is an anchor tag and inside the label so I just want to skip this middle tags from from UL I will directly jump to the label from the UL I will directly jump to the label so I can say UL SL slash label SL slash label just observe 14 elements are matching 14 elements are matching okay or what you can do is I can write like this this is one xath you can write or you can put one attribute we at class okay and for the UL class attribute is there multi- select container

drop down menu right so that I can use UL contains at theate class and here I can put multi select multi select so this we already return previously so this is the xath we have return which is actually matching the drop down element the entire drop down element but in this we have to go label section so we can directly say label directly go to the label this is also correct 14 elements are matching okay so now we can get this x paath to capture all the options from the drop down go back to here

and so what is the command we have to use find elements so driver dot find elements by. X paath and uh this will return return all the options so li/ a I have not Ive skipped it because we have written the relative X path right in the relative X path SL slash will directly jump to the element label element so it will automatically skip the Between elements like uh anchor tag is there right between Li and anchor tag so these two will be skipped from the UL it will directly jump to the label tag so

in between whatever the tags are there it will automatically skipped why because we use relative xath relative xath SL SL will directly jump to the element so actually how we have to write first we need to go to Anchor tag then you have to go to uh inside this we have a label tag so first we need to go to Li tag then anchor tag then label tag so this is how we need to write normally right so if you want to skip in the middle tag you can skip it by writing just SL slash

so this will return the 14 okay so now this will return all the labels from the dropdown into a variable so I'm storing them in options variable the type of the variable is what again list of web element okay so we got capture all the options from the dropdown now if you can find easily right you can say number of options so number of options how we can get options dot size so this will give you a total number of options so this is the way we have to capture all the options from the drop

down so Only everything is depends on the xath okay so we have written one xath which is pointing all the options in a drop down fine so let's execute and see so I'm commenting the first one for now okay so total number of options 14 okay now the my next thing is I want to print them so I want to print all those options printing options from drop down third requirement so printing the options from the drop same again we can write a normal for Loop or we can write enhanced for Loop anything is fine

so I can directly write an enhanced for Loop because you already know how to write a normal F so very simple you can take this options and get each and every option in the variable I'm taking one variable called op the type of the variable is again same web element it's same procedure again so once you get an option the proced are same and here I can print op do get text we have to extract the text from the web element so this will print all the options from the drop- down run as Java application

okay now we can see we got all the options from the drop down So because we already captured options by rating proper xath and just read each and every option into the variable then get the text of that particular option okay suppose my requirement is like this because it's a multi- select dropdown right I can select multiple options also if you want to select a single option you can go with this you can directly write an X paath for that particular option for that particular checkbox and perform the click action so that will select s

the one checkbox but I want to select multiple checkboxes multi select drop down right so how we can do that select multiple options so whenever you want to select multiple options better to go with the looping statement otherwise you have to write the same statement multiple times so which suppose you want to select five items or five options you need to write the single statement five times so instead of going with this just try to use a looping statement okay now this time I want to select multiple options so how we can select multiple options

same concept same Loop okay so we are getting each and every option in this right that is basically a label basically That's a label right so what we need to do now is we need to capture the text and whichever element you want to select you need to compare that value by using IF condition okay if op. get text op. get text do equals okay for example I want to select Java okay what else you want to select Java I want to select and I want to select python also so R we can use R

operator R op do get text do equals dot equals then if it is a python python also I want to select or so like this you can put all the options whichever option you want to select then I want to select MySQL MySQL or op dot get text get text Dot equals MySQL SQL is uppercase right now close this condition so what are all options you want to select you can put them here so as soon as you get the text value if it is equals Java or instead of writing this much what we can

simply do is get The text op. get text into a variable so here you can take one string variable okay you can take one string variable string option okay now we need to compare take this option and substitute here okay so inad of writing this you can do like this you can take another variable so we're capturing the text value in a variable now we're comparing the text value equal to Java or python or my SQL whatever it is we want to select it how we can select we can simply say option dot click option

do not option op op is an actual web element right op do click so this will select the option from the drought okay so let's try to execute and see so Java python my SQL so by default two options are already selected HTML CSS but apart from this I want to select three more options run as Java application yes now we can see Java is got selected python selected and my SQL is selected so this is a way we can select multiple options from the drop okay very simple why is enhanced for Loop see enhanced

for Loop doesn't follow any indexes so many times I've explained I think in the last class itself we have lot of discussion on this see why we have not used get method in this enhanced for Loop because from the options we will directly get the web element in this variable so from that web element we are extracting the text okay but if you go with the normal classic for Loop it's not like that if it is a normal for Loop we have to use indexing concept I think this is a fourth time or fifth time

I'm repeating this I don't know whether you understanding or not so this is the list collection in this we have multiple options okay these are all web elements actually so these are all web elements web elements in the sense is object type of data so we are if you are following index in the normal F Lo we have to follow Index right 0 1 2 3 4 index we have to follow so if you want to get this element first element we have to use get of zero and then we have to extract the text

from the web element so we have to use get text this is the approach we followed in the normal F Loop because we are following indexing concept we are not directly getting the web element we are getting the web Element by using index so get of zero will get the web element on top of it we are applying get text same thing get of one will'll get the element and then on top of it we are using the get text method this is with the normal for Loop approach when you come to the enhanced F

Loop the approach is like this even enhance enhanced F Loop we have a list collection we have an options okay these are all web elements in enhanced F what is happening is from that options we are directly getting the web element in this variable so this variable contains a web element okay so from that web element we can directly extract the text value because we are directly getting the web element into the variable from that variable we are extracting the text but in case of normal follow we are not directly getting the web element to

get the web element we have to use another method called get get of zero get of one get of two by using get method we have extract that web element first on top of it we are using get text but here why we have not used get method because we already getting the element into the variable op so that is the reason we are directly using get text get is not Needed here I hope you guys are understood why where we have to use get where we should not use get so this is the last

time I will repeat again I don't repeat this because this is fourth time or fifth time and also this is very basic concept okay so whenever you want to use index then get method will come into picture and whenever you want to use enhanced for Loop index won't follow there so we can directly get the BB element in this variable we apply the get text okay now let's move on to the next thing so if you want to select multiple options by putting one condition you can select which whichever option you want so everybody's understood

this is all about bootstrap element bootstrap drop down so whatever operations we have done in the normal select dropdown the same operations we have done in the bootstrap dropdown also but in the different way without using buil-in methods without using built-in methods only we dependent on completely xath okay so this is a bootstrap drop down second type of drop down and the bootp drop down we don't have any built-in methods everything we should handle through expa Now hidden drop down the third one which is very popular nowadays the latest trending applications are using hidden drop

down let me show you an example for hidden drop down why I'm calling hidden drop down means the options are hidden the options we cannot directly inspect we cannot see those options directly on the web page okay let me show you some application in orang HRM application I'm logging into this once you login go to P tab here click on P okay now you can see there is a form uh employee name employee ID status okay include job titles subunit many many things are there so if you look at this job title or employee status

or subunit these are all hidden drop downs how we can say they are the hidden drop downs and what basis we will say that is an hidden drop down let us inspect this element first when inspecting this element you can see there is a d tag there is a d tag but inside this inside this these options are not visible in the HTML these options are not visible in the HTML in this case we can call it as a hidden drop down hidden drop down okay so These options are not visible in the HTML then

how we can select that option because there is no selector tag so we cannot use buil-in methods and these options also not present in this HTML if these options are not available in HTML we cannot inspect them if you try to inspect what will happen let's see I just want to inspect some some item here database administrator as soon as you right click on this element it is disappeared it is disappeared and you're not able to see anything in HTML you can see database administrator because I already selected here but before selecting I want to

inspect one of these options suppose automation tester for right click it is disappeared okay I am not able to see all these options in HTML at a time because that is most important when you're writing an X paath right if you want to select one option from this drop down you at least you have to write an X paath for one element and suppose if you want to capture all the elements you need to write One X paath which is commonly there for all the options so until unless these options are visible in your HTML

you cannot work on these Options okay and this is also a dynamic drop down so these options will be loaded at the run time okay these options will be loaded as soon as you click on this option these options will be available as soon as you close this element the options are disappear so these options are dynamically coming and we can other word we can say this is auto suggestion box these options are suggested here Okay so until unless these options are visible in HTML we cannot inspect we cannot write X paath until unless we

write an X paath we cannot handle this this is a major challenge of hidden dropdowns okay so then how to handle this so we have to make the options are visible on the HTML that's the first thing then only we can do anything on this then only we can perform any operation on the dropdown so then how we can make them visible on the HTML that is a major part so once they are visible in the HTML then we can proceed further anything we can do but how we can make them visible on HTML so

to handle these type of dropdowns selector Hub is provided one option which is very very helpful for it one of the feature in the selector Hub so by using that Feature we can easily handle these type of drop downs even Auto suggested drop downs okay and hidden drop downs we can easily get them so I will show you very quickly just observe very carefully so you can know that so by default you will see this drop down like this and if you trying to inspect this drop down you cannot inspect can inspect this but you

will not able to see any options visible in the HTML now go to selector Hub in the selector Hub there is one feature called uh debug on feature this is the one turn on debugger I think the fourth icon in the selector Hub you can see fourth icon turn on debug so by using this option we can make options visible on the HTML okay how we can do that very simple first we need to click on this turn on debugger so once you click on this turn on debugger within 5 Seconds you need to click

on this element within 5 seconds because the time of this debugger is only 5 seconds so first step we need to click on this turn on debugger within 5 Seconds immediately we have to click on this so once you click on the drop down then immediately the screen will be freezed and the elements will be displayed on The or elements will be visible on the HTML I will show you listen this I'm clicking on the debugger and immediately I click on the drop down wait for a few seconds now you can see the screen is

got freezed once it is freezed then go to elements right now if you look at this expand this tag you will you can inspect now you can inspect whichever element you want you can see all the elements are still dynamically loading but you able to see each and day we able to inspect at least right but earlier those options are disappeared you're not able to do anything now you can see every option is there in the D tag so if you expand this you can see here but these options will be displayed at the run

time you can see account assistant you can see automation testers now you're able to see all the options in this you're able to inspect those options okay so this is the main stuff again if you just want to stop you can stop the debugger again go here okay so yeah yeah here there is option you need to just click on it resume resume me Everything will be stopped okay so from once it is get stopped you cannot do anything that's it so this is option we have to use I show you one more time see

very carefully so by default if you try to inspect like this I'm right clicking on some element here disappeared I'm not able to do right click anything right so I'm not able to writing anything suppose if you want to do this through selector Hub we can see inspect and go to selector Hub take this turn on debugger and then click on this element options are visible after 5 Seconds it has got freezed now go to Element Section now you can inspect this element whichever element you want you can inspect take this inspect option you can

select whichever inspect whichever option you want you can inspect okay so this is the way we can use use this turn on feature okay so this is by using selab there is other ways also there I will tell I'll let you know but this is a option which We can use for now so let us see how we can do this let me create another example okay so I'll show you one more time listening very carefully first thing you need to open the selector Hub inspect open the selector Hub so once you open the selector

Hub by default you will not able to inspect any element see it is disappearing every element is if I right click here just disappear okay so what you need to do is you need to click on this turn on debugger and immediately open the drop down so click on debugger click on the dropdown and wait for 5 seconds yeah you need to wait till the screen is got freezed so once the screen is got freezed then what you have to do go to elements now you can take this inspector and you can inspect any of

this element so now in HTML also you can see all the options role attribute is there right so whichever element you want you can click on element you can see the D tag of that element and the inner text of the element and once job is done you can just stop this then it will come back so this is how we can use it is it clear everyone how To inspect these elements using selector Hub de debugger option just click on the debugger turn on debugger click on the drop down wait for 5 seconds then

screen will be freezed then you can start inspecting the element okay now let's create another example handle hidden drop down suppose if you don't have selector Hub but it is little difficult to do that but there is some option in the dev tools I will show you that H didn't drop down okay so now right so we created driver instance this is our implicit weight launching the page maximizing the page right so the first thing again same operations whatever we do uh we will do it but before getting this we need to First login and

then we need to come to p and then we need to navigate till we have to come till here right so for that I have already some script I'm just clicking I'm just copying the piece of code yeah this is just login steps okay so username enter password enter click on the login button and after successfully Login I click on the P Tab and then I got a drop down okay so the first thing is before getting these options if we want to get all these options we need to click on the drop down like

this so how to click on the dropdown first inspect this element drop down element and uh go to selector Hub we need to write our own xath so we need to click on this Arrow mark this is the one okay so this is the relative xath which is given one element is matching just a moment okay so I'm just taking this drop down enti drop down down and this is xath which is generated press enter one element matching so I'm using this xath this xath is for drop down so driver. find element by. XPath and

here I want to perform click action okay so once it Is click this will open the drop down clicked on drop down okay so once you clicked on the drop down it opens all the options now we need to select a one option select single option so if you want to select a single option we need to write an xath for the single option so if you righty click if you click on it and try to reach try to right click on any of these options it is disappearing actually so what I want to do

is I want to select something called finance manager and if you try to inspect this element disappear so now what we should do we should go to this turn on debugger click on this drop down wait for 5 seconds screen is freezed now go to elements now we can inspect whichever option Finance analyst I want to inspect so in this take this inspector and find out the financial analyist so this is the element and for this xath is got generated one element is matching capture this so driver dot find element by. x paath dot click

so direct click method you can use so this will select Financial anist first it is login go to P yes can see financial analyst is got selected so if you want to select A single option you can directly write an X path for that option you can select count number of options count number of options total number of options so again we need to write an xath which is matching with all the options in the dropdown so we need to write one common xath so how to write a common exper actually the element option is

available in the span tag if you inspect every D tag here this option is available in the span tag right so but where is this div and SP span tags are available here is in the parent de so this is a parent de and there is a roll option rooll equal to list box and inside the div multiple divs are there every div is pointing to every application if you inspect the div option if you expand the div option here you can see in the span you can see the actual value so we need to

write an xar properly first let's start with the parent D tag so inside the D tag I'm using role attribute r equal to r equal to so what is a role in the parent du tag so all these DS are part of the main D let me inspect one more time so these are all the D tags so Ro equal to list box this is the element R is the list box now it is pointing to all the elements inside this I'm directly go to span now 28 elements are exactly matching see 28 elements are

matching so this xath I can use and this writing this xath and everything is possible only if your screen is freezed okay otherwise it will be disappeared okay and once your job is done then you have to stop the debug okay let me finish my job and then I'll will show you how to stop the debug copy the X path and try to use it driver dot find elements by. XPath Dot and capture all the options all the options into variable so this is again list of web element okay now we got options now we

can simply count it system. VN number of options options do size so this will give you total number of options in a drop so once you're able to write an X paath everything is easy Still it is counting zero okay just a minute okay so actually we made a mistake so after click on I just comment this one and after clicking on the dropdown it is taking few seconds to display all the options so I will put a thread dot sleap here 5 Seconds okay now we can see after using wait statement after 5 Seconds

it should capture all the options from the drop down yeah now we got a 29 options so this is a size of option okay sometimes that options will come very slowly from the drop down so in that case you will get a zero elements okay so to avoid that you can just put some sleep statement 3 seconds or 5 Seconds below 5 seconds and that will solve the problem so number of options we can get like this now I want to print all those options in the console window printing options again you can use a

looping Statement andan for Loop so whatever options I've captured I keep them in the variable called op that is again a web element and uh how we can print this from the web element op do get text so get text is a method which will return the options so this will print all the options from the drop down but it is not a multi- select so we cannot select multiple options at a time we can select only one option Google search box I will show you how to handle the Google search box okay that is

it auto suggested dropdown Google search comes under Auto suggested drop down because in that case uh the options are keeps changing so you will not get the same options there okay so these are the current options which you have so 29s are there so this is how we can get the options from the hidden drop so this is hidden drop Auto suggest drop down is a different Auto suggested dropdown is like this okay before that let me stop this debugger so to stop this debugger you can See one option here PA in debugger right you

just click on this uh step over next function call and there is a resume script execution is there f8 is a shortcut key and if you click on it it will stop okay that option is there so Auto suggested dropdown is different so Auto suggestion means what suppose you will have a Google form here so if you type something here I got some Auto suggestions but these are all dynamically you're getting and every time you may not have a same number of options every time you will have a different count every time you will have

a different options so these are all not static values actually okay so in this case also we can write one Dynamic xath which is capturing all these options and we can select whichever option you want from this so this is auto suggest Auto suggest to drop down so this is the different okay we will see that later so this is also there that is also comes on the drop down but is auto suggest drop down we can say okay so is this clear to everyone how to handle hidden drop down so before selector Hub early

C uh Dev tools is provided one option to Handle the hidden dropdown so but probably in the latest browsers are available or not not sure but we will try suppose go to Dev tools inspect in the dev tools there is something called event listeners here go to event listeners in the event listeners there is an option called click here just try to refresh go to click here and in this document if you expand some document here one of the document you can see something called blur option and you need to remove that blur option somewhere

you can see that Focus yes yeah you can see the blur okay so you need to go to this blur option and whatever you can see you can just try to remove this okay so once it is removed now you can try to inspect this element now you're able to inspect so this option we can use from the Chrome browser other browsers I'm not sure but Chrome browser you can see that option so whichever element you want you can inspect and that also visible in the uh HTML okay so Earlier we have done like this

but once the selector Hub came so then it is more becomes easy understood everyone so this is how we can handle the drop down how to suggest drop down I will explain that later because I need to combine that with another topic how to handle the dynamic elements so in the topic I will cover Auto suggest drop down elements okay so this is all about select drop down boost STP drop down and hidden drop So based on this I'll give you few assignments today you guys can try them uh three assignments I will give it

to you first assignment okay go to this particular page so in this particular page you can see uh country drop down and state drop down country and a state so what is the requirement is first you need to go to this page and count to total number of options in the countries here just count to total number of options print all the options and select one of the option you can try this okay it is normal select dropdown it is just a normal select drop if you inspect this element you can see the select tack

you can Do like this now the second example hidden drop do again go to Orange HRM application log to this website once you login go to P so here we have seen job title right similarly you have something called employment status you can see freelance fulltime part-time so whichever you want you can select so employment status you can try to handle this DRP down employee status and the other one is multi- Select drop-down so in this application you have another drop down here below one colors in this there are multiple options this is also select

box if you inspect this element you can see the select tag options are there so the only the difference between this one and this one is here we can select only one option at a time but here we can select multiple options so so you can try to do it through automat okay so multiple options you can select in this multi- select drop down this is multi- Select we can say combo box this is also you can try colors multi selective box okay try these assignments for today's session and tomorrow uh we'll see Some more

options okay so that's all for today I'll stop here we will continue tomorrow session