Different Locators in WebDriver (ID,Xpath,CSSSelector etc) - Selenium WebDriver Session 3

so yesterday we have seen that selenium sessions of driver basics dot Java not how to launch Firefox or Google Chrome so Firefox I let you know how to do that some versioning problem in my laptop so but that the same step that you have to follow in your laptop and for Chrome also the same I will drive or equal to new chrome driver and then you have to launch the chrome and to the title I mean enter the URL get the title and everything and then a couple of things are there it's very very simple so ok so let's move further that so far we have seen that okay how will you browsing is getting on to the URL and getting a title but what if we have let's see some form is there we have to fill a form so to submit the form and to fill the form we have to enter text fields and some values into text fields we have to select the drop down values we have to select the check box write something how will we do that can you receive your new two at a time so whether that's important ring which is in every manual testing if you are doing like you are filling a form you are submitting the form now filling the page so entering some values right so same thing we have to do it in selenium so how will we do that so first I will give you an idea what do you have to do on Firefox you have to download two things on Firefox so first you have to open google.com what you have to do you have to download two plugins on Firefox first plug-in is called Firebug download sin right Firebug download click on this and just click on add to Firefox okay so I have already added so I'm going to do that so first thing is Firebug okay second thing is you know to download fire-pot okay again it's a small plug-in on firefox again add to firefox it will ask you to restart your Firefox and then your firefox will be launched again so these two things you have to Firebug and Firebug that you have to okay these two add-ons you have to download so once you download it properly after that you will see one icon over there on Firefox this is called bug ID and can you see the Firebug icon you just need to click on it right now it should deactivate it you have to activate it so just click on it and you will see that this particular screen will be open at the bottom and you have to click on this file path okay now if I open any web site let's see this is a site half ebay.com this is a shopping site this is the acquired company by eBay so simple when shopping site is there right and what I will do I will go to its sign-in page okay and I will go to its registration page right so let's say on the discussion page this form is available by I am number of text fields and drop downs are there okay and then again drop downs and check box where then button is there some links are also available so how to perform action with these elements okay so to perform some action on these elements we need some properties of these elements so that we can tell it to selenium that okay this is a property and then perform action action means if it is a text feed you have to fill the value if it is a button or link you have to click on it right the same way so the same way we doing manual testing also that if it is a text field I have to enter something that she test right like this we have to enter something here so but I want the same thing has to be done by selenium so how to do that so two for doing this thing we need this Firebug and fire path so once you open this Firebug and fire path this is the spy button this is called inspect button once fire button so just click on it and you can inspect like this you can inspect any element first name last name street address you can expect this image also you can inspect this text also okay so with this particular inspect icon you can inspect any element so let some inspecting first name so you will see that the moment I inspected okay it will generate this blue line okay that stable code it will give it to you they are talking what exactly the corresponding HTML code is available for the first name field so always remember one thing in the first name field also there they are two things this is the label so I'm not going to spine label despite this particular field text field because I have to enter the value in this particular field right so what we have to do we have this input and blah blah blah some information is there now what we have to do we have to first understand what exactly this okay HTML code so the moment you aspire this particular field it will generate this blue line okay it will highlight this line so immediately after this bracket can you see that one angular bracket is there this is called immediately after this input is written it means this is the input field this input is also called HTML tag if I ask you what is HTML tag or first name you just immediately is and you will see that imagery after angular bracket whatever is written it's written input it means then input is the HTML tag of first name if I ask you what is the street address HTML tag again input okay if I ask you what is the HTML tag of this select field so this is called selected not input now this is selected okay if I ask you what is the in HTML tag for this image half.com so IMG immediately after the bracket whatever it is written this is called HTML tag okay so just note it down it's very important we have to spy this and immediately after the bracket angular bracket whatever it is written okay this is called input this is called HTML type of that particular element okay and see insulating everything is called element all these objects are called element of element either this image this field this text field whatever whatever you can see on the page you can spy and again everything is called a web element so what is the first name of element this what is HTML tag input and what are the and other things like ID equal to this name equal to this so I is equal to this value equal to blank and other things these are called properties or attributes so if I ask you what are the different properties in HTML tag of first name so the HTML tag of first name is input and these are the properties and by using some properties we can perform some action on these fields got it so these are called properties ID equal to this name equal to this size equal to 32 value equal to blank this and type into text okay and each and every field having some different property or some other property or some less property or you know some more property let's see if you see this email address for email address we have input tag ID equal to this name equal to this and we have some other properties like on on copy equal to this on bass equal to this something like this okay so for in each and every field we have HTML tag and different properties now I have to enter something here in first name how will I do that ok so again and create a new class let's see my class name is locator concept ok and what I will do simple and we will launch in Google Chrome so I will take this code from here to here this code will remain same on this we have to download this code chromedriver toward exe you have to give the part web driver driver equal to new chrome driver and driver dot enter driver or to get google.com I'll take this URL ok so I'm going to take this URL copy this and paste it away instead of google.com see if we create a function for this name in and keep all that concerning 1 that will go write function for what needs for this launching the Google Chrome how will you create the function so I will write a set of code under that function and I will just all that function over you yeah yeah that even so you can do that okay okay okay so that is all so you can do that but function is always used when every time it is required okay so once you have to use a rapid same code again and again but this code in this particular program will be used only once so you can use it like this and it's up to you okay you can create a function also you can write these to write in that function you can call that function okay okay but the secret be like this first you have to set the property always remember and then launch the Google Chrome like this web driver driver equal to MU Rong driver and then driver or gate is always used to enter the URL whatever the URL is this is the URL okay and entering over here so let's see till here it's working or not so let's run this program you will see that when Google Chrome will be launched it got launched and its entry that you are and NVR in this page now right so so far it's working right now we have to enter something on so I am going to close this now we have to enter something on first name so we let us fire this and we know that okay this is the input field a number of attributes are there so now we are on the page what we have to do you have to enter something on first name so we have another method driver dot by element method is there okay driver dot find element method is there and then we have on inside the driver defined element method we have we use by class B capital by class is already available in selenium by dot we have rather method X taught okay by dot X path and you have to give the expert so how to get the expert this is NC that X is equal to this this is X partner to take it copy this paste it over here and repeat don't worry okay so driver dot find element by dot word by dot X but X bar you will get it from here and don't take this dot okay Expo should I start with double slash so don't take this dot okay and dot what is the action you want to perform so I want to perform I have to fill something so in selenium if you want to enter something in a particular text field and P you send keys nothing send keys and what exactly you want to send see my first name is Tom okay I'll repeat what you have to do driver dot find element is the method driver dot find element method is available in webdriver so we are accessing through the reference object reference driver dot find element inside the bracket what we have to write by class is there by a dot by using what by using X part and this is expert so till from here to here it will give you one web element okay it will give you one web element and on this particular web element what exactly you want to do I want to perform send keys and I want to enter Tom okay same thing for last name what you have to do now the code will remain same for all the element driver dot find element by a dot X path and X path of second element means last name wrong in Alex by this and see this is expert on getting just copied as X path and paste it over here and dot again send keys because this is a text field and last name is let's you Peter right after that let's see we have street address so what again I despite is street address is this and copies is expert okay don't take dot again same method driver dot see find element by dot text path be capitalized always run whereby is a class by Road expat X okay by using what experts so this is expert and dot send key let the addresses negative okay driver not find element by or expert address okay MDOT sign keys and this is what we are passing so let's run this program and let three it's working or not so you will see chrome is getting launched entering the URL and then it will fill the value can you see that Tom Peter and the street address is getting filled right similarly we can fill the value in other fields also like that for select button how can we use the layer and coming on that point okay so this is only this is what text field now by using expert we are doing that okay so first locator is XPath we are using but what we are using XPath this is the first locator so there are eight locators are available in selenium you can use any of them but there are some varieties which one should be used which one should not be used okay which is recommended which is not recommended so the first is expert it's very important to understand these things first it's expert okay Donovan one two when we inspect an element at that moment if it isn't text field then we generally use XPath know it's not compulsory okay it's not compulsory that if textual is there then only we have to use X month I am coming on that point now that's important thing and covering you will understand okay the second thing is ID how to use ID so ID is another locator so let's see I do not want to use expert okay for some reason I'll tell you what is the reason so let's say I'm commenting these three lines I do not want to use expert okay I want to use ID again I have to first name so same method driver dot final element by dot you will see IDs also their ID see earlier we were using XPath write this particular suggestion now you have to use this method i divided toyota by dot ID so first I will check I respect this first element I'll check IDs various buyer ID bit first name is there I copy the value of ID copy pasted over here first name then dot again this is a field so after you send key sin Keys is what Tom okay now same thing I have to do it for last name so again driver dot find element by dot by dot one PI dot ID okay ideas for last name ID is last name paste dot sendkeys n Peter right so this is how we can use ID so let's see H working on see earlier we were using by dot X but now we are using bio dot ID so the XPath index is like this this is X 1 and the ID is only simple string will be there okay so abide or ID but what happens sometimes ID is not available okay sometimes ID attribute is not available in that case we have to use XPath okay so it depends I'll tell you what is the priority okay my first cover all these locators and then I'll tell you so by Road ID send key storm so let's see it's running it's working on out see gendering tom and peter right so binder ID also it's working okay fine another locator is name so let's see I don't want to use expert I don't want to use ID also I want to use name so again driver dot find element by dot name is this conceal name so what is the name I aspire for small C name is the name is equal to force me see if name is not available then we cannot use by dot name if it is available there that sir we are using by dot name okay so by dot name copy this and dot again spend kita Jen gauge is what lets you know same thing force last name driver odd find element by dot name name of last name this so this is name is equal to lastname and copy this name equal to this and not send keys engine gauges eater see guys I cannot use this by dot size or by dot value because there is no method in by class so if you see up dot control space class names CSS selector one two three four five six seven eight only H locators are available okay by Road ID by dot name is there you can see that by dirt ID by dot name is there by Road XPath is there but there is no by dot value or by dot this thing by dot size of biotin excellent so you cannot use the these kind of attributes by class okay so by your ID by dot name you can use okay so whatever the name is available just copy and paste it over here and send Islam so let's see it's reading or not with by dot name also it's launching Google Chrome URL and trip first name and last name right so they buy that name also we are able to do that okay the third will third is by that name okay similarly we have another is rather thing is link text this is only and only for link okay so let's see I want to click on the link let's see this this link why maybe sign in link I want to click on this link so if I spy this link so you will see that first of all I can use how what are the different things I can use I can use by Road expert also I can use this expert and I can use that but this expert is not recommended to use this is not a good expert right so this expert is the hierarchy bit B's expert it's coming from here somewhere from HTML then body any cheated HTML then body then after body go to dev number one after body go to Dave number one then go to div number five go to dev number five and then dev number two then a link is available so this is not recommended why hu tomorrow sign-in link is has been shifted from here to here okay from here to here or from here to here let's see so this thing will be disturbed it will be Devon or div 10 and this dev one dev two will be the for a day five right so so the position of this particular element if it is getting changed your expert will be changed so X path is what X path is means expert me the address of that particular element okay so let's see if you are living in the city in that particularly in that particular area in that particular colony okay and in your apartment you are on second floor okay or your apartment number is that number is 2 0 1 right so your expert will be your expert will be what like your expert will be pune / your area / at your area is on pune / on / some apartment number let's see apartment is ABC apartment / a block / 2nd floor / 2 0 1 right now let's see you move - in some in the same area you have been moved to some in summer or a different apartment so you are it your expert will be changed right so earlier you have used that particular expert to reach to that particular element right and tomorrow that you element has been shifted to - or some other place then your expert will be disturbed right so your skip will not work in that case selenium will try to go to that particular location that okay on slide number 2 0 1 lets you have a she reflected towards crack number 5 0 1 right or in some different society in that case selenium will not work selenium will be confused or selenium your if you are not able to I mean selenium is not able to find that particular element on that particular location selenium will give you element not found exception okay so this is not recommended to use if the expert is coming like this you can use x+ expert is coming like this at the rate ID is equal to this because this is not the hierarchy based expert okay but if the expert is coming like this you should not use these kind of experts that HTML / / / / / like this okay you should not use okay so what to do now so I cannot use expert there is no ID also can you see that ID a name is also not available so I cannot use ID I cannot use name also so what especially for links we have created link text to a simple driver dot against a method fide element by dot link method is do okay by dot link text it's only and only applicable for links raised by dot link text and what is a text of that battery link type so this link is fine in so you can find it over here see you can see that sign in sign in link is there right just copy this and paste it over here and dot what we have to do we cannot use ng there why because this is a link I cannot pass any value to a link so we have to use a dot click method okay so driver or twine element by I think this link will not like or we cannot use name pad for that for the link and leave the link stuff like aim will not work the name is not here right there is a mean no but there is nothing like any string value always I thought string value will be taken by name back off no no no no no no the name is like especially if they have mentioned like this name equal to first name then only you can use that for for sign in there is no name there is a class class equal to three so it should have yeah I will do something yes she can look yes you should have that name equal to something name equal to a third it should be there then only we can okay it would doesn't have any name or ID see ID is also not there ID quill to is not there name equal to not there but for City for this these things see ID is equal to city name equal to city I can use by Road ID I can use by dot name I can use biotechs path also for this particular field but but there are some fields I mean there are some elements where ID is not available name is not available they have only two properties this is the sign is having only two properties class equal to this and H dash property where exactly you want to move this properties in here and then one text is the assignment so with link always remember all the links are represented by a tag okay what is the HTML tag off sign in a okay always remember this thing and if a tag is there it's most of times you won't find ID and name you will see HR f value class value and this blue color is coming due to this class and you see that the blue color a blue color of this text this link okay so ID I cannot use name I cannot use so what I have to do driver or find element by link text sign in just click on sign in okay so dot click method is there by dot link text is there okay so this is called link text sign in so let's run this program see okay let me run it again Genting tom is clicking on sign in link so it's coming on this page right so it's coming on this page now it means sign in link is working so they are able to click on sign in link right so I am going to comment this line because we have to work upon this page on the right you can click on it and it will move to the next page right so this is another thing another important is partial link text okay so this is not recommended to use not useful you know we don't use partial link text we never use partial link text passion link text is like this driver dot find element by dot you can see partial link text partial link text is used when let's see this is a long text okay one to register okay this thing is there or let's see some other links like let's see how to pick a great user ID something like this so a long text is available okay for the links in that case I cannot I can use this partial link text you just a partial part of you you have to provide a partial part Electric if you are providing how to pick okay you can provide like this how to pick no need to write the complete link text how to pick a great user ID or something like that or learn about secure password so you can write only learn about okay and simple dot click so you can use partial link text like this but this is not recommended better to use link text always for the links so but this is only for links this is also this is only for links also partial link type but this is not useful okay so don't use partial ink desperate for your understanding point of um reading another one is CSS selector CSS selector is also very important so how do you CSS selector driver dot find element by dot CSS selector so how to get CH a selector let's say I want to enter I want to enter Street here okay so for the street this is the okay input field just right-click on your input field and copy CSS selector I can see that four pcs are selected and paste it over here okay cannot sign keys and let's see - al new street okay so driver or find element by dot CH of selector hash address one so how to create CSS selector you spy this first name this right click and copy see if selected either you can use like this or you can see what is the ID ID is firstly okay ID is equal to first name so just write hash and ID value okay simple put hash and what is the value of ID yes strike like this address one okay so you can use CSS selectors also right so let's I'm commenting this language otherwise if we click on this how to pick so first it will enter Tom Peter and then it will enter well new street 20th Street by using CSS selector we are using okay another thing is class how to use class the but I in this is not recommended not useful so simple driver dot find element by dot you can see class name not exactly close actually this is class name so what is the class name see if you enter something here in city so can you see that there is no class okay so I cannot use class name here so let's see for last name again there is no class so one class attribute will be there then only you can fill the value okay so class is not there let's see for this you can use like this okay class equal to a and see a be like this okay so you can use like this this is the class name and this is a link right so you have to click on it so dot click by dot class name also you can use like this but this is not at all recommended not useful okay because class then can be duplicate let's see I have another link help okay so it may be class name whatever that last name we are having okay for this particular link and what are the class name we are having for this particular link may be common classmen can be duplicated for different elements okay so class then can be same or a different element so this is not recommended to use okay class name we should not use so these are the seven locators one more locator is their tag name which I will cover later so what is XPath what is already what is name what is link text portion link to XE select a class which one is the best one so if ID is available and prefer to use first priority I'll give it to this day I do okay and name is available or expert is available but expert it should not come in the form of hierarchy based expert always remember okay hierarchy based expert I should not use otherwise if it is coming like this I can use expert on the second priority and name is my third priority okay you can use name also for links my first priority will be link text okay link text okay so this is only and only for links I can use ID also if I it is available and link is what both are available writing also a link text is available in that case I will prefer to use ID okay I never use partial link text I can use CSS selector also just like expert on the third second number also I can give it to this guy CSS selector is also very powerful because entirely they are using ID only so we can use that okay this I will give you on the fourth position on port number okay so this is a locator one more time position yeah so for yourself a let's say I want to enter something here in this particular street address so just aspire this is free turtle right okay and this input field will be generated just right-click on it on your input field and copy CSS selector and just paste it over here a driver dot find element by dot CSS selector and this is the CSS notorious paste okay and sendkeys whatever the value you want to provide you can create your own CSS selector also like what is ID ID is address 1 so just write by dot CSS selector hash and add ID okay CSS little rule is if ID is there so your CSS selector will be hash and whatever the ID value so if value is this and writing like this ID so whatever the ID value will be there hash ID okay if idea is not there were classes there so what exactly it will be dot and I do okay so there are two ways of creating pages letter F ID is there put hash ID its class is there then put dot and classmates are you not ID dot and class name whatever that large is this class attribute values there okay so this is what you can create your CSS selector and X bar the rule is okay so absolute expert this is called absolute expert this kind of expert we should not use this is called absolute value it means the proper either give you are getting okay so absolute expert like this should not be used coming from HTML let's table to body body to the one div to the five defy the two and a if expert is coming like this we should not use this tomorrow enter or dev one div means division okay tomorrow Division one and shift it to dipped or dip three or day four day five to day seven then your expert is gone and your ex script will be failed in that case okay so this is called the relative expert if the expert is coming like this then only we should use this is called this is example of relative expert got it now I'll create another glass okay handle drop box in prop Baku there are drop-down values you were asking right how will you select that drop-down values so we can see that a state is there right and you see number of options are available so how to select let's see California from this particular state how to do that so first I'd expire this and we'll see that this is a select tag ID equal to this so I can use ID and I can use name also right and you will see if you open this selected number of options are available all the country names are available California Colorado Connecticut Delaware District right all these things are available now but how to select any specific value from a drop-down okay so I'll copy this thing same thing because this code will remain same right no four this Dropbox what we have to do we have to create the object of select class so there is a class select class just create the object of select class let the object name is select is equal to new select see guys it's very important they will ask you the time of interview how to handle drop-down so immediately you say selected this is also called select ok and this select class is already available in solarium so we have to import this see imported from selenium support okay don't do the wrong input okay and it's saying select select will do new select in this particular select object we have to pass on which object on which element you want to perform action so I want to perform action on where on this driver dot find element by dot ID and ID is IDs s MZ that ID the state like so select select equal to new select class object has created and inside the object I am passing driver dot find element by Road ID but I'm not performing any extra the dot click or dot send keys or something like that okay so in select class we do not perform action like this send keys or not click for drop down now by using this object name we have a method select by visible text select dot select the visible text now I want to select California like this California make sure your spelling is correct so I'll repeat first you have to create the object or select class selects like equal to new select select class is already available in selenium so you have to import it from select import from selenium and then inside the select class object you have to pass this particular value driver dot find element on which element you want to perform action what is a drop-down element this is a drop door element drive board or find element by dot I'll use ID because ID is there I can use by dot name also and I can use by Road expert also okay so how to get these things simple inspire this drop-down okay so you will get this ID and name and pass the value and then we have methods select dot select by visible text em California so whatever the value you want to select just pass the value and it will be selected so this is how we handle drop-down if you run this program clone will be launched see it will select California can you see that it's selecting California okay so this is how we handle dropdowns okay so what you have to do is in your assignment you have to come on this page and you have to fill this entire form okay how to handle checkbox a simple driver or find element by dot XPath or ID or whatever and dot click so for checkbox also dot click will work okay and this is for button you have to click on this button and then you button same not click you have to fill this entire form this is your assignment in selenium okay by using all these things you can use a different combination for some field you can use XPath for some field you can use ID name or some other values ok so there are a number of fields this complete form you have to fill if it is drop-down you have to use select class concept like this these two lines of code of your delight let's see we have drop down like this month go to select let's see January right slightly too much we have to pass much over here what the ID will be change in that case the ID will be of this particular date of birth field ID right so you have to fill this entire form by using all these different locators six seven locators you have covered today okay so whether to use expert ID name okay and CSS selector these four combinations you have to use expert ID name and CSS selector okay and fill this entire form this is your assignment if you can fill this form then you are good to go with selenium okay selenium is all about locators any confusion no in like 100 voice there is one more look at getting at it like I just wrote on you that is protector something like that although who told you that do you have any idea about back no no no protectors I just heard come here see this is a incorrect knowledge protector is a different tool on top of selenium auditors will used remain only with a JavaScript language okay so selenium I told you right rhenium supported by JavaScript in the form of protectors there is that is what the locator or something it's a different tool altogether okay right okay I just heard so I thought to just come with you no never say protector is the locator protector is a tool on top of selenium webdriver they have created another dual product to head okay if you want to use JavaScript currently we are using Java if you want to write JavaScript with selenium you have to use protected okay okay the protector is not a locator tool okay forget about product s it's hardly people are using in the market we and only for if your application the developers they are using angular Jay technology then only it will be used for otherwise it cannot and it's really difficult to understand JavaScript it's a very weird language not of syntax problem and all those things are there so don't concentrate on protectors in these kind of things okay 95% of the company they are using selenium webdriver with Java combination most of the calls you will be getting only in Java with selenium normal product okay suppose you comfortable with these things then maybe after six months or one year you can start looking into product X okay so that's all for today and

Channel: Naveen AutomationLabs

Views: 182,915

Keywords: xpath, Selenium, WebDriver, TestNg, junit, Framework, Automation, CSSSelector, Dynamic XPATH, Web Elements and Element Locators, element locators in selenium webdriver, css locators in selenium, locators in selenium webdriver guru99, webdriver element locator for chrome, selenium locators best practices, how to find element using xpath in selenium webdriver, types of locators in jig and fixture, how to get xpath of an element in chrome, NaveenAutomationLabs, Xpath, ID, Name, CssSelector

Id: m6iqdzITwmg

Length: 49min 13sec (2953 seconds)

Published: Wed Aug 23 2017