Complete Xpath from Basic to Advance | 14 Xpath Function | All Xpath AXES | Xpath tutorial

welcome everybody to this complete and in-depth tutorial on expats in which we will learn how to create XPath of the most basic level to the most advanced level there is in this tutorial we'll first learn how to create your basic expats followed by XPath with various conditions after we have learned the basics we will then go to the advanced level which basically means XPath which contains functions after we have learned all the XPath functions we will then go ahead even further and learn XPath with axis guys at the end of this tutorial you'll not only be able to understand but also create various high level programmatic experts with ease expert like these ones can easily be created with you with ease that is if you are an automation program or creating experts should be your primary skill also note that this entire session will be tool independent having said that for those who are using selenium in Java you have to put your XPath in these places right here such as a driver final element by XPath and place your XPath right here for those who are using selenium with pipe in the steps will be pretty much the same which is a driver dot final element my XPath and paste wax path right here the similar steps will be also performed in UFT or any other programming tool there is guys note that yes the tool and the methods might differ but the experts here will remain the same having said that let us begin a very first basic XPath session let us now start creating experts by using a sample application in a Chrome browser the URL of this application I will be giving in the description below so you can code along with me note that you can perform this exact same thing even in your Firefox browser but for now we will focus on the Chrome browser now with that said press f12 that will bring up the developer console use your inspect tool and inspect on this element right here which is unique ID now note that this application is created by me so that you all will be able to practice XPath from the very basics till your advanced level which is below now this particular element which we have inspected has got an ID call as ID 1 we are now going to identify this element by using X paths with the help of its ID so step number 1 click any one click anywhere inside of your console and press ctrl F natural bring up this text box right here this text box is used to execute your X path or your CSS the CSS session we will be talking will be looking into in our next session now with that said let's double forward slashes to start your X path followed by a star and then you give your square brackets like this now we are going to identify a particular element with the help of its ID all right so type in at the rate ID followed by equal to and inside your single codes you type in the ID now if you look at the particular element you would see that the ID is equal to ID 1 so let us copy that and paste it inside of a single quotes now as you can see here the element here is highlighted in yellow which means our XPath is working the other way to find out this is by looking at the right hand side corner and as you can see one of one this basically means yo XPath is identifying the element uniquely now with that said you can either give single quotes a double quote will also do but has a standard practice it is better to give single quotes that is perform the exact same thing in your Firefox browser as well so let me copy this XPath go to Firefox browser press f12 natural bring up the developer consoles and right here in your search just paste in your XPath and hit enter that will execute your XPath and as you can see a 1 of 1 and if you hover over the particle element you would see the element is highlighted in your application as well I am going forward will be we will be mostly focusing on your Chrome browser and not on your firefox browser let us now go ahead and create a similar expose for your other two elements as well which is unique by name and unique value so if I just expand this you would see the other two elements right here so this is the other one which is having a unique name and this is even having a unique value now note that your element starts over here and ends over here and everything inside are basically your attributes so idea is an attribute name here is an attribute value is an attribute basically anything inside of your tags is an attribute so we are we are basically uniquely identifying your first element by using the ID we will now change this for a second element by using the name so at the rate name is equal to your name one and as you can see that works as well in the third example we will now do at the rate value is equal to value one and as you can see that works as well so with this we will now learn our very basic XPath syntax which is like this so at the start of XPath you basically give your double forward slashes which basically means finding an element anywhere in your HTML page we will then give at okay sorry will then give a star followed by and the rate attribute so attribute has I said it can be anything at all which is inside of your brackets and then we set it equal to a particular value note that the value will always be in single or double quotes and this entire XPath will be put inside of your square brackets this is a basic syntax of an XPath we will now encounter a very first issue when using this particular syntax so let me open up Chrome and let us now try to identify your next two elements which is element 1 and element 2 which is basically these two elements as you can see the problem here is these two elements have got a class but the value of your classes is basically same for both of monuments so if I were to copy at the rate class is equal to class 1 you notice that at the right hand side you would see one of two elements so if I press one of these arrows it will basically navigate to the other element so this is your second element this is your first element so your XPath is not able to identify something uniquely so how do we take care of this issue now as you can see in both of these elements your tag is different for your very first element your tag is a P tag or your paragraph tag and for your element 2 it is a div tag so you can specify your tags instead of your star so star basically means any tag so you when you put star it will search any element having the attribute called class which is equal to class one but if you specify the tag like the tag P having a class class one it will point to only one element right here and if I were to change this tag to dare it will then point to the second element right here so the syntax will change like this instead of giving your star you can also give your tag to specifically say and you want a particle X path having a particular tag and the necessary condition inside of it let us now look at a different problem in XPath and learn how to solve that as well so open up your application and a menu scroll down you will be able to view these four elements right here now all of these four elements are present in your HTML right here all of them have got your P tag and none of them have got a common attribute example your very first and second element has got a common name your third and fourth also has got a common name B same way if you look at the ID ID is common between your first and third as well as both second and fourth so if I were to identify this by using and let's say the name so let me just zoom in here so double slash means anywhere in the webpage I'm identifying an element P tag and having the name attribute equal to the value a and as you can see I'm identifying two different elements now this can easily be resolved by uniquely identifying an element with the help of the name has well as the ID basically I'm combining two different attributes together you can do this by using the and operator so simply type in your first attribute or your first condition and then you type in a and D and and then you give your other attribute which is at the rate I D is equal to a this basically means that I am finding any attribute sorry any element having a P tag which has a attributes name is equal to a and ID is equal to a and as you can see it is uniquely identified if I change the ID from A to B as you can see it now points with the second element which works as well it is not just the and operator you can also perform your or operator as well so in this case it is uniquely know it is identifying three different elements why because it is any element having the name is equal to a which is basically two different L elements or having the ID is equal to B now with that said it is not just to add two attributes you can combine more than two as well so name is equal to a or ID is equal to B and or you can also put an odd condition here and give your third attribute as well and that will work just fine now this can get a bit confusing so what you can do is you can put a parentheses to separate the two and make things a bit easier so this brings us to our next syntax in XPath which is if we have two or more than two conditions or attributes you can give an and condition so that the both should match in order for the element to be uniquely identified you can also give the or condition or combine more than one conditions with the help of your parentheses so far we have learned how to identify a particular element by using the attributes we can also do this by using the text Haslem example let me open up the application again and let me take any element right here example this one which has got the unique ID so if I spy on it you would see that it has got a text call as unique ID and if I were to copy the particular text I can easily identify this in the following manner so any element having the P tag give you a square brackets but this time do not give under it because add the raid is used to specify an attribute you simply have to do te XT and your parentheses this basically is a function in XPath which returns the text of any element in your webpage so this x bar I do means I am finding any element in my webpage which basically has my P tag and has got a text I can then say the text is equal to a particular value which is this one right here a unique ID and as you can see that you are getting one of one element or it is uniquely identified in this case if it was not uniquely identified you could have combined this again by using your hand or your or operator and combining it with an attribute and that would work fine for example at the rate ID is equal to ID one and as you see it is still found cause that works as well let us now look a different problem where your child or your parent is unique and you want to find the other so what do I mean by this so let me open up the application again and if you scroll down you'll be able to view or text colors when your child is unique so just spy on the particular link and you will know what I mean so in this particular case you want to identify the particular anchor tag uniquely but as you can see it does not have any unique attribute but the child here has got a unique attribute which is ID is equal to link so whatever what do I mean by a child as you can see this is an anchor tag and if there is an arrow right here so the moment I expand the arrow as you can see the span is basically inside of this particular tag and therefore span is a child of the anchor tag or in other words the anchor tag is a parent of span you can say it either ways so in this particular example M just assuming you okay let me again identify this so in this example we will try to identify a anchor tag by using the child so step number one is identifying this particular span tag a span element here so span having ID is equal to link so let me copy the attribute link so double /span the square brackets at the rate ID is equal to link and in this way you have identified the child uniquely now to identify the parent you only have to do a forward slash followed by two dots in this way you're traversing from the child to the parent in this way we have identified the parent uniquely now you can perform this once you can perform this twice as well in this case we'll go from the parent with a parent and if you keep doing this over and over again you might basically reach the head or the HTML tag has well so with that said we look at the other example where your parent is but the child is not so in this example let's say I want to enter text in this text box and as you can see this text box does not have any unique attribute but the parent here which is there has got a unique attribute which is ID is equal to in a way so again step number one would be uniquely identifying the parent in this case it is live having the ID in da so let me make a few changes instead of span it is going to be a div having the ID is equal to the a and now to drive us from the parent to the child you only have to do a forward slash and a star star basically means again has we have learned earlier it means any tag whatsoever which is a parent sorry which is a child of this element right here but guys in my experience it is not a good habit to have star try to be more specific to make your or expats more robust so you are out encourage you to use the tag which you can see in the console below so your I'll give input so this is more robust again even in there you can give a star but I again prefer not to give stars for your tags but to give the tags themselves now looking much more in depth in this example if you take this one right here which is ID is equal to C you see that inside div you have a span at inside of the span you have an input so it is not directly the child but you can say is the descendant so how to handle this so one way to handle this is so depth having the ID has Dipsy inside of this you basically have a span and inside of the span you have an input so in this way you cannot in traverse to the child but your child's child has well which basically means you're going to the descendant an easier way to take care of this is basically giving a double slash so whenever an HTML you give a double / or sorry whenever nx+ a double slash it basically means anywhere inside it now your first double slash does not have anything before it so it means anywhere inside of your HTML page but if you're in double for a slash / yer it basically means inside of this element right here or basically anywhere inside so you do not need to give /span /a put you can just give double forward slash input and that will work just fine so in this way we have learned that by giving two double dots we are traversing to the parent and by giving slash and then you giving your tag you basically are going to the child we will now look at the next topic which is identification with the help of the indexes now they should only be used when none other identification technique works so let us look at an example from before in which we are two elements having the same attribute which is your name is equal to a so let me just do that double forward slash paragraph with add the raid name is equal to the value a and as you can see I am getting two elements right here this is the first and is the second now in order for me to identify the very first element I can easily do that by giving the indexes the first element can be found by using a square brackets and giving the value one and the second are simple by giving the value two now that said there is a major issue your which very few actually know and that is this when you are giving indexes this index is basically specify the child so what I mean is this element here is a second child to its parent and this year sorry this is the first child and this is the second child of the parent now this might be a bit difficult to understand so let us look at a different example which is this one right here now de vere has only one child called label one and the next wave has caught only one child koalas so there are two labels over here okay and each one is a first child of its parent so in the exact same manner if I were to find double forward slash label having at the rate ID is equal to this label right here you see that I'm getting three elements right but in this case if I do give the index as one I can still vie with three elements only why is that because all of my three elements are my first child of the parent ended so index is a bit complicated just because you see three elements or that does not mean that the very first will mean your first and then second will mean second it does not work like that so in this case if I give two you'll basically get zero because you do not have any label which is your second child so in this case how are you going to work around to do a workaround you simply have to encapsulate the entire element in a bracket this basically means this entire element is present in the web page three times and then you give your square brackets with the value one with a value two and with the value three we remove this come back here a quick note guys all of the experts that we have written till now are starting with our double forward slash this means that it is a relative XPath or in other words we are searching for the particular element anywhere inside of your webpage the opposite of this is an absolute XPath this is something which I will never recommend anyone to use but for the sake of interviews and knowledge let me tell you what that is so you open up your Chrome browser and choose any element for example let me inspect on this button right click on the particular button and you can get this you can get this created automatically for you by choosing the option call as copy or full exFAT and let me paste it right here as you can see this ex-father is pretty long right and if you look at it very clearly and if you go towards the left you will see that it is basically starting from HTML and then it goes towards the body and then div and then div basically we are going through each and every element from the from the page all the way from your HTML till the element that we are looking for so this element here is a span if I remove the span you can see the spans parent which is your div if I go one level back it's a button and if I keep on going back all the way till the end what we basically reaches we screwed on top we will be reaching the HTML itself so this year guys is an example of your absolute XPath and as you can see it is pretty long and if any element in your changes that is you have got so many elements here in your entire XPath if any element changes your XPath will also change so do not use your absolute XPath please stick to your relative experts only so guys for those who are watching the video till this particular point a bonus for y'all we look at a very advanced topic in experts which is identification of an element by using another element has an attribute so what do I mean by this now if you look at any examples in experts your attributes of an element are basically attributes itself but it need not be an attribute you can also give a different element as well let us take the previous example of the link now in the link the parent was on unique but the child was unique so in this case I can identify the parent by giving the child has an attribute now it might seem complicated but it is not so step number one is uniquely identifying the child here so this is a span having the ID link right so let me write this pretty quick so double /span having the ID is equal to link here we go so our child is identified uniquely now let me just copy this Spanier and remember this now next is I want to identify this link here so this is a link so this here is a link so it's an anchor tag so double /e and then you give a square brackets but this time instead of giving attributes you paste in the element itself so in this way as you can see the element is uniquely identified so you're I'm trying to identify an anchor tag having an attribute which is the child of that particular element itself which is this one right here now this is a bit advanced but it is good to know this because you might have your seniors or your colleagues implementing this and you'll be like hey what's up this is something which I do not know the other thing is if your Spanier is not directly the child but it's undescended for example e in that you have a span in that you have something else you can do that as well by simply performing or dot and then your double forward slashes the dot ear is very important the dot specifies that you are searching directly inside of a anchor tag if we do not give a dot it will basically search in your entire HTML page so everyone with this we have successfully finished your first part of this tutorial in which we all have learned how to create your XPath from your basic to your advanced level we will now be focusing on a much more advanced level of XPath which is basically functions inside of your X bar in this tutorial he will be going with a total of or thirteen different functions we will start with the very first one which is contains let us now try to understand your contains function with the help of an example so open up your Chrome browser to the sample application the link I will be giving in the description you scroll all the way down to this particular element right here the moment I click on random you see the particular message is changing now in all of your messages this part of the text which is has logged in success is always constant whereas your starting and your ending is always changing now I cannot uniquely identify this element based on text alone because the text is not constant so what I can do is I can use your contains function and uniquely identify this based on a partial match so the steps to do this is going to be the following create a normal XPath so ctrl F double forward slash this here is having a paragraph tag right here so P followed by your square brackets now what you would usually do is you would type text your parentheses and then you give your text but this is only going to do an exact match what you want to do is a partial match so for that you use your new function called as contains so Co n TI and s and then you give your parentheses your contains guy is is going to have two parameter so put a comma your first parameter here and your second parameter here your first parameter is going to decide where do you want your match to take place whether it is an attribute for example at the rate ID is an attribute or it is an text so in our case for now we are going to uniquely identify based on partial match of a text right so we only give here a ext and then your parenthesis your second parameter is going to be what do you want to search inside of the text so I want this particular part of the text to be verified which is has logged in successfully so give that has your second parameter and as you can see it searches a text based on a partial match now in a similar condition you can not only just search your text but it can be a parameter as well so if I scroll a bow and I come to this example right here which is unique ID as I can see the IDR is ID one so instead of text I can just type here at the rate ID because I want to this time not search for the text but search for the and instead of giving the entire ID which is ID one it will work even if I give a partial ID such as d1 and that matches as well so again guys you can basically verify the partial match of anything attributes or text inside of your application with the help of your contains function the other thing is a condensed function is not stand alone you can combine contains with attributes as well for example if I wanted to combine contains with a text match then I would just do contains UID is having d1 and a text having this text right here I can even combine attributes as well it is all ok there are basically no issues by using contains now a similar function to contains is also called as starts with so let us come back to a previous example now if I were to just change your time you would see that the starting part of the text which is locked in successfully is always constant only the ending is changing so for this example you can again do the exact same thing as before which is let me remove of this particular piece of career so contains a text having the value logged in successfully and it works but this would not be a right approach because in experts you try to be as precise as possible so because your starting is always the same only your ending is changing what you can do is instead of contains you can use a function call as starts with so st AR TR starts a - and with and that will work just fine so you so you have to use starts with and then your starting part of your text or any attribute is constant and use contains when only a partial match is possible so in this way we have looked at contains as well s starts with let us look at the other three functions right now let us now look at your other three functions with the help of a different example so you open up Chrome and you navigate to this different example here the link again I will be giving in the description below now this webpage over here has got a web table now if you spy on the web table you would see that it has got a tag called hash table with the ID is equal to Table one so let me read an expert to identify this web table so double forward slash table with the attribute ID is equal to table one and that identifies a table uniquely now if you look at it closely inside of the table you have water body and then you have got a TR at the moment I hover over TR it basically is highlighting my very first row so TR o your basically means rows so TR TR TR it basically means that I've got six rows in my map table so if I were to just do double /tr as you can see on my right hand side corner one of six so this is my first row my second third fourth and so on so forth now if I wanted to uniquely identify my first row I can just give a square brackets like this and specify the number one so this is the first row my second third now guys here I'm saying rows because I'm working on the web table but in reality it is what it is that I've got six instances of my PR element and I am verifying on getting my first instance my second my third my fourth my fifth and then my six now you can give your indexes either by giving in a square brackets or you can use your position function to do the same so POS ITR position followed by a parenthesis and then you give your position value so this is a position one or my row one and so on so forth now let us look at a real life example here as well what if you had a condition where you had to get the values of a very last row now here I can easily do that because I know the total number of rows is 6 so I give the value 6 but whatever the number of rows was not fixed it was not started today at 6 tomorrow it's and so on so forth then that can cause a problem right in this case you can just use a function call as last so type la us la st followed by your parentheses and it will always point to your very last index as you can see her it is pointing to my last index idea now I can take this a bit step further your last index for your last row points to this particular row PR inside TR I've got a TD and si TD I have a check box so if I just do / TD / input you can see it verifies or it is pointing to the check box so this can be my use case you know I want to check all the delete my very last row and this is going to be the XPath in order to delete my second last row I can just use last minus one and this will point to my second last third last and so on so forth this same thing can be done by indexes as well I can give one I can give one plus one one plus two and so on so what I can give mathematical expressions inside of these parentheses as well okay now with that said let us look at a different example now which is count now count is something which is not EU is usually an expert but if you know how to use it it will save you a lot of coding in your actual selenium or which are function tool that you're using so what is count count is going to give you the total number of instances of an element found so let me come back to my application so you are I've got one two three four five six rows so if I just do count and I give the XPath of rows it'll return for me the value of six so it can be used in a particular manner what if I had this box here and this box has got two buttons so I want to get a particular box that has got only two buttons I can use a function counter in the same example of a web table that else verify a web table that has got only six rows okay so let me remove off all of these values here so we are going to identify a table but not by the ID but by using the function call as counter so table and then you give the function count and inside of this you have to specify the X path of the element which you want to count so we will start with a dot because you want to search inside of a web table notice at moment I put a dot table here is getting highlighted so always start with a dot if you do not give a dot it will search anywhere in your web page again so always use a dot so I want to search a what inside my web table I want to search for all TR instances okay now this is basically going to return for me a particular value which is basically 6 so I will say that I want to find a web table having total number of TR elements which is equal to 6 and as you can see I am uniquely and identified the particular web table right here having only 6 rows so congratulations everybody for making through the second round we will now go through our third face then which will look at more seven functions in XPath will also look at how to identify various elements by using attributes by ignoring its case as well as spaces if they are present inside of it we will now learn how to ignore spaces in your XPath with the help of an example so open up the Firefox or Chrome browser to this website the link I will be giving in the description below you navigate all the way till the end till you get this particular element here collars not logged in and you click on this button here the text of the element will now change to Tommy right click on the particular text and choose inspect and that will tell you the details or the particular element it is a paragraph tag having the text called as Tommy so let us now write an XPath by using D text so this is a paragraph tag having the text which is equal to the value Tommy now guys I wanted to click on this button here called as receding spaces and the moment you do that in your console you now notice that there is a space right before your text and now if you notice the X part does not work because there is a space if you put a space in your text that will work but without the space is it is not going to work all right so basically your X path is dependent on spaces how to make it independent of spaces how to ignore spaces and that can be done by using the function call as your normalized space so let us first understand what this function does so there is a moment you use a function normalized space and you pass a text inside of it by example let us use a text call as ABC ok and as you can see both the text ABC has both spaces before as well as after so I'm using the function normalized space I'm giving a text inside of it and the output is going to be the same text without any preceding or trailing spaces so this is going to be ABC ok now note that if you have a space in between that space is not removed so if you have text like this space ABC space C space your output is going to be ABC space C okay it is only going to remove your reseeding and your trailing spaces only now now with that said what do you want to do in our case my text or your is basically the text function ok now the text where you are is basically the text called Tommy so moment I pass a text or it is going to remove the preceding and trailing spaces and the output is going to be just Tommy without any spaces let me just put your single quotes here and now let me replace this with your function inside of your brackets and has UK and see it works now and it is ignoring all of your spaces it is remove all of this so now it is not just ignoring preceding spaces if I do training spaces you can see it still works even with proceeding and trailing that is spaces before and after it will still work so in these cases so in this particular manner by using the function call as normalized space you can ignore spaces inside of your text now it is not just text this can be done by using attributes as well for example this name attribute here just module XPath okay this name attribute over here has got double air right now what if I had spaces in my right so that would not work if you just do something like at the rate I D is equal to EE this is not going to work because your attribute has called spaces before and after in this case you can perform the exact same thing by using this technique so normalize space but this time not text right you need to use your parameter called name so at the rate name and the value is a value with audio spaces which is basically in EE then we put my bracket and as you can see that works as well so in this way you can use attributes you can use text and identify them by ignoring the spaces now that we have learn how to ignore spaces will now learn how to ignore or make your XPath case insensitive or ignore the cases this can easily be achieved by using your translate function also call has your replace function let us first understand how this works so let me open up notepad plus plus and paces translate function your function translate basically has got three parameters your first parameter is going to be the string in which you post in which you want to perform your replays action your second parameter is going to be the parameter which you want to find and replace so let me write it as str1 and a third parameter is going to be the string by which you want to replace so let me write it as Str - now let's take a better example with this let's say I had a string call as a B C D okay and I wish to replace the my bad I wish to replace letter B with the letter X like this then in this case the output is going to be a X C D okay because the letter B is replaced with letter X in this similar example if I wish to replace two letters that's let's say the letter B and letter D then I will have to give B and T like this yes guys although you give it as a string okay the function reads each character at a time so the letter B will be replaced with letter X and let it be your will be replaced currently with nothing at all so I better give it a value which is y now with this particular condition in place my letter B is replaced with X M a letter D or is replaced with the letter Y now using this same example I can now convert any text into from a uppercase to a lowercase so what do I mean if I wish letter text be any text okay so any text it doesn't matter and if I replace all uppercase letters such as ABCD all the way till the end which is Z so I'm I'm replacing all of these characters with all the smaller keys character such as ABCD all the way till the last character is there and yes you have to manually type it out then what I get is I get let me write the other capital any text so what I get is basically all my uppercase characters will be converted into my lowercase characters which is going to be any text but this time in the smaller case now using this exact same approach that is now write our X path and make it case insensitive so let me open up the application use this translate function so I'm opening up the application in his application as you can see I have got two buttons your lower case and upper case and by typing it as you can see the text is changing from lowercase to uppercase so let me remove all of this function inside your P tag and put inside here your translate function now has of learned earlier your translate function accepts three parameters and the output is basically the text which is all replaced right and he wanted replaced X to be equal to what to be equal to the text call as Tommy right but he wanted all to be converted to a lower case so translate is equal to the text call as Tommy and everything here is in lower case now what do you want to translate Tommy here is what it's a text right so you want to convert the text into a lower case so you want to convert or uppercase characters to a lowercase character right so you know type in everything from E to Z or idea I already have done that idea so let me copy your characters a to Z in uppercase and pasted here so all of your uppercase characters will be converted into all lowercase characters and as you can see it's a perfect match now even if your text is converted to an uppercase you would see that it still matches here we go it is still a match let us look at one more thing if I choose the option call as no space here only T is in capital rest all is in lowercase even in that case it will still match because it is converting each and every character of text from an upper case to a lower case and is matching it with your current text which is Tommy so it will work now with that said it is look at a much more complicated example what if you want to combine both what if you wish to make a particular X path which is both case insensitive as well as it ignores spaces let us look at that right now to achieve this you simply have to combine both of your functions together which basically is your first function which is translate which will be used to convert your uppercase characters to a lowercase characters and then we'll be performing the function called as normalized space to remove all of your leading and trailing white spaces so let's look first at the translate function so in this function you basically want to work with the text and in your text you want to replace all of your uppercase characters which is a to z and convert them into all lowercase characters of A to Z and once you are done with that you basically want to copy this function and paste it inside of your normalized space function so what this is going to do let me just put a few spaces here your function will first convert your text from uppercase to a lowercase and then it will then be passed to your normalized space function which will remove all of your leading and trailing white spaces so what you're ending up with is basically text which is all lowercase and does not have any spaces so if I type E or something called as Tommy this is going to work for all cases that is upper case lower case as well as spaces so let me copy this particular function and paces function inside of my X path so this is a function let me remove this and paste the one which we have just created and as you can see it is identifying the text called Tommy right here which has got the leading and trailing white spaces as well as T or is in caps and this basically is going to work for everything where there is uppercase whether it's lower case where there's trailing white spaces as you can see the X path works fine so in this way you have achieved a very complicated XPath which is both case insensitive as well as your space insensitive so it's time to have a quick recap the very first thing we learn is normalized space which basically is going to remove your leading and trailing white spaces as senior the example is also mentioned the next thing we learn is your translate function which basically is used to replace your text as you can see ABCD with AC replaced as XY and therefore you get the output has X B Y D now with all this done we'll now look at your other functions as well let us quickly go through each one of these functions starting with your string length string length is going to return for you the total number of characters which are present in a particular string now in this given example or in this given application you can see you have got many paragraph tags all of these are paragraphs and all of them I mean some of them have got less characters and some of them have got more characters so what if you want to find only those paragraphs which I've got 30 characters or more something like that you can do that by using the function string length so let us perform that right now so what I'll do here is I will remove of this particular code from application so I'm finding a paragraph which has God string length string length of what string length of the text okay so and I want the length of this particular text to be greater than 30 and as you can see I have got 10 elements in my web page which are all paragraphs which all have text and their length of the text is greater than 30 characters if I were to reverse this which is less than 30 you see that I've got 15 such paragraphs which have got either 30 characters sorry which I've got less than 30 characters in your web page right here now we look at the other two which is floor and round now these are very important tab functions on the point of view of dealing with numbers so let's take a particular webpage which has got a lot of numbers for example your stock exchange so stop exchange you can open any web site it would not matter I this does not have a lot of numbers then we take a different website okay this has a quad a lot of numbers here so let's say that you want to identify a text based on oh sorry you want to identify a particular element based on its text like this one right here fifty three point eight zero so right click on it and choose inspect and as you can see this particular thing is a TD tag having the value fifty three point three zero let me quickly write the XPath of this so double slash TD having the text which is equal to fifty three point eight zero long guy is a problem with this is in applications like this your text keeps changing very frequently but if you know that the value is unfelt it be changed by much you can not you have an option of not giving the exact value but giving off a round off value for example fifty three point eight zero can be converted to fifty four if you perform a round function on your text so what I'll do your SRU is around our o UND around and put my text function inside of the round function and as you can see that also identifies your text a similar function like round is all has your flow function and has the name suggest it is not a round off who your higher or lower but it will always round off to the lower most value submits let me go back to the application here so in this case fifty-three point eight zero will turn 253 like this if I choose a function call as floor FL o R and as you see that as well so in this way you can use your flow or your round function to deal with numbers and you a string lend to deal with total characters in your string let us have a quick look at your next function which is your not function here and this is the most easiest functions to learn an XPath so we'll open up our previous application which is your XPath practice the link again guides I will be giving in the description you scroll down to the elementary of the radio buttons we will try to identify this radio button of male uniquely and as you can see here this is an input having the type called the radio and the ID called gender zero so that is out of it XPath for this so double slash input having having the type so at the red type is equal to radio and having an ID equal to gender zero okay I have misplaced the code here there we go and as you can see one of one the element is unique the other thing to note is if I remove this second parameter called gender zero as you can see it is giving me two at two particular elements or one is a male and the other is a female and the moment I put this attribute again using the and it is pointing specifically to the male now this X bar basically states that it needs to be a radio button and it needs to have the gender 0 now by using your not function I can change the entire meaning of your XPath I can say the exact opposite I can say that it needs to be a radio button and it does not again it does not need to be having a gender 0 so the moment you put this in your parenthesis that is now not going to point to the male but it will point to the female radio button and this is a way we use your not function okay guys we have reached the last topic for today which is substring after this topic we will talk about your XPath axis now with that said it has come back to a substring so to explain this let us have an example open up your application again you scroll down to this particular text now that is if you aren't able to view this text simply click random and the text will be generated for you now with that said your first function is substring after or substring before okay so if this your is a text okay and I give the function call as substring after and I give this text as well which is your codes then the output will be 10 a.m. because this is a text this is a value and substring after is 10 a.m. in the same way if this is a text and I give your double quotes again and then I say a substring before then the text that comes before will be the output let us try to understand this with an example in XPath itself so here what I'll do here is I'll let me spy this this is a paragraph tag so double slash P okay and let me type your substring so sup okay I papa the syntax it is string substring right so sub string give a hyphen and then write in before or after let me write after first so substring after and then in your parentheses you have to give two parameters your first parameter is going to be what substring are you looking at so I want a substring of the text okay and then specify where you want to divide this string and so I want to divide the string add my double quotes right so once you're done with that this is going to return for you a particular value okay and if I say that particular value should be equal to this text right here is equal to nem as you can see it is identified uniquely ok if I were to say a substring before ok in that case I need to give the text that comes before my double quotes before my colon sorry so let me now replace a text with this one right here and hat and as you can see that is also verified successfully so in this way you can use your substring I personally have not used sub strings before but again it is always a good thing to know each and every aspect of your XPath so in this way I guess we have covered all of the functions we have covered your normalized space your translate as well as your flow function now in our next session we will be talking about your XPath accesses so congratulations everybody for finishing your first three stages in your XPath development and I'm sure you all can create a really good experts till now now going forward in stage 4 we'll learn more about your XPath access and this is going to be a bit more complicated we'll also be combining your XPath access with all of your previous functions and methods so without wasting any time let's get started so guys like all of our previous sessions we are not going to go into the definition and the theory of what an XPath access is instead we look into the code and I to understand this ourselves so to start with you can either open up your Firefox or your Chrome browser and navigate to this website the link I will be giving in the description below so you scroll all the way down till this particular element or your call has XPath access inspect me so we can press f12 and inspect that particular element now what I've done here is I've gone ahead and created a whole complicated list of elements such that it is very complicated and that'll help you understand the benefits of your XPath access so this particular element or your consists of a div with the ID a now inside of your ID a you basically have got a one two three four four children and they all have the I recall as b1 b2 b3 and b4 if you open up the very first one it also has got three children your second element here has got three children as well and the third has got two children your fourth dam does not have any children at all now if you come on talk to the children of b1 you would see that your x1 and x2 are basically alone but your ex to you has got children of its own as you can see it as God oh one and inside off area of got q1 and then our one now I know that this is getting pretty hard for you to understand sort of gone ahead and taken this and represented this in a graphical format in your PowerPoint presentation so here we go this is exactly the same thing that you had seen in your HTML where you have an element with the ID a and that basically has called for children which is b1 b2 b3 and b4 so guys this is pretty much the exact same thing and with the help of this diagram and HTML right here we will right now perform a few XPath access and better understand the benefits of it as well let us learn our first access for today which is your parent access and as the name suggests it basically means your one level up so guys if you are currently working on the web element with the ID y2 and if you give parent it will take you one level up and now will point to be to let us look at this practically in our application will now find the element having the ID y2 so I'm opening up Chrome and inspecting this sorry I'm giving the XPath for the particular element so double forward slash they're having the ID is equal to y2 and as you can see the element is present right here and it is exactly same so that y1 y2 and y3 they all are children of the parent b2 exactly same right here y1 y2 y3 and a parent is b2 we will now write our access which is a you first gave a forward slash followed by the name of the axis which is parent VAR int and then you gave a colon and one more : and then you give the tag of your parent the tag of a parent here is different right so you give div div and as you can see the parent is highlighted right here now you can either give div or you can give a star star basically means any tag and in this case it would not matter because your parent would be only one okay now this is exactly same has a tutorial number one in which we are done the forward slash followed by your double dot and that will point with a parent as well so guys are most of the time we do not use the access parent but we will be using your double dots because that is much more convenient and much more easy so that is done with our parent access we will now look at your ancestor access so as you see guys unlike your parent where your scope was limited only to one particular element by using ancestor the scope is now extended to a whole range of elements which is basically your parent your parents parent and they are parent and all the way to your very top in our case this is going to be your HTML tag itself so why is this helpful so let us look at a practical example here let me go to Chrome and this time instead of typing parent let me now type your ancestor so a and CESD you are and as you can see here it has got total of 24 elements right here now let us take for example that I wanted to identify this particular element here call as div with the ID equal as a if you look at our excel sorry if you look at a PowerPoint presentation I mean this element right here I want to uniquely identify this okay let us come back to Chrome let me copy this follower and save it so if I just to double /div having the ID is equal to the ID a you will see that our total of two elements found which is these two ones right here so they are not unique right now a good way to find a something is unique is that you can just say that I would like to find the ID of an element which is a but it is also the ancestor of the element why - okay so I want to find the ancestor of the element why - who also has CID equal to a and by this particular approach you will not be getting two elements but you will be getting just one element so what we'll do is we'll go back to a previous code here we go so div okay we are finding the element Y 2 we're finding out all of his ancestors but this time we do not want all of the ancestors so that is remove the star we want a specific ancestor which has got the tag called div and it has got the ID which is equal to the letter e and right now if we see that it doesn't give me two elements but it just provides me one element which is unique which is this one right here because this element is not an ancestor of our they it is of a particular element called as Y 2 so Y 2 is ancestor is this one right here live with the IDE and not the other one so this is a practical example where you might be using your ancestor tag that is come back oh yeah so now we're done with ancestor let us look at ancestor or self this basically just means that your range is now including the element itself so your y2 is not included but in this case Y 2 will also be included the next one is child so guys I don't think I need to explain what a child is so if B 2 is element then y1 y2 and y3 are the three children of your B 2 element so if I go back to my application and I give instead of y2 if I gave you a v2 and it's of ancestor if I type your CH I LD child followed by a colon and one more colon and then a star you would see that it has got three children which is y1 y2 and y3 which is exactly as you can see right here now usually you know you never specified children in this particular manner what people usually do they just give a single forward slash and then they specify a start like this and that works as well okay you can either give a star or you can also specify the exact tag of your element for example if it's a div then you type a tip if you want a specific they're using index you can give you indexes one index is 2 and your index is 3 as well so with that done we'll go to our next axis which is descendant now this basically means the same thing but not just your child but all of the our children and the our children has done as you can see here if I take B to tag and I give descendant it will basically show me 1 2 3 4 5 6 7 8 9 elements underneath it so let me go back to my application and I'll do /an type descendant Dec and dnt a colon and a colon and then I'll give a star get thing I made a spelling mistake Dec and the ending here we go and right now you can see it has got eight elements I think I counted it wrong so these are all of my eight elements which are the descendant of the tag b2 now again people would not usually type it in this particular manner the easier way would be just your type or double forward slash so double forward slash and a star would work as well now again you can either give a star or you can give a specific element stag by example div having the ID is equal to let's say m2 that would be more precise you can either type in there or you can type it by using your descendant tag and instead of star you type in descendant having a div with the ID is equal to m2 and that will work as well but usually I would not go with this particular expert access and simply just go with your double forward slash cause that is much more simpler here we go so now we're done with descendant will now look at what do you mean by following and this is the most common questions that are asked in interviews so this might be a bit complicated so guys to understand what do you mean we're following you did a draw an imaginary line that goes through all of your ancestors so what do I mean by this let us look at a different diagram which is this one right here so if you're working on the element b2 b2 is fair and is a and ace parent his body and Boris parent is X so if you draw an imaginary line that goes through all of these elements all the elements had come to the left-hand side of this particular imaginary line will be excluded and all the elements had come to the right of this line will be included now this makes things a bit complicated let us look at a real life example to understand this you will try to find the following elements of the element b2 so open up the application so here we have God identify the element call as we do we will now do a forward slash followed by sibling so one thing to note is b2 is this element right here okay now if I talked about following it means all the elements that come underneath it so b3 all the elements inside V 3 V 4 all the elements inside before followed by B are this V R scripts everything inside your scripts basically all the elements that come after b2 is your following ok now let us look at this practically so a forward slash followed by following fo ll o WI ng and then your colon and a colon again and let me just wrap star so that we get to see all of the elements like this so here we go we have got total of 236 elements that just go through a few of them here we go b3 the elements inside b3 here we could be 4 and then your brbr your scripts you've got your div and so on so forth basically it is going through all the elements which is below the particular element koalas b2 so in this way this is very helpful in case you know you are very sure that a particular element has got common properties which are to your left and your right and you know exactly where it comes let us now look at the next example which is very similar which is the following sibling so this is similar to your previous example but this is specific to only one level which is your sibling level so what do I mean by siblings so if you look at this diagram you would see that the element here has called for children which is B 1 B 2 B 3 and B 4 so if you're looking at the element B 2 and you're talking about following siblings you are looking at only that particular hierarchy only and following means towards your right hand side so you have got two elements B 2 and B 3 let us see this exact same thing in our application here we go so if you are looking at B 2 you're only concerned about the elements at the same level and the elements are come after it it is V 3 and before the elements which are inside this will not be counted so following then a - followed by sibling si B Li ng and as you can see there are two elements found which is B 3 and B 4 so Chi is your next to X path accesses are pretty much similar your next one is proceeding which is the exact opposite of following and then you have your preceding sibling which is again the exact opposite of your following sibling will not go into that right now we will now look at how can we implement these X 4 accesses in your actual day-to-day automation activities so let us look at a real-life example where maybe it will be helpful so let me open up the same example and let me scroll about to something which I usually observe is in your applications you might have text boxes like this you have a label and then you have a text box right so let me spy on this and as you can see here that you have a label here and right underneath the label you have a div inside of Dave you have an input and this fit emits this pretty much stays consistent over all of the other elements as well so what usually you would do is to identify the part of your text box you have to spy on it each and every time and that is a waste of time so instead what we do here is we are going to identify the text box by using the label okay and that can be done by using following siblings as you have given right here so step number one is identifying the element this particularly bill by using the text right so the element here is a label so let me copy the label and change the Dave to label I'll then copy the text or and change b22 name and I do not want ID but I want to verify the text so text is equal to name and as you can see here it automatically points out to the div tag now I do not want a star I would say it's a div and inside the Dave I have an input here we go and now you see that by giving the label value of name it is now pointing to the text box of that particular name value now it is pretty much simple even if somebody does not know how to create XPath he or she simply has to copy the label name paste it in your XPath and there you go the element is automatically found same way for any other any other element which might be present in your webpage so creating experts like this will really save your time and that can easily be done by using a following sibling proceeding something there are many examples which we have just seen so guys this is it this marks the end of a four step program in learning expose from your basic to do very advanced level and I think I've covered almost each and every my new topic there is to cover in experts now that said and going forward in our next tutorials I will be compiling a list of those hard to get XPath elements and I will be showing you how to get the expose for those elements as well so in the meantime if you all have any such elements which are difficult to find such issues you can come in below and maybe I will include that in the tutorials as well now that said if you have any questions in this entire force for lecture series you can comment below I will help you out if you like this entire series on XPath do show us support by liking and sharing this video and please do subscribe to my channel thank you all for watching and thank you for your patience

Channel: Automation Zone

Views: 19,212

Rating: 4.9530334 out of 5

Keywords: selenium, tutorials, easy, relative xpath, absolute xpath, xpath in selenium, xpath tutorials, basic xpath, learn xpath, xpath locators, ancestor, ancestor-or-self, attribute, child, descendant, descendant-or-self, following, following-sibling, namespace, parent, preceding, preceding-sibling, self, contains, xpath contains, normalize-space, translate, substring, string-length, ignore case, ignore space, complete xpath tutorial, everything in xpath, xpath zero to hero, xpath tutorial

Id: NhG__BL8zFo

Length: 75min 33sec (4533 seconds)

Published: Sat Jul 18 2020