Session 31 – Selenium with Java | Handling Different Ty… — Transcript

So in 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 a most important topic. So let us see because there are different types of drop downs, we will handle them in different ways. Okay? Some predefined methods are 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 Bootstrap 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 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 have Bootstrap dropdowns and hidden dropdowns. So these are the two latest technologies, but the old selected dropdown is an old one, and sometimes you can see select drop downs. Sometimes most of the times you can see Bootstrap 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, 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 div tag. Okay? And other than div tag, sometimes you can see button tag or some other tag. So those all come under Bootstrap or hidden drop down. Okay? If you're able to see select 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 Bootstrap or hidden drop down. Okay? So I'll show you a sample example how we can handle these three types 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, 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 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. 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, 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 select tag, you can see multiple options. So each and every option is a web element. Okay? Now we'll see how we can handle this type of dropdowns. So let's go to Eclipse, create new package. So I'm creating new class select drop down. Okay? So now we'll see how we can handle the select drop down. 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 wait, 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 options from this drop down like this, right? So this is 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 values. 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 available in 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 tag is there, class option, class attribute, ID is there. So if I go back and see the selector hub, and which is given XPath by using ID attribute, it is given XPath for that element. So I'll capture it and try to find that element driver.findElement by XPath. 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 capture the drop down web element, but the next thing is we have to choose one of the options in this dropdown, right? So it is not directly possible. So we can capture this element as a web element drop down, 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 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.openqa.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 types 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 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 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 method. Only one of the methods is enough. Three options are available, three methods are available. We can use one of the methods: 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...

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