Session 23 - Selenium with Java | Locators - CSS Selector

right so in the previous class uh we have 

seen the basic locators like how we can use ID then uh name link text partial 

link text and then uh tag name and then class so these are the basic attributes we 

have seen how we can use those attributes as a locators now today we'll see uh 

another type of locator which is CSS selector CSS selector and CSS is nothing but 

a cascading style sheets so normally this is used for uh designing the web pages like if 

you want to design web pages more attractive way uh normally web developers will use this uh 

technology called CSS cascading stylesheets like if you want to apply any colors the size alignment 

font so all these things will be done by using CSS selector so by using the CSS selector uh locator 

which is a method which is provided in selenium and through which we can locate elements okay so 

in CSS selector uh we can use existing attributes with the combination like we say uh for example 

in CSS selector it's itself we have a different type of combinations like in the last classes 

we have seen like individual attributes like IDs individual attribute and then uh class name 

link text right these are individual attributes we can see on the HTML directly but CSS we cannot 

directly get it from HTML but from the HTML we have to collect multiple attributes so CSS is 

nothing but a collection of multiple attributes uh we can create our own CSS selector so that's 

the reason it is customized customized in the sense we can create our own CSS selectors so all 

CSS selectors mainly uh use with a combination of tag name like suppose if there is an ID attributes 

available for the element so then we can locate that element by using tag and ID combination by 

combining tag and ID of the element suppose if the name is available for the element then we 

can combine uh tag and name similarly if there is a class then tag and class or suppose if there 

is any attribute any other attribute is available for the element then we can use tag with attribute 

combination okay so the CSS we can use along with the tag name with some attribute of the element 

okay suppose the ID is already available for the element then why should we go with CSS selector 

suppose by using ID if you want to write a CSS Lector tag and ID combination we can write so tag 

and ID combination means tag is suppose uh let's say I have an input tag and id id is there let's 

say ID is equal to some X so we can differentiate with like this x is an ID for example so the 

combining the tag and ID we can write CSS like this but if you already have some ID equal to X 

okay and we can directly use this ID attribute to locate the element but why we need to go 

with CSS again sometimes when you're working with the complex web pages single attribute may 

not be able to locate the element in those cases we will try to choose other options so in that 

case we can go with the CSS so in the locators concept there are different type of locators 

are available like there is no rule like we have to use only this particular locator in this 

particular situation it's not like that so there are multiple options are available and whichever 

option is appropriate you can choose that option suppose if there is an element the ID is available 

we can locate the element by using ID and we can also use CSS along with tag and input or we 

can write an XP so there are multiple choices are there so whichever option you can choose that 

is still fine the ultimate goal of the locator is we should able to locate the element or we should 

able to identify the element that is a main goal so what type of locator you are using it doesn't 

matter you can use single locator single attribute or can use CSS or you can use xath or whatever 

it is ultimately we should able to locate the element by why these all options are provided by 

selum because in the web pages complex web pages even though sometimes if you provide the right ID 

it may not be able to locate element or even if you provide the name correctly it may not be able 

to locate the elements in those cases we need to have some Alternatives so for that reason [ __ ] 

is supported xarts and also CSS okay so now we'll see how we can write a CSS locator CSS to locate 

the web elements okay so CSS is nothing but a cascading stylesheet so that is the full form of 

CSS cascading stylesheets and normally web pages normally designed by using HTML JavaScript and 

CSS right so in among those three Technologies CSS is the one of the technology through which they 

design the web pages okay now in the CSS we have different ways to locate the element different 

options are provided so first option tag and ID tag and class name tag and attribute tag class and 

attribute so these are the four main combinations which we have in CSS tag and ID tag and class tag 

and attribute tag class and attribute okay so tag is common in every combination and tag is common 

and also tag is optional okay even if you have just want to use by using ID if you want to write 

CSS you can still write it similarly by using class name if you want to create CSS locator you 

can still do it same thing for attribute and class and attribute so tag we can specify and also it is 

an optional even if you don't specify tag it's not a problem I'll show you so if you want to write 

CSS locator by using ID attribute so how we can write it tag name hash ID hash is a symbol which 

will separate tag and ID attribute so here we have to specify the tag of the element and which we 

have to capture from HTML and here we have to specify the ID of the element if ID is available 

then we can use this combination if ID is not available then we cannot use this combination 

okay tag of the element hash ID of the element this is one uh CSS selector and suppose if the 

attribute if the element is having some class name attribute class name then we can say tag dot 

class name this is a combination tag do class name so class name is nothing but one of the attribute 

of the element so if you locate an element with the class name then we can say tag of the element 

dot class name attribute of the element so that you can use this is another combination if the 

tag name is available and suppose ID and class name both are not available then we can take any 

other attribute of the element like uh placeholder or name or any other attribute other than ID and 

class name if you have any other attributes for the element you can use those attributes so how 

we can write it we can say tag tag name and uh the attribute and value we have to keep inside the 

bracket square bracket here we say uh attribute equal to Value this is a syntax so tag name we 

have to specify and inside the square bracket what attribute you are using for that element 

and what is that value of the attribute so that you can keep in the double quotations or single 

quotation it is fine so this is a syntax of the tag and attribute so here attribute value means it 

is anything for that element you can get it from the HTML any attribute whatever is available for 

the element you can get it so not only ID not only the name not only class other than this if you 

have any other attributes you can use for example name is there so you can use name equal to value 

of the name attribute that you can specify along with the tag this is a syntax and then we can also 

combine a tag class and attribute of the element so tag name tag and class how we can separate 

using dot tag dot class name and the attribute we always specify in the square bracket so in 

the square bracket specify whichever attribute you want to use and also specify the value of the 

attribute so this is a combination tag class and attribute okay these are the four different 

options are available in CSS so we can locate an element using CSS by using tag and ID tag and 

class tag and attribute tag class and attribute okay sometimes tag and attribute this combination 

is won't work for example then you can add some other attribute tag class and attribute okay so 

this is a combination so these are the four types of CSS selectors available and which is supported 

by using S all right so now uh we will see how we can use the CSS to locate the web elements let's 

go to eclipse and let's create new package just a second okay new package 23 okay so inside this I'm creating new class CSS locators okay so very simple and very easy also 

uh let's see we have to create our own locators so we cannot directly get it from HTML we can 

get the attributes from HTML but we need to form the CSS selector okay so let me take uh 

some application here to demonstrate the CSS selector and uh this is another uh type of 

e-commerce application and I'm giving you so many applications yesterday also have given one 

application so you can just practice uh on these applications okay there are so many e-commerce 

applications have there you can do practice on it all right so let's take this application and 

in this we will try to locate elements using CSS selector okay so the first of all uh let us 

launch our browser browser and open the URL of the application so I'm creating web driver 

variable web driver driver equal to new Chrome driver let's import control shift O is a shortcut 

key so this is imported all the required packages now we need to launch URL on the browser let's 

say driver. get and in the double codes we have to provide the URL okay so once you provided 

this URL then we have to locate the element and one more important thing guys whenever you 

are launching the web page just observe I'm launching the browser and then open the URL of 

the application you can see the browser window is open just like a just smaller window we can 

see the size is very smaller right sometimes you can't see all the elements and sometimes your 

automation skripts also might fail because all the elements are not visible in the small window 

uh if I window is larger like this then I can see everything right so how we can make it happen in 

the runtime so to maximize this browser window we have a method in the selenium okay so what we 

can do is driver dot manage method so from the driver we have to call one method called manage 

and inside this manage method driver. manage do window do maximize so there are multiple methods 

we have to call when I call manage method it will return some options object and from that we have 

to call window and this will return some window type of object and from that again we have to 

call one more method called maximize this will not return anything but this method will maximize the 

browser window okay let's try to execute and see now so better to use this command every time when 

you're launching the browser so what this will do this will maximize the browser window maximize 

the browser window driver. manage. window. maximize so now if You observe first it open 

the smaller window then it is automatically maximized okay so this is how we can use this 

command this is just for maximizing the window you can just additionally add this command to 

maximize the window all right now we'll see the CSS SCT as one by one the first one tag and 

ID tag and ID just a second all right so let's go to the page now in this we have something 

called search store there is a search box is available right so I want to locate this element 

by writing a CSS so let us look at the attributes of this element right click and inspect and 

here you can see some of the attributes are available so input is a tag name and uh even ID 

is also available okay so let me try to remove this okay so let's try to inspect this element 

search box you can see input is a tag name and uh ID is available so you can see ID value small 

iph search elements or Search terms small iph Search terms this is the ID available so normally 

we can use this ID to locate the element nothing wrong in that but still if you want to write a 

CSS for this element by using CSS if you want to locate this element so what it can do is you 

can just get this value ID value and tag name is what input so how we can write it can write 

driver. find element because we want to locate a single web element find element by dot CSS 

selector this is the option CSS selector is a method which we have to call and in the double 

codes and what is the tag name of the element input and separator hash and value of the ID is 

what small iphon Search terms so this is the tag name and this is a value of ID and this is the 

combination of CSS selector once you look at an element and if you want to pass some value in 

this search box you can pass it so how we can pass it dot send keys because whenever you want 

to pass some value in the input box we always use send Keys method so send keys and here I'm 

passing something called t-shirts okay so this is the entire statement so this will able to 

find the element and on the element we can pass some value in it so this is a CSS of tag and ID 

combination right so when I execute this it will able to locate the web element and it will pass 

the value now we can see it is enter some value in it and also as I said one more thing the tag 

is optional it is not mandatory to keep the tag name so we can write the same statement without 

having tag name so for example let's say you can just remove the tag called input remove this 

but it should hash should be there okay hash should be there this is tag and ID combination 

okay so here tag is a optional so I have removed the tag name and just provided hash the value 

of the ID that's it you can just run as a Java application okay so now it is launched my web 

page and maximized now you can see the text Val and one more important thing so before you are 

before using this selector CSS if you want to know whether this CSS is able to locate the element or 

not because once you have used here once you have executed then only you will know exactly whether 

it is able to locate an element or not but before using the CSS in the script before using it I want 

to know whether it is properly working or not okay then what we can do is go to the dev tools here 

and there is option called search so contrl F when you press contrl F or command F you will 

get one small search box here in the bottom of this window so here you can verify whether your 

CSS selector or xart is correctly identifying element or not okay so now let me put the CSS here 

tag name is what input hash and ID value is what small Search terms that I can specify now you can 

see as soon as I put the CSS it is highlighting the text from HTML and when I press enter you can 

see it is highlighted the element here as soon as you press enter it is highlighting the element on 

the web page so that means the CSS is perfectly working after working you can just copy from here 

then you can use it in your automation script so you can also directly verify that CSS or xath is 

correctly identifying the element or not from this search box okay just contrl F and you will get the 

search box all right so this is a one combination and the tag is optional even if you remove the 

tag name still it will able to locate suppose in the search box I'm removing the tag name still 

it is able to locate the web benefit okay yeah so ID always unique okay you won't find any duplicate 

IDs if you can find ID for some element that same ID will not be there for any other elements okay 

remember this ID names these attributes is most of the times they are unique ID is more efficient 

than name maybe sometimes name value will be same for multiple elements but ID is always unique 

okay all right so this is a one type of CSS selector with the tag and ID combination 

now let's see another combination tag and class see how how much time is over this we 

have discussed some time back you should ask the question that time itself now you are aware of 

it driver. manage. window. maximize is a command through which we can maximize a browser that's it 

remember that much okay so first we are calling my manage method so the manage method will return 

options and from this options we are again calling one more method called window and from this 

window it will return window object and from that window again we are calling maximize method 

so this method will maximize a browser that's it okay so manage is a method which is coming 

from web driver itself that's the reason we are calling manage from driver object and again 

this will return options class object that's the reason return type is options from the options 

class again we are calling window method and this window method will return window type of a 

object window class object these are predefined classes from this window we are calling maximize 

method okay this is the chaining of methods one method will return return something on top of 

it we apply another method and top of it we are applying another method so three methods we 

are calling all three methods are not belongs to same class or same object okay so if you have 

a question immediately ask me okay don't delay that so I already discussed another topic again 

I'm going back and again explain the previous one so don't do like that if you have any query 

immediately ask when I explain about something and after 5 minutes after 10 minutes again you can I 

cannot go back and explain again okay people will have confused again so ask question immediately 

whenever you get okay all right so this basic command driver. manage. window. maximize so 

this will maximize the browser window so this is already designed by selenium so we don't 

need to go what is class what is an object it will return return we don't need to do anything 

so just call this method it will maximize window that's it okay so now the next one so is this 

clear t everyone so tag and ID so before going for the next one tag and ID how to use tag and ID 

with CSS selector please confirm in the chat box everyone again I don't want to come 

here and again explain so if you have any questions let me know now itself before 

going next one the tag and ID in this again tag is a optional just specify the value 

of the ID along with hash so what is the syntax of of this tag hash ID this is 

a syntax all right so now let's move on to the next one tag and class so what 

is the syntax tag dot class name tag. class yes so even if you're not using tag name 

you have to use a hash definitely you have to use hash otherwise it will not be become CSS 

okay right so now let's move on to the next one tag class let's look at the same element one 

more time and uh if you look at the same search boox element you also have something called 

class attribute you can see search box search uncore box ion text u i autoc complete iph input 

so this is all class attribute so we can locate this element by using this class attribute along 

with the CSS tag and class okay now let us write it here first before using in your automation 

first let us check whether it's working or not so tag name is what input dot input Dot and what 

is the value of the class this is a value of the class attribute let's copy this and put it here 

okay then press enter see input is a tag name input is a tag name and searchbox text space UI 

iph auto complete I sometimes whenever you see the class them like this sometimes whenever you 

see the class name like this if I look at this this is very lengthy class name and again which is 

having two parts this is one part and after space there is another part okay if you see this kind of 

a class attribute can just remove the second part we can just provide only first part second part is 

not necessary for some type of items and the first part you can take and then you can specify here 

so input dot I just specify search iph box iph text so this will able to locate the web element 

so now it is working now I'm using this in our automation so can say driver dot find element by 

do CSS selector okay in double ports tag name is what input dot class name so tag name is specify 

only one time so tag name is input dot search box text so this will return the web element on top 

of it again I'm using send Keys method okay send keys off I can pass some value like this so so you 

can locate a web element using tag and class and again tag is an optional and if you don't want 

to specify the tag name you can simply remove the tag name but dot should be there it should 

start with the dot okay let's execute this one second okay now it is able to locate the web 

element so this is a way we can find element by using class name tag and class okay one more 

thing so in the last class I have told you tag name is normally used for what locating multiple 

web elements or group of class name will be same right most of the times class name will be same 

for group of elements or multiple elements in that particular case all those elements may 

not have same type of tag name okay sometimes or sometimes you may have same tag name so by 

using this locator you can also locate group of elements by you specifying suppose let's say 

I have a 10 elements and all 10 elements are having same tag name same class name then this 

particular locator will able to find group of web elements okay if multiple elements are having 

same tag name same class then you have written CSS like this it will able to locate group of 

elements if if it is able to locate a group of elements here you can use find elements also 

there is a possibilities there okay and you can locate Single web element or you can locate 

group of web elements if the class name is unique for specific element you can locate 

the single element if the class name is not unique or not specific to web element then you 

can use it for locating group of web elements okay so depends upon the options you can use it 

so this is one type tag and class comination so uh yeah in case if you still want to both have 

values entire value is it possible no no after the space whatever is there you need to cut 

that point okay it's sometimes if you have a spaces in the value it cannot locate so it is an 

example suppose I'm taking the entire value here after the dot I'm putting everything and press 

enter so it cannot locate the element it cannot locate element because after the space basically 

it is truncating the value so after the space it is consider if it considered it cannot locate 

so that's the reason we have removed that part after the space whatever is there you can simply 

remove it then it will able to locate the element okay if you provide the entire value along with 

the space it cannot locate the element in CSS especially okay so any example means you can try wherever you 

want suppose if the class is same okay let me put only class here let's see what are elements 

is matching So currently this class is matching with only one element only one element so that 

is a reason uh you cannot you can find only one element here so if I look at some other 

application let's say let's go to demo open cut application okay so in this let me find 

uh some element let's find this uh header element okay so we can just find so list in line 

item is there so let's use this class name okay now contr F and if I using this dot class name 

you can see it is matching with seven elements one of seven so seven element it is matching and 

if you want to use a tag also you can use what is the tag name of this is Li Li is a tag name so 

tag Dot and class attribute so if I write this x path so this sorry if if write CSS like this 

it will able to match Seven Elements you can see four of seven and five of seven six of seven seven 

of seven so you can write like this so this will able to locate group of elements okay this locator 

is able to locate group of elements but in our in our case currently in this situation this class 

is not same for all other elements okay so with this class name we can locate only single element 

and depends upon the type of application depends upon the element depends upon the attribute it 

will work so accordingly we have to keep changing our uh strategy okay so we can also write this 

locator to find group of web web elements and if whenever you want to find group of web elements 

you have to use find elements okay this is the one now the next one tag and attribute suppose ID 

is not available class is also not available even though if they are available no problem you can 

still use it but other than ID and class if there is any other attributes are available for that 

element you can also use any other attributes other than ideal class with a combination of 

tag okay so for example let's say for the same web element search iPhone store if I in this 

element uh you can see here other than ID and class what all other attributes are available 

for this element type is available name is also available placeholder okay area iphon label 

and some process ID so these are all different attributes are available so you can use any of 

these attributes to locate the web element and again when you're choosing the attribute make 

sure that attributes always should be unique so for example uh if I take uh area iph label 

so this may be same for other elements and FD process ID maybe this attribute keeps changing 

dynamically so we should not take such type of attributes so placeholder you can take or name 

also you can take auto complete you can also auto complete is also on or off it can also keep 

changing so we need to take the unique type of attribute so here we can take place folder or 

you can take name attribute so by using this any attributes you can locate element for example 

I'm taking placeholder copy the attribute along with the value both attribute and value so how to 

write the locator here is First tag name input is my tag name and the bracket copy exactly as it is 

placeholder is an attribute equal to se store is a value so this will able to locate the web element 

one single web element it is able to locate so you can take any attribute similarly name also you can 

take name is what Q so instead of placeholder you can take a q equal to Value uh name is name is 

an attribute the value of name is what q that you can specify and this also will able to locate 

element so you can take any of the attribute any of the attribute of the element let me take the 

placeholder and then let's use it here tag and the attribute okay so we can say driver dot find 

element by do CSS locator CSS selector in the double codes you can specify and one more 

important thing so in Java normally double codes are not allowed inside the another double 

codes okay so if you still want to use double Cotes inside the double quotes you have to 

use something called a regular expression like this before the double code inner double course 

you have to specify one backward slash and same thing before the ending of double CES you can put 

one bracket and if you don't want to know these brackets and everything simply you can put that 

value the single quotation single quotation you can give okay now this is a tag name where is a 

tag name so tag name is what input is a tag name and attribute and value both we have to keep 

inside the square bracket okay now CSS select R Open Bracket input and uh placeholder equal 

to search store and this we have to close it here this is a syntax so so this is the tag name 

and in the bracket attribute equal to the value of attribute so attribute and the value of the 

attribute we have to keep in the square bracket the whole thing we have to keep inside the double 

putations and then we can pass some value in it okay that's it so we can locate element 

by using tag and at attribute and again tag is optional here tag is a optional 

so if you want to use without tag name you can simply remove the tag 

name but bracket should be there so the attribute and the value both we 

have to keep inside the bracket now execute okay now we can see it is entered 

some value here so this is all about tag and attribute so what is the syntax tag in 

the bracket we specify attribute equal to Value so that value we should keep in single 

quotations like this this is a syntax okay so tag and attribute is this clear so you can take 

any attribute of the element any attribute of the element how about using this for class and ID 

that is the third one next combination so class and ID no com class and ID no combination like 

that okay class is different ID is different if you want to combine class and ID you can go with 

the tag class and attribute combination in in case of attribute you can specify ID or any other 

attribute okay so ID and class we cannot combine values in single quod or double C when I use in 

your automation script you can put in the single quotations and if you still want to use in double 

quotations you can still use it but the problem is in double quotations within double quotations 

are not allowed in Java so if you still want to use double quotations before the double quotation 

before putting this you can use one backward slash like this and here also one more backward slash 

is required okay this is additionally we put some regular expression then it is allowed if you 

don't want to put these brackets remove them and simply you can put that in the single quotation so 

single quotation is allowed this is how we can use tag and okay now let's move on to the next one 

tag class and attribute tag class and attribute tag class and and attribute and when do we go 

with this approach so tag and class we already have so tag and class this two two combination 

we already have but again why we need to go with the tag class and attribute okay so let me tell 

you an example so that we can easily understand so when it is required tag class and attribute so 

let me tell you this with an example let us say I have uh two input boxes let's say this is first 

input box let's say this is our username and this is another input box this is the password element 

okay two elements I have so tag class tag name is what so the HTML of this element is like this 

in input okay and uh input class name is there so class name is equal to okay suppose a BC and 

some attribute is also there so for example name is also there so name is equal to XY so something 

so same thing here also there is a tag name class equal to okay class equal to to some 1 2 3 and 

the name is also XY Z okay now I have like this so if you want to write CSS for username how we 

can write normally how we can write let's say class is also ABC here okay so you can write CSS 

by using tag and class combination how to write CSS for tag and combination tag is what input so 

input dot what is the value of the class here ABC I say ABC so when you write CSS like this tag and 

class I have a two elements now which element it will match with the same tag name same class I 

have a two elements now which element it will match basically this is able to match group of 

elements right so this locator is matching two elements But whichever element comes first on the 

web page it will go and locate that element that is fine but by default this locator is matching 

multiple elements or not yes so I want to exactly locate element I want to locate only username 

or I want to locate only password but a tag and class name is same for both elements then what 

I can do I can find some other type of attribute which is different which is different so here you 

can take the name attribute if I take the name attribute the value of the name name attribute 

is different than first username and password so Additionally you can take any other attribute that 

will differentiate these two elements why because tag and class is same for both elements I cannot 

locate specific element so if you want to look at specific web element additionally we will take 

another attribute which is different than first one and second one so here I can say name equal 

to when I say XY Z that will go and find the first element and if you provide a name is something 

the second element name that will go and find the second element so what is the use of specifying 

some extra attribute here is to differentiate the web elements to differentiate the web elements 

we can use additional attribute and suppose if your if your requirement is uh to find a group 

of elements still that is this is fine okay if a requirement is to find a group of elements this is 

fine but I want to find a specific web element by using same tag and class not possible so then we 

can add some extra attribute so that's the reason this combination came tag class and attribute 

you can use any other attribute of the element and this attribute will be used to differentiate 

the web Val okay understood everyone so why this attribute is required additionally if you even 

though if you have a tag in class some attribute is required whenever you want to differentiate 

the web elements so that is a point all right so now let us write this locator for the same 

element search box so what is a tag name is here input is my tag name and what is a class for this 

element let me inspect this element again this is the class let me copy this some part okay so 

input dot class and additional attribute I'm taking so in the bracket I can take any other 

attribute like placeholder you can take name also you can take so here I'm taking name equal to 

single or double quotations you can put value of the name now this is a combination one element is 

matching so this CSS you can use to locate the web value tag class and attribute driver do find 

element by dot CSS selector and specify dot send keys and pass t-shirts like this okay so 

three we can use and again tag name is optional tag name is optional here so if you remove the tag 

name you can still remove it so I can just remove the tag name but dot should be there okay dot 

class and attribute and the value of the element execute yes every time you can check it 

manually whether it is the locator is pointing to the element or not and then you 

can use it in your automation okay and if you are confident enough then you can directly use 

it in your automation but you're not confident better to check it whether it's working properly 

or not in this box and then you can use it later okay so this is how we can use the combination 

of tag class and attribute so these are the different combinations which we can use as part 

of CSS locator tag and ID tag and class tag and attribute of the element tag class and attribute 

of the web element okay so is this clear everyone so you guys can explore this on different 

applications if I want to show you this in each and every application this will take two 

to three sessions okay so I I shown you how to use it and how to locate the web elements 

how to write the syntax and everything so as part of assignment you have to continue this 

you have to practice it otherwise you don't know okay if I show everything what you will 

do now so just by listening you want won't get anything you need to put this in the 

practice take any website not only open C you can take any other websites and try to 

find the elements by writing the CSS okay fine so what is an advantage of tag and 

class tag attributes I already told you it is a reputation can anyone tell me 

when we have to use tag and class when we have to use Tag class and attribute what 

is the difference between this one and this one with an example I have explained just now 

I have explained not even five minutes just two minutes back I don't know whether you're 

able to hear or not so guys can anyone tell me what is the difference between tag and 

class when to go with tag and class and attribute just now I have given example see if I use tag and class sometimes you may able 

to look at group of elements because class name is same for all the elements right most of the 

elements so when I use tag and class sometimes you may locate group of elements and again if you 

want to differentiate them if you want to locate specific web element then you can add additional 

attribute of the web element so by using tag and class you can locate group of elements as well 

as single web element possibilities are there but when I use Tag class and attribute you can locate 

one element one single specific element that is a difference okay so is this clear 

everyone so far this is all about CS selector okay and this is a customized locator 

means we can write our we can write our own locators okay so I'll show you how to use 

selector H uh how we can reduce our effort how we can make them very easily how we can 

automatically generate this CS selector using selector Hub I'll tell you so selector Hub 

is a tool from selector Hub itself and uh basically it is loc it will automatically find 

the locators so it will reduce lot of our effort okay so if I go back and find the selector Hub 

just type selector Hub and you will go to the Google extension selector Hub is supported all 

kinds of browsers so you will navigate to this particular location this is Chrome web store 

you can go to the Chrome web store and you can search for selector Hub so I already added 

this selector Hub so that's the reason I'm not getting that option in your case you will 

get add to Chrome you will get one option here called add to Chrome so once you click on it 

let me remove this I'm again add okay so now you'll get this option so once you click on this 

option add to Chrome now it is asking for adding to Chrome ADD extension click on ADD extension 

so once it is done so the new uh selector Hub will be added to your browser so now let me 

show you how we can use it so let's open any website okay so as soon as you open the website 

or as soon as you open the browser you can see this icon xath plug-in to auto generate write and 

verify xath and CSS okay so if you're not able to see here you can just go to these extensions 

and here you can find it so I already have paid version also selector H Pro selector Hub so 

you can just pin it so then you will able to see here okay this is a option which is available 

just click on it you will see one window like this this is selector H window here you can see 

see selector H and other place is can just close this and uh right click on page and inspect and 

in this Dev tools itself you can see elements console sources and everything right you can 

just see here if you're not able to see here click on this Arrow marks and here you can see 

the selector Hub just a second sorry not here Here style computed layout you can see right so 

here click on this here can see the selector have okay so there are two places okay first let us 

use this one and then I will show you another one now this is a selector Hub window and how we 

can locate the web element in this can just take this Arrow Mark inspector and whichever element 

you want to locate you can just show that element okay now I want to locate something called uh this 

particular drop down okay so I'm just clicking on an element now if we go back to the CSS selector 

Hub you can see here it is giving CSS selector and which attribute it is using when you click on 

it it will copy here and if you press enter this will give you how many elements are matching so 

which one which combination it is using can you tell me id okay ID because hash whenever you see 

hash that is representing ID dot is representing a class square bracket is representing attribute 

okay remember these three are the thumb rules okay and this is a relative CSS selector is generated 

relative expath is generated and many more are got generated and apart from this it will also 

show you other stuff IDs and everything just a okay so we can just configure this so whatever 

attributes are available for that element it will choose for example I'm searching the input box 

okay now we can see it is showing all this stuff relative CSS selector X paath okay so all this 

stuff it will also show you the HTML here so everything it will automatically display and other 

attributes also it will display if I look at this so this is relative CSS selector X paath and if 

I scroll down it also captured the ID okay name attribute class name ABS X paath tag name okay so 

you can see tag name it is giving seven what does it mean only if I use this tag it is matching 

Seven Elements so when to use this tag name if you want to locate a group of elements in the 

last class we discussed if you want to locate a group of elements we use this tag name seven 

elements are matching okay this class name we can use with this one element is matching and 

the name ID okay and other also there JS path JY these are all for other automation tools not in 

selenium okay and relative xath and CSS selector so these are all automatically generated by 

the selector Hub and if you want to verify whether they are correct or not you can just 

double click on it it will copy in the box and press end it will show you how many elements are 

exactly matching okay so this is very very simple this is free version is available and paid also 

available so free version is available uh enough for now but if you're really working on realtime 

environment in the companies then you can they can buy the paid version okay there are some more 

additional features are there in the paid version but I will also show you that after some time 

but these are the basic stuff okay so you can install the selector Hub and you can explore 

this so sometimes Dev tools will not give you the accurate results so always we cannot depends 

on only Dev tools option so better to go with the selector Hub and in this you can easily get all 

types of locators and it will easily gives you the options okay so try to explore this and 

I will also show you some more options in the next two sessions we will try to explore more 

options in this it will a lot of our manual effort okay this is one thing and the next one 

this is the way way we can use it and other thing is okay let me show you one again let me right 

click on page click on inspect as soon as you click on inspect you will see two windows by 

default here HTML you can see uh this is which this is not exact HTML we can call it as a Dom 

document object model OKAY in the next class I will explain what exactly the Dom means because 

xath Works based on the Dom document object model the next class we will see and this Dom will 

be loaded at the run time as soon as you browse of web page this Dom is got loaded and there is 

another window you can see here which is having some Dev tools options in this you can see the 

selector Hub option and this is the window okay so in the selector hub you can find all these 

options so what you can simply do it you can take this inspector this is the arom mark and 

highlight whichever element you want to locate suppose I'm locating this image see as soon as 

you click on image it is automatically generated all kinds of locator and whichever you want to 

use you can use it suppose you can use CSS see here CSS got generated by using alt attribute 

IMG in the bracket it put alt you can see this and what which combination It Is Tag and attribute 

combination tag and attribute combination and also if I scroll down it will show you the tag name 

with this IMG tags 26 elements are matching and this is abex path okay there is no ID and name 

attributes so it is not displaying them so this is the way we can use select our and one more 

important okay this is there fine but suppose if I open another application like this then 

selector Hub will not come here again we need to inspect okay again we need to go here again 

we need to click on select our Hub then you can see it so whenever you open the new page select 

our Hub will not come so you need to open the selector Hub every time for every page okay so if 

you just want to avoid that part what you can do is instead of open selector from from this Dev 

tools another way is there so you can have this small icon which is a plugin which is added at 

the top of the page can just click on it then one window will be open like this okay so one window 

will be open like this here now even here you can check suppose if I take uh inspect any option for 

example I'm inspecting uh anything register link inspect okay once you get inspected you will 

get this now tools window again one more time you need to properly align this okay take this 

Arrow Mark clicking on this register right so now we can see all the options are automatically 

generated relative selector and relative xath all those things now if I open another tab see still 

this window is open so you can open any number of tabs like this still this window is stick to the 

browser so it will not disappear okay so like this can use it suppose here I can try with some other 

application and now here we can locate any other elements okay now it has 

got generated other type of locators right so this is another option which 

we have to use it either you can directly uh open this icon and this is fixed for every web 

page or else you can just go and uh get it from the Dow tools yeah selector here you can get it 

okay multiple options are there so it will just update you can just keep trying so even if you're 

opening another page you need to refresh the page okay let's take another orange HRM application 

okay so let me remove this okay open this window now go to the second box in the second box this 

window is open now you just need to refresh it and once you refreshed you need to take this icon 

so inspect page here you need to take this inspect page option from the selector Hub here it is take 

this and locate the element okay now it is changed you need to take this inspect option guys okay 

so this will do everywhere it is there you can see this is the one if I take this inspect any 

element it has got changed okay so try to explore this and there are more number of options are 

there in this we will discuss in the next lesson like attribute code form page Expo healing there 

are very good number of features are there so in the coming sessions I will discuss each and every 

feature from the selector Hub we will discuss only selector Hub in separate session because there 

are lot many features are there it will reduce our time and effort a lot in our automation especially 

when you're creating the Frameworks automating the test cases it will help us a lot otherwise it will 

take a lot of time to creating page object classes and everything especially when you do framework 

concept okay we'll see that in the next coming sessions so this is how we can simply use selector 

Hub you can get all the attributes also and you can check whether the locator is correctly written 

or also so we can also cross check so if you want to get this simply what you can do is just press 

F12 button or right click on page anywhere inspect or you can just right click here also you can see 

in the auto suggest menu you can directly get it from here this is another option so if you want 

to get get ID for the element okay for example this is a third approach guys two approaches I 

have shown you this is third approach suppose right click on the element on the selector H 

you can see you can directly copy ID you can directly copy name xath csss okay there are all 

options are there so you can directly get it from here or else you can just go and uh inspect and 

you will see the window here and styles computed layout event listeners break points if you're able 

if you're not able to see here click on this Arrow marks and open the selector Hub okay so you can 

look at here and you can check so this is the one way okay another way is you can directly open 

the plug-in like this here also we can check so these are the three options are available one is 

here another one is what you can get it from the dev tools by using inspect we can so how can we 

have selector have tab next to the element tab so that's what I'm showing here see as soon as you 

inspect okay and go here and select our tab so here you can see the selector Hub Tab and on the 

elements tab you cannot get okay here there are some more options are there here you will not 

get there is another window here you will get bottom window so because this is a Dom structure 

this is actually Dev tools option Styles computed layout these are all actually the dev tools 

options and this is the Dom elements consoles sources right these are all called Dom actually 

okay and you will you will get the selector Hub only in the dev tools not in the Dom structure 

there are two windows two separate Windows you can notice here this is for Dom this is for Dev 

tools this is the dev tools here under Dev tools you can see the selector Hub okay so you can go 

with these options and explore with the selector Hub yes so Dev tools you don't need to use 

actually at the beginning level I have shown you the options but going forward we never 

use Dev tools first of all not at all needed if you have a selector Hub Dev tools not at 

all needed and moreover the dev tools you may not able to locate some type of elements 

like hidden type of elements okay and Shadow Dom type of elements in the coming sessions you 

will understand what all all those things Shadow D type of elements inner frame elements okay 

these type of elements we cannot get it from the dev tools so selector Hub will help us 

a lot in that particular case so Dev tools you don't need to use at all you can just 

leave it at aside and you can directly use select right so you can just write even if 

you whatever website you are using guys in all websites you can see Dev tools options you 

can see Dom structure you can see selector H everywhere you can see but you need to open the 

options you need to open right options yes CSS selector is exactly same as relative CSS yeah they 

are same okay so that is all about CSS selector in the next class we will discuss more about xath 

xath is very huge concept and very important also because 80 to 90% of the times we will prefer to 

use xath not a normal basic locators or css xath will work very very efficiently and by using xath 

we can also locate elements those attributes are dynamically changing suppose today there is an ID 

and I have used that ID and return some locator so tomorrow ID is got changed then our locator will 

fail to locate element right so how we can handle such type of scenarios by using xath locator so in 

the coming session next session and another next two sessions we will mainly focusing on xath 

locator okay so I will stop here for today's session and uh as part of assignment what you 

have to do is take this open cut application okay this is your assignment so take this application in this 

application try to locate some elements okay you can see the image is there input box 

and the menu options and product images some footer links are there there n number of 

elements are there so try to find the elements try to use these locators okay so all these 

locators in this particular application try to write CSS locators to identify elements it can 

be any type of element no problem but you should cover all these type of locators tag and ID tag 

and class tag and attribute tag class attribute everything you should cover try to write CSS 

locator to identify the web elements in this particular web page any combination but try 

to cover all the combination not only one or two just try to cover all the combinations 

whatever I have told you here all right so let us stop here for today's session and then 

uh we will continue in tomorrow's session