Session 25 – Selenium with Java | Locators – XPath Axes… — Transcript

This session explains XPath axes in Selenium with Java, focusing on DOM navigation and key XPath terminology for effective element location.

Key Takeaways

  • XPath axes enable flexible navigation through the DOM beyond simple attribute-based selection.
  • Understanding DOM node relationships (self, parent, child, ancestor, descendant, sibling) is crucial for writing effective XPath expressions.
  • XPath axes help locate elements even when attributes are missing by leveraging node hierarchy.
  • Siblings are nodes sharing the same parent, with preceding and following siblings defined by their position relative to the self node.
  • Mastering XPath axes improves element selection strategies in Selenium automation.

Summary

  • Recap of XPath basics and introduction to XPath axes for advanced DOM navigation.
  • Explanation of how XPath axes allow navigation top-to-bottom and bottom-to-top in the DOM.
  • Detailed discussion on XPath terminology: self node, parent, child, ancestor, descendant, sibling, preceding sibling, and following sibling.
  • Use of XPath axes to locate elements without attributes by traversing related nodes.
  • Illustration of DOM structure and hierarchy with examples to clarify relationships between nodes.
  • Explanation of ancestor as parent of parent and descendant as child of child nodes.
  • Clarification on sibling nodes as elements sharing the same parent.
  • Examples provided to identify siblings, preceding siblings, and following siblings in the DOM.
  • Emphasis on understanding terminology first to effectively use XPath axes in Selenium.
  • Encouragement to review previous session materials for foundational XPath knowledge.

Full Transcript — Download SRT & Markdown

00:03
Speaker A
So in the last class, we have seen XPath, different options, how can we use XPath and how can we write our own XPath. All right, so today we'll see one more option in XPath, which is XPath axis.
00:17
Speaker A
Axis so what is an xath axis so by using xath axis uh we can navigate throughout the Dom like top to bottom and bottom to top and we can find any element on the web page even though we don't
00:34
Speaker A
So what is an XPath axis? By using XPath axis, we can navigate throughout the DOM like top to bottom and bottom to top, and we can find any element on the web page even though we don't have any attributes or if we don't have anything for this element. Still, we can locate an element by using number elements.
00:53
Speaker A
before using it let us see what are the different type of xath accesses like what are the options are available next path access and how you how to use those options first we need to understand the terminology that is the most important and once you understand then we'll see how to use expath
01:10
Speaker A
So suppose there are some elements which are there in the number for that particular element, and we can still locate the element. So for that, we can use XPath axis. So before using it, let us see what are the different types of XPath axes, like what are the options available, XPath axes, and how to use those options. First, we need to understand the terminology. That is the most important, and once you understand, then we'll see how to use XPath axis.
01:29
Speaker A
last class you can go go through the document and uh now I directly jump to the expath access yes okay now this is a picture you need to understand all right so xath basically works on Dom Dom is
01:47
Speaker A
So let me share a small document. So this is XPath document, a very detailed document, and most of them you've already discussed in the last class. I will share this document. You can just go through this types of XPath, absolute, relative, all these things. So we already discussed all these options in the last class. You can go through the document, and now I directly jump to the XPath axis. Yes.
02:11
Speaker A
understand some terminology like what is self node what is parent what is a child what is following what is sibling so these are the terminologies we need to understand first okay so if you understand this we can easily use those options let me just try to understand this so first thing
02:31
Speaker A
Okay, now this is a picture you need to understand. All right, so XPath basically works on DOM. DOM is nothing but what? Document Object Model. So when the DOM will be created, when you're browsing any web page, your browser will create it, and all the elements will be represented in the form of hierarchy, right? So this is representing a DOM actually, this particular picture, and we need to understand some terminology like what is self node, what is parent, what is a child, what is following, what is sibling. So these are the terminologies we need to understand first.
02:53
Speaker A
because we need to start from particular element or particular node so which is called self so from the self alone whichever is there here this is called parent this is called parent element of self because this is derived from this parent this is a child tag of this one so four is a
03:15
Speaker A
Okay, so if you understand this, we can easily use those options. Let me just try to understand this. So first thing, self. So what is self node? Okay, for example, you can take any node in the DOM. That is called self node. So wherever you're starting from, whichever node you are starting, that is called self node. Let us assume here six is a self node. Let us, you can take any node as a self node because we need to start from a particular element or particular node, which is called self.
03:45
Speaker A
now if I look at one here one is a ancestor of Sixth Element okay for example six is a self element for six four is a parent for four one is a parent again right one is a parent of form so
04:01
Speaker A
So from the self alone, whichever is there here, this is called parent. This is called parent element of self because this is derived from this parent. This is a child tag of this one. So four is a parent element of six. Four is a parent of six, and for this particular six element, seven, nine, ten, these are all child elements.
04:26
Speaker A
are the Childs and suppose if you have a s years seven is having another child or let's say nine is having another child or 10 is having another child so these are all called descendant nodes of six means what the parent of parent is called ancestor the child of child is called desent
04:48
Speaker A
Okay, under this, whatever elements are there, these are called child elements. Seven, nine, ten are called child elements. This one, seven, nine, ten are the child elements of six parent and child.
05:19
Speaker A
a ancestor because parent of parent and from sixth node self node 7 9 10 are the child nodes and from Seven we have another node called eight this is a child of child that means for sixth eight is a
05:35
Speaker A
Now if I look at one here, one is an ancestor of sixth element. Okay, for example, six is a self element. For six, four is a parent. For four, one is a parent again, right? One is a parent of four. So from the sixth element, one is ancestor. Ancestor is nothing but what? Parent of parent. So for sixth, four is a parent. For four, one is another parent. So for six, one is an ancestor. Ancestor is nothing but a grand, like grandfather, grandmother, right? So parent of parent is called ancestor, and seven, nine, ten are the children.
06:03
Speaker A
like brothers and sisters okay siblings so because five and 11 also comes under four four is the same parent whichever is parent for Sixth Element for five and 11 also having same parent so five and 11 are called sibling notes sibling okay but what is preceding sibling and following sibling so
06:28
Speaker A
And suppose if you have a series, seven is having another child, or let's say nine is having another child, or ten is having another child, so these are all called descendant nodes of six. Means what? The parent of parent is called ancestor. The child of child is called descendant.
06:48
Speaker A
following sibling so we can take any node as a self from that we can get all these elements okay from this we will get all the elements so these are the terminologies first we need to understand okay now let me ask you something here you guys can tell me suppose uh I'm taking this nine as a
07:15
Speaker A
Okay, that is a terminology. So self is a main node from where we are starting, and parent, child, and sister, and then descendant. So how many are understood now? Three, four, five. Three, four, five. Self node, parent, child, ancestor, and descendant.
07:32
Speaker A
an ancestor because parent of parent is called ancestor and uh from the nine which which one uh which one are siblings siblings seven and 10 very good now which one is preceding sibling preceding sibling is seven following sibling is 10 okay perfect so this is how we can simply identify the
08:00
Speaker A
So from the self node, four is a parent. From the self node, one is an ancestor because parent of parent. And from sixth node, self node, seven, nine, ten are the child nodes. And from seven, we have another node called eight. This is a child of child. That means for sixth, eight is a descendant.
08:21
Speaker A
the nocat we can also navigate side by side in all the directions in the Dom we can navigate all the directions in the Dom we can navigate okay so that is possible by using X x-axis now if I look
08:37
Speaker A
So these are the terminologies we need to understand. Now what is sibling? For four, suppose six is there. Six is a self node, right? For six, which one is a parent? Four is a parent, and five and 11, these nodes are also having same parent. So five and 11 are called siblings, siblings of six, like brothers and sisters.
08:56
Speaker A
siblings sibling is there any sibling for two siblings I'm asking there is one sibling four is there right because both are having same parent or not both are having same parent so four is a one sibling only one sibling again three is a child not of two three is a child okay four is a one sibling which
09:24
Speaker A
Okay, siblings. So because five and 11 also come under four. Four is the same parent, whichever is parent for sixth element. For five and 11 also having same parent. So five and 11 are called sibling nodes, sibling.
09:44
Speaker A
from self from that you can locate any element on the web page okay so for example uh let us take six is a six is a self node okay and now I want to locate this one and for fourth node I don't have
10:02
Speaker A
Okay, but what is preceding sibling and following sibling? So whichever node comes before this, that is called preceding sibling. Whichever comes after this node, that is called following sibling. So these are all children of one parent element, and again, whichever comes first, that is called preceding sibling. Whichever comes next, that is called following sibling.
10:21
Speaker A
five or 11 I want to locate this element and this one I don't have any attributes for them but still I can write an exp part for Sixth Element element from there you can identify fifth one from there
10:33
Speaker A
So we can take any node as a self from that we can get all these elements. Okay, from this we will get all the elements. So these are the terminologies first we need to understand.
10:53
Speaker A
possibility which we have in X paath even though we don't have attributes for the element you can find that element El or you can locate the element by using any of the neighboring elements and what are the Ning elements nighing elements can be parent it can be child or it can be siblings it
11:13
Speaker A
Okay, now let me ask you something here. You guys can tell me, suppose I'm taking this nine as a self node. Nine as a self node. For this nine, which one is a parent node? Just give a number. Which one is a parent of nine? Six is a parent. Which one is ancestor? Which one is ancestor? Yes, four is an ancestor because parent of parent is called ancestor.
11:39
Speaker A
this right so the first example parent we'll start from the parent and here the screenshot is actually incorrect uh I will correct it just hold on okay see this example uh I have this HTML this is my HTML and uh this is my self node let us assume
12:14
Speaker A
And from the nine, which one are siblings? Siblings? Seven and 10. Very good. Now which one is preceding sibling? Preceding sibling is seven. Following sibling is 10. Okay, perfect. So this is how we can simply identify the...
12:30
Speaker A
parent of this input tag here there are three here form D and D which one is a parent in these three for this input tag so actually the for input tag this is a parent the first div is there right so
12:48
Speaker A
So you can take any node from this DOM and that is called self node. From there, you can navigate anything. Okay, so you can see the navigation from here. We are locating parent nodes, means we are navigating the top, and by using this element, we are navigating to bottom like this. And by using the node, we can also navigate side by side in all the directions in the DOM. We can navigate all the directions in the DOM. We can navigate.
13:09
Speaker A
now my requirement is I want to locate I want to locate uh this particular node or this particular element from this okay I want to locate my this form element I want to locate my form element from the input node right so what we can do is we can write an xath for this input node let us
13:37
Speaker A
Okay, so that is possible by using XPath axis. Now if I look at two is a self node, let's say, let us assume two is a self node. And what is a parent of two? Here parent one is a parent. What is a child node of two? Three is a child node. What are the siblings? Siblings. Is there any sibling for two? Siblings, I'm asking. There is one sibling, four is there, right? Because both are having same parent or not? Both are having same parent. So four is one sibling. Only one sibling.
13:52
Speaker A
called parent keyword parent and every xath axis uh uh we have to use something called uh this is a symbol colon colon two colum we have to use this is a part of the syntax it can be parent or it can
14:09
Speaker A
Again, three is a child, not of two. Three is a child. Okay, four is one sibling. Which type of sibling? Preceding or following? Preceding or following? Yes, because if you come here, that is called preceding. If you come after here, this is called following.
14:29
Speaker A
form tag simply say only attribute name sorry only tag name so this is the xath of what actually xath of representing this input tag from there we are finding the form element so what we can do parent colon colon and form that is a tag we can specify so this is an example of xer how to
14:54
Speaker A
Okay, so now you understood easily. So it is very, very simple. If you know the DOM, you can find any type of element. If you take any node from self, from that you can locate any element on the web page.
15:15
Speaker A
regular expression so whichever is got parent available that element will be captured and sometimes suppose even I don't want to use xath axis like parent simply you can say slash do dot so dot dot will go to pent but this is won't prefer most of the times you can go with this one
15:37
Speaker A
Okay, so for example, let us take six is a self node. Okay, and now I want to locate this one. And for fourth node, I don't have any attributes. Still, even though if you don't have any attributes for the four, still we can locate this element from the self node. First, we need to write XPath for six. From there, you can go to the fourth element by using parent keyword.
15:59
Speaker A
it is not like inheritance okay so one element is having only one parent so as soon as you say parent form it will directly go to the paring tag and it will locate that element now if I look at this which one is a target element in this x PA which one is a target element we
16:17
Speaker A
And similarly, suppose I don't have any attributes for five or 11. I want to locate this element and this one. I don't have any attributes for them, but still I can write an XPath for sixth element. From there, you can identify fifth one. From there, you can also locate an 11th element.
16:30
Speaker A
we are directly getting the parent element form so this screenshot is wrong actually the actual parent of input is what this is actual parent as per the screenshot but I'm saying just ignore these two lines so then it will go and get this element so this is how we can use parent element
16:52
Speaker A
Similarly, if you have a sixth element and I want to locate this ancestor element, but I don't have any attributes for this, still you can locate from he...
17:30
Speaker A
and uh here we are taking this as a self node this is our self node okay this is our self node uh for this particular okay sorry yeah this is a self node green is representing the self node okay
17:51
Speaker A
so from this I just want to locate child element now can you tell me how many child elements are there for this element how many Childs are there two Childs right one is input other one is pad there are two Childs are there under this this is one and this is a two there are two elements are
18:10
Speaker A
there now I want to locate this element first this is my self element now I can write xath like this SL SL div ID equal to div username and this is the actual element we have written X paath from this I
18:26
Speaker A
want to locate CH element one of the child element simply you can use child keyword child colon colon and what is the tag name of this child input input is a tag name so we can say input that's it so
18:41
Speaker A
here we have located child element we have located child element from the parent in the previous example we have located parent element from the child element now we have located child element from the parent element so let us assume you don't have any attributes for this input tag still you
19:01
Speaker A
can locate this element by using parent element so first we have to return xath for this element and child of colon colon input so you can say input instead of input I can say span then the second element will match that is also child element right second element will match so we can also use
19:23
Speaker A
child is a keyword from xath axis okay so parent and Chang two things we have completed so far now let us see the next one grandchildren what is the terminology we have used for grandchildren grandchildren yes descendant what is grandchildren suppose okay it is a sell pH no this is a parent
20:02
Speaker A
this is a child so child is having another child What Child is having another child which is called as what descendant right child of child is called descendant and the parent of parent is called what ancestor ancestor descendant okay now we'll see them anister and depend descendants
20:30
Speaker A
so locating grandchildren see this example so here again I have a two inputs so let us take the form this is a self node okay from the self node I want to locate a grand child so which one is a grandchild of this form first let us find
21:02
Speaker A
the child element what is the child element of form child element this is the one right so this is the one this is the CH element so from form div and D these are the both two CH elements but uh
21:20
Speaker A
I want to consider the second one okay from this this is a child element from the second de input span these are the two child elements now tell me for the form element how many grandchildren are there how many descendant elements are there two two descendant elements right so input is one
21:45
Speaker A
descendant span is another descendant so these are the grand children for form tag now I want to locate this grandchildren input tag from the form okay now input is what and input is what descendant of form tag input is a descendent of form tag okay so how can we write that
22:12
Speaker A
descendant so let's go to the bottom screen so disend so from this element uh from the form element if you're locating input tag we use something called what descendant right so descend it suppose from this input tag if you're are trying to locate form element from the input tag
22:44
Speaker A
if you're locating form element then which keyword we have to use anist okay you understood the difference between descendent ancestor if you're trying to locate form element from the input tag we have to use ancestor from the form element if you're trying to locate input element because
23:07
Speaker A
this is descendant we have to use something called descendant keyword ancestor and descendant okay now see the examples below locating ancestors for the known element so this is the example just now we discussed see this so this is a inut tag and this is a ancestor tag so from this input tag
23:34
Speaker A
we are trying to locate this form element form is what ancestor of input tag so how to write a locator now first we will write xath for the input tag input element ancestor is my tag name sorry ancestor is Axis colon colon form form is what the tag name of ancestor tag name of grandparent
23:57
Speaker A
okay so this X paath will locate this particular form element okay that X paath will locate form element and same thing we can write like this first we'll write an X paath for the input tag then ancestor column colum you can simply say star because there will be only one ancestor there is
24:20
Speaker A
no possibility have multiple ancestors so parent and ancestor will always be unique one parent will be there for any node and one ancestor will be there similarly from the self node you can have multiple Childs you can have multiple dependents also descendant but ancestor parent will be
24:44
Speaker A
only one okay remember this point so we want to locate the ancestor element from if you look at input is a self node from there form is ancestor element so we'll write expart for this input tag slash ancestor of form this is the right X ancestor same thing we will reverse for
25:08
Speaker A
descendant elements so for The Descendant elements you can do like this this is the example for descendant elements so descendant is nothing but what child of child so if I look at this now we can consider this as a self node from this we want to locate input tag input is what
25:32
Speaker A
descendent element of form so I can write an xath for the form this xath for the form descendant is my keyboard colon colon input is a tag name of the descendent element instead of input if I say span here then it will able to locate the second descendent element that is a span element okay
25:56
Speaker A
so form is a self node effect can the form is a self node for that input is a descendant element so from here to here top to bottom so input tag we can find and suppose if you don't want to use
26:14
Speaker A
if you there are two input tags then you have to pass index number okay suppose here there is input if you have another input tag that is also descendant then here you can pass index if it is a first input tag if you want to locate you can bracket in the put one if you want to locate
26:30
Speaker A
second input element in the bracket you can put two like this so by using index we can get the element now same thing if you don't want to use any access still I want to locate an element then
26:42
Speaker A
what you can do first you can write an xath for the form element from here you need to directly jump to the input tag I don't want to get this one and this one so these two tags I want to eliminate
26:55
Speaker A
so simply you can say slash slash because what is the meaning of SL slash xath SL slash will directly jump to the element or tag so when it say SL slash input between this form and input form and input is there if there any tags are available or there any nodes are available they
27:16
Speaker A
will ignore it and from form to input directly it will jump that is the usage of Slash here if you don't want to use axis you can also directly use slash simple another example I'll tell you you get
27:28
Speaker A
can tell me I have A1 is my parent one node and uh which is also having another node called A2 which is also having another called A3 and in this there are three child elements a31 a32 a 34 okay now I
27:52
Speaker A
want to locate a34 how to write an next PATH from here to here I want to directly jump from A1 to a34 I don't want to get this element I don't want to get this one this one this one I don't want
28:09
Speaker A
to get any of this element directly from here to here I want to jump simply what you can do a slash A1 SL SL a34 this SL slash we'll ignore all the elements which will come between the main element
28:28
Speaker A
root element and Target element so that is a usage of SL slash okay it can be single element or it can be multiple elements present in between the root element and the target element all the elements will be ignored if I use SL slash you got my point so I'll me give you another example
28:52
Speaker A
so we use this SL lash many places let me just show you one more example okay so let's say I have one D tag inside this another I have D tag inside this another have D tag so this is another
29:08
Speaker A
tag and this is another tag okay now I want to locate this D tag from here so how to write an X path from here I need to navigate here first we need to go to this one D tag slash inside the
29:27
Speaker A
D this is a child element so I can say d tag inside this there are three D tags are there I want to go to third D tag third one so what you can say slash D of three this is an xath
29:42
Speaker A
this is a x paath because they have a three div tags I no need to ignore anything directly you can specify index okay if I don't specify index then what will happen from this div tag it will match all three div tags because we say only div right if I don't specify index then what
30:00
Speaker A
will happen it will give you the first div element by default okay if I don't specify index here this will give you the first element by default that's is how xath works okay so now so let us try to understand The Descendants so descendant means what child of child or we can say
30:28
Speaker A
grandchild so here this is the xath of uh form element descendant input input is what child of from the form this D is a child actually from the D input is a child so for the form input is a grandchild that is descendant element and you can also directly say SL slash input first
30:52
Speaker A
it will go to the login form and from here directly it will go to input because we don't have any input tags in this uh block only there is one input tag is there so we can directly go
31:06
Speaker A
to input tag this is called descendant ancestor and then descendant now we'll see another one following following and proceeding again in the following we have a following sibling preceding simply okay first we'll see what is following and preceding so what is the following elements
31:40
Speaker A
following siblings we have understood see for example if it is self node this is our self node what are the siblings so along with this self brothers and sisters these are all what siblings these are all called siblings again in the siblings we have a following siblings we have a preceding siblings we
32:11
Speaker A
have a following siblings this is called following siblings these are preceding siblings okay so here we are talking about following notes forget about siblings because following in the sense itself is following siblings okay following siblings and preceding siblings there are multiple things are
32:28
Speaker A
here following and preceding following sibling and preceding siblings okay now just with the example we'll try to understand this this is my HTML in the HTML if I look at this I consider this as my self node okay this is my self node from this element let's say this is my form actually in
32:54
Speaker A
this particular form there are three input boxes are there so this is one input box this another input box this is another input box one single form there are three input boxes are there so these three are what siblings only these three are siblings and if I look at here this input
33:16
Speaker A
tag this is another input tag this is another input tag these are all following noes for this input tag below this whatever notes comes here these are all following nodes and above this tag whatever comes out these are all preceding nodes okay actually in the picture I'm representing
33:39
Speaker A
in horizontal way like this okay but in the Dom how we will see you will see like this okay all are children of one parent only okay but these are all preceding and these are all following elements preceding and following preceding sibling and following simping okay when you
34:00
Speaker A
see the Dom structure the picture looks like this but here in the representation when I draw the picture I'm just representing like this because if you look at in horizontal way you can easily understand so these are all following and these are all preceding siblings but in actual in the
34:18
Speaker A
Dom structure this will come up and this will come at the bottom okay so try to understand this now so what are the following nodes of this particular element so under this element input is one following node input another input is one following node if I look at the picture
34:39
Speaker A
in the login form it will be like this so for this element what are the following elements are there this is one following element this is also one following element so these are the two following elements of this one okay now you guys can tell me same login form three elements now I'm
34:58
Speaker A
taking this as a self node what are the preceding elements of this this one and this one right these two are the preceding nodes and if you look at the first one is a self node bottom two are the
35:12
Speaker A
following nodes you understood now the difference between following and proceeding okay now if you look at the if you take first one is a first input box as a self element bottom two are the following elements okay and if you look at the bottom element as a self and above two are the preceding
35:36
Speaker A
elements got me point so if you look at this I'm taking the first input box if I take the first input box rest of the two input boxes are what following elements now if you want to locate an element this particular input box I want to locate so I can write an xath for the main input
35:57
Speaker A
element this the first element name is what id is what txt username slash following input now which element it will locate in this because there are two inputs are there as a following there are two input box are there now which input it will locate the first input box and if you want
36:19
Speaker A
to locate the second input box second following element then what we can do we can write index okay so from the self node we are locating following nodes by using following keyword okay for example I don't want to specify uh tag name just like I put a star here so then what will
36:50
Speaker A
happen so star so this will match both input tags because we not specifying index also we simply say star star representing all the tags following tags in this element okay that's the reason we can put like this and as I said if you want to locate a specific input box we pass index like
37:13
Speaker A
this or we can also use index xath function called last first first and last two methods are there so you can put input inside the input there are two inputs are there again I want to look at the first
37:28
Speaker A
input so you can put first method first function you can use inside the bracket or if you want to look at the last input box I want to capture we can use last function first and last you can use
37:41
Speaker A
these functions also instead of index instead of index not only input you can use first and last functions in any example so for example here this is my main D tag here One D another D and another D let's say I have four five D tags are there now I want to look at this one how to write an xar for
38:04
Speaker A
this D off slash d off here you can pass index number this is one approach another approach is what div off div last we can call this method so this will also get the last one and if you
38:23
Speaker A
say first year then it will get the first D tag and if you want to get middle of middle D tax you have to specify the index so this is another way to point a specific element by using index or by
38:40
Speaker A
using first and last so these are the methods are available so this is all about following following means what from that element which your elements are following under this they are all following elements means they all are having same parent okay so if I look at this uh next example
39:10
Speaker A
preceding locating preceding element so exactly opposite of following star means it will match all the input all the elements by using star we cannot locate specific web element and whichever elements are there with that t name all the elements will be captured yes so now proceeding is exactly
39:33
Speaker A
opposite of this if you look at the proceeding now I'm taking this as a self node span is a self node from this span input is one proceding this is also another proceding so two procedings are there for
39:51
Speaker A
this pan tag there are two preceding because this is a login screen actually so this is my first input box this second second input box first inut input is presenting first element second input is presenting second element what is this span here is the label you can see label here right so this
40:07
Speaker A
label so for this this is a preceding element and this is also preceding element if you want to get the preceding element first you can write X paath for the self node I'm starting from span here and preceding colon colon input so if you look at here preceding colon colon input there are two
40:27
Speaker A
input inputs are there which element it will match which one it will match obviously the first one because we are not specify index if I not specify any index here the first input box will be matched second input box if you want to get how can we get we can pass two index number you can pass so
40:48
Speaker A
preceding means what if you look at this this is a self node above this element whatever is comes under following okay sorry precedings and bottom of this whatever comes under following notes so following and these are all procedings Above All Elements comes under procedings below all elements
41:12
Speaker A
comes under following preceding and following okay now we'll see some more options following sibling and preceding sibling so we understood following preceding following and preceding now following sibling preceding sibling so what we need to understand here is this is a self
41:38
Speaker A
node okay so these are all what these are all which one following which one is preceding here what is this part proceeding or following following right so these are all following elements these are all preceding elements and what is these actually these are the same having same parent so that's the reason we
42:12
Speaker A
call them as siblings okay in the siblings again following and preceding so these things should be siblings first inside the siblings we will find following siblings and preceding siblings and one more important thing what is the difference between only following only following sibling both
42:35
Speaker A
are different actually following and following sibling is is one category and uh proceeding and preceeding sibling only sibling sorry preceding sibling only proceeding is different so what is the difference is sometimes what happens is if you look at the self node the self node following
43:02
Speaker A
is nothing but what all kinds of element under this whatever elements comes under all elements will be captured only preceding means under this all preceding elements will be captured so after these elements self node comes and after Self node following nodes comes and uh these elements may
43:23
Speaker A
not be preced may not be siblings may or may not be siblings BLS remember that point I'm talking about only following and only preceding when I say only following proceding there may not be siblings without siblings also following preceding elements will be there so when I say following under that
43:45
Speaker A
following there may be child elements there may be grandchild elements parent elements all elements comes into picture so following means they may not be prec they may not be siblings even though they have not siblings still we can capture following elements okay same same parent
44:06
Speaker A
element okay so only following only proceeding if you look at following and preceeding these elements may or may not be siblings that's the point I want to convey so earlier what we have understood is just following and proceeding elements we haven't uh noticed about siblings
44:33
Speaker A
only following and proceedings now following sibling preceding siblings means only in the siblings we are finding following and preceding only in the siblings but in the previous example we are not considering siblings we are considering all the elements so following elements preceding
44:51
Speaker A
elements are different and if you look at only following sibling and preceding sibling they are should would be siblings first inside the siblings we will find following and proceeding and if you look at this example okay uh our Target element is what here is span is my target element and input
45:11
Speaker A
and span what is the parent of these two tags and this one this is a parent so obviously these two are siblings these two are the siblings so if you look at sorry so if you look at this once
45:27
Speaker A
second yeah if you look at these two elements if you consider span element as a self input is what input is what sibling only right for input span is also sibling so which type of slipping is it is for span which type of slipping it is sibling it is preceding sibling because this comes before
45:56
Speaker A
the span and when you consider input is a self node what type of sibling it is span following or proceeding following simplying okay because it will come be bottom of this input so for input tag span is a following sibling for span tag input is a preceding sibling but both are siblings so
46:23
Speaker A
that is a condition you got my point so now if you write an xath for the username this xath for the input tag following sibling span that means what we are locating this following sibling from the input tag so this is X paath complete X paath and if you put star also it will able
46:48
Speaker A
to match because there is only one uh sibling is there for this input box so obviously it will go and directly locate span element this is called following sibling following sibling now exactly opposite of this preceding sibling preceding sibling same example again this is preceding
47:13
Speaker A
sibling if I look at this again now I want to loc at my span tag from the input tag so input is what sibling only so we will write sorry from bottom to top so we'll write an xath for the
47:29
Speaker A
span tag from there we will locate the element now this is becomes a preceding sibling right so this is xath of the span tag span contains a text username slash proceeding sibling this is a keyword proceeding sibling of what input is a proceeding sibling and because there is
47:50
Speaker A
only one input tag here we can simply says star star also representing specific input box so like this we can use preceding sibling so how many we have covered so far let me just write down everything so we understood what is self element right self whichever element we are starting
48:18
Speaker A
that's called self element now we understood what is parent element child element ancestor element descendant element right following element preceding element following sibling reeding sibling right is there any other options covered so far no right these are the options self parent
48:55
Speaker A
child ancestor descendant following preceding following sibling preceding sibling so these are all comes under X paath AIS okay and these are all different xarts example these we already discussed actually so chained X paath we have understood right so this is a example so this is the X
49:17
Speaker A
path and slash slash and this is another X path chained xath xath followed by another xath and uh yeah so this is all about expath access this is full-fledged document for xath and you can find all the even last class whatever we discussed even they those examples also available in the
49:41
Speaker A
types of xath absolute xath relative xath okay and then the sample HTML code of login screen and different examples locating elements with the tag name and attribute locating elements with a static visible text that is called inner text static visible text
50:02
Speaker A
means inner text this inner text and uh locating elements when part of the visible text is static like contains method we discussed contains and text method okay I will share this PDF you can go through each and everything so locating elements from prefix of the inner text is static
50:24
Speaker A
means start with function in the last class we did discuss start with so locating elements with visible text in input elements like this tag name value so by using attribute we can locate element locating elements with multiple attributes this is also we have seen multiple attributes means
50:43
Speaker A
we can put attribute one attribute two attribute you can put n number of attributes you can use end operator okay and uh you can use our operator in xath locating elements with the dynamic attributes means we can use either contains and start with we can write a dynamic xath and this is
51:03
Speaker A
a xath access okay now everything we can make it simple uh in selector Hub so in selector Hub there are more features are there let's say google.com and here let me open the browser so you can just look at if you're in latest version of selector Hub you can find
51:29
Speaker A
this icon you can just click on it so you will see window like this okay and even if you open another tab another applications like this this window still open okay this window will not be closed so this is a new feature they have introduced in selector Hub but in the
51:46
Speaker A
previously how we have done is uh if we open one page here if you right click and inspect selector Hub will open in here you can see in the dev tools you can see the selector H but if you as soon as you open another tab that is disappear so you cannot see again you have to
52:04
Speaker A
right click and inspect and again you need to open the selector Hub one more time you need to go and open the selector hub for every page you have to open the selector Hub right so that is a problem earlier so now what we can do is you can simply click on this icon and you can see
52:20
Speaker A
selector Hub and as even if you open another tab or any other applications still it was open here so this is another useful feature you can just maximize and minimize and everything you can do it and some more important options are there if I locate any element for example here I'm
52:37
Speaker A
locating inspecting this element and even you don't need to use the dev tools inspect option directly they provided one inspect option in the selector H click on it and then inspect this element okay so can just click on it and then inspect this element
53:06
Speaker A
okay now if you select this black now it is going selected takes few seconds of time okay sometimes if it is not working directly go with this D tools you can inspect any element you can just right click on this element like this inspect
53:40
Speaker A
okay this is the input element so you can just look at any element you can just inspect as soon as you selected this in selector Hub it will automatically generate all the locators let me open another page so you can take any page like this and you can just explore I'll show you some more
54:20
Speaker A
options in selector Hub right click and just open the selector Hub and you will see this yeah now you can see I just inspected this and you can highlight any element on this on this particular page so for example I'm highlighting uh search box here now
54:44
Speaker A
we can see it is given all types of locators automatically relative relative xath and all the locators we don't use selenium because they are giving locators for all other tools also and uh we use Absol xath class name name and uh relative xath okay so all these things we can
55:07
Speaker A
give so if you want to use any uh access right so how can we do it suppose I'm locating the search element this X paath for what search element so you can simply say SL slash so this is a one sorry
55:29
Speaker A
okay this is a one element is matching and uh if you simply say uh here SL slash it will show you all the options suppose I want to get all the following elements you can see as soon as you type F4 it is showing three options following
55:46
Speaker A
following sibling if you want to get all following elements you can select this one following elements and uh and again in the following elements there are n number number of elements are there so you can simply say star here now observe 313 elements are there
56:04
Speaker A
these are all following elements of the search element as I said in the beginning following and preceding elements may not be siblings they may not be siblings so all elements we got but only we want following siblings okay so then what you can see here instead of following you can
56:22
Speaker A
simply say following sibling so automatically all auto sessions will come so following siblings you can say star just observe there is only one element is there following sibling only one element what is that this is sear element this is the following sibling and suppose I want to
56:43
Speaker A
get proceeding sibling and only proceedings only proceedings so I can write like this slash slash I can say following so we are not getting preceding because we don't have any preceding elements for this okay so following and suppose I want to get child elements let's see do we have child no and
57:15
Speaker A
do we have a parent elements yeah parent elements are there so let me take parent and Then star see only one element because always parent will be only one element and do we have a child elements for this you can say child let us try no if it is not giving any auto suggestions means there
57:35
Speaker A
is no elements for child okay that's the meaning of this and uh what else we can try you can take any element as a self node and you can explore all these things you can check parent elements are there or not child ancestor descendant let us see ancestor element is there or not yeah
57:55
Speaker A
ancestor element are there you can just select the see here ancestor when I say star seven elements are there so ancestors seven elements are there because I put star here right so ancestors are there right so like this you can find in ancestor again if you want to locate a specific element we
58:19
Speaker A
can locate you can say ancestor header this will give you only one part in ancestor there is one header and uh similarly we can also get descendants can type D so if you're not getting there are no descendants okay so like this you can just explore all xath axis inside this selector
58:41
Speaker A
Hub okay and we can also use another features so can see these are I will explain these features in the coming sessions expath healing form page code attribute because once you understand some more Concepts like page object model that time I will explain okay what are these options and everything
59:01
Speaker A
even debugger code very useful options are there so which will reduce a lot of time and effort while creating our locators very very helpful so I will explain those topics in the coming sessions and uh yeah so you can just say inspect and you can also see the selor Hub in the dev tools window
59:21
Speaker A
and here you can see all the options it will show you and same feature are available here also in the side right side you can see this is driver command so currently locators are generating like this right but I want to generate this along with the command like driver. find element so then uh
59:38
Speaker A
we can choose this option second one set driver command to append on selector I just click on it automatically the expar syntax will appear and now you can see all expar all uh locators will be generated along with the command driver. find element by. xar so from now now onwards and if you
60:00
Speaker A
trying to locate any element suppose I'm locating this logo element now you can see it is generated logo element locator along with the driver. find element so this is one of the important features a driver command is available and uh this is for generating locators page suppose sometimes you
60:21
Speaker A
want to get the locators for multiple elements multiple elements okay for examp example I want to generate a locator for open cut search and multiple elements then you can use this option so just click on this circle click generate locator page and multiple selector and just click on it
60:39
Speaker A
and that's it it will open one window like this and whichever element you want to generate the locators you can just show them that's it you can just locate this open cart element see here and as soon as you just click on that element it is automatically generate the locator see here in
60:57
Speaker A
this box whichever element you selected from this page it is generating all the locators directly like this list of locators you can copy paste so here CSS will be generated xath will be generated and ID IDs will be generated if name is available names also will be generated you can simply copy
61:17
Speaker A
this copy all xath and you can use it in your automation so these features will very useful when you're designing the Frameworks actually okay so that time I will again uh explain all other features so this is for debugger maintenance and multiple options are there okay and sometimes uh
61:38
Speaker A
you can do like this for example uh locate one of this element see I'm locating this search element again I don't want to use this driver command so let us this is the xath right and by default in
61:55
Speaker A
xath if I look at here attribute value put inside the single ques right it is putting in the single CES and whichever element you locate on this page xath will be generated and the attribute attribute value they keep inside the double code single code so you can directly use this in your
62:16
Speaker A
drive by. driver command driver. F element by. xath command you can use it suppose I want to generate the double codes instead of single codes simply what you can do is you can use this option click to generate selectors with double code and once you selected this from now onwards all the
62:33
Speaker A
locators attributes they will keep inside the double quotes suppose I'm locating this element see here the attribute title value put inside the double quotations so you can put either single or double quotations both are correct but when I use this in your automation script put inside
62:52
Speaker A
the single quotations and again if you want to remove these double quotations again one more time click on this and now onward everything will be in the single quotations so like this there are some more features are there in the next session uh I will discuss more about this not in next
63:09
Speaker A
session once you start our framework concept there we will generate page object classes so that time I will explore all the features but in the middle of the session somewhere I will show you this debugger option okay and smart maintenance and uh there are some more options
63:25
Speaker A
are there so I will show you that selector Hub is available in all the companies many companies very big big companies are using it I don't have any issues with this yes can still use it no problem right so I will give you one example for this ancestor you guys can try so by using xath
63:47
Speaker A
axis just a second let me create another package so new package today day 25 so I'm just creating a new class name as xath access demo so I already have an example which I already created I will provide you that you can just explore it's very simple
64:33
Speaker A
expert access demo so this is the example guys so this is the web page I have taken so in this you can find all kinds of element following sibling siblings preceding ancestor Childs everything so this is simple table format so these are the elements actually
64:53
Speaker A
so in this I have explored all kinds of path axis self element how to use self and how to use parent okay how to use ancestor and how to use ancestor along with the descendant ancestor along with the following at first we can go to ancestor from there you can get the
65:14
Speaker A
proceeding okay and then go to ancestor then from there following siing and go to ancestor then following preceding sibling so these are the different examples I have taken let me try to execute you can find all the combinations of elements in the
65:38
Speaker A
table no such element exception let self a so I'm taking this lnt as a self element because this Pages keeps changing it's more Dynamic so Ln is not there in this list you can take any other element so let me take uh you can take anything let me take this jamato
66:28
Speaker A
so zato so lnt is not there in that list so all lnt you can replace with zato say contrl F and all lnt I will replace with zato you can take any of the company which is there in this table so
67:01
Speaker A
now I have repeated everything so all lnts I have repeated Vis to okay let's execute I'm considering one lnt is a uh zamot is a self node from there I'm getting all other nodes ning nodes yeah now we can see these are the different noes
67:29
Speaker A
we got so self is zamato even parent is also zamato is available let me check where is a parent I think for the parent also same name is given so it is giving zamato number of child elements ancestor element number of descend and notes I'm just printing size
67:51
Speaker A
actually I'm not printing all the elements I'm just printing the size so number of following elements 117 preceding noes 49 following siblings 115 preceding sibling noes 48 so you can capture that information so this is example I will also give you
68:07
Speaker A
the video link on this I have clearly explained this example can just go through it just a second and also if you want to learn uh in detail selector H recently I have created some videos on my YouTube uh
68:26
Speaker A
playlist is available in the free time you can just go through this so this is for expath Access so this is the link and this is for selector Hub tools in the selector Hub there are many options are there all the tools I have explained in the playlist so you can anyway in the
68:54
Speaker A
coming sessions I will explain about selector Hub but if you want to learn in detail all the tools from selector Hub you can go through playlist and this is example I have explained in the first link in detail okay take this and self node it keeps changing actually so here we today we have taken
69:11
Speaker A
zato right so tomorrow because these companies are from the stock market list right so these keeps changing so on particular day whenever you're trying this example you can just check and whatever the companies are there in the group a you can take any company from this
69:26
Speaker A
list and that you can replace here so everywhere copy and replace this will work okay these are very Advanced locators okay and uh it is not mandatory use xath AIS even though if you do not use xath axis still we can manage with normal xath functions so whatever we so far we covered in
69:49
Speaker A
the last classes like what is xath relative xath chain xpaths xath with uh start with x paath with contains xath with text and then R operator end operator so with this we can manage even though if you're working a very big project still it is fine they are more
70:07
Speaker A
than enough okay and if you more familiar with the expath axis then you can try it otherwise no need these are very advanced level of locators and if you find any very complex pages and if you're not finding any attributes for the elements okay and page is more dynamic
70:25
Speaker A
in those cases you can prefer to use xath axis otherwise you can still manage with the normal options which are already available with the xath so this is all about locators concept almost three sessions we discussed only on the locators part because in automation 80% 70 to 80% of the job is
70:48
Speaker A
locating the elements that is a major part so once you locate an elements because in the web page not only one or two pages you will have n number of pages so n number of elements are there for each
71:01
Speaker A
page so in automation projects the day one task is what you need to create a page object classes you need to locate elements from different pages and that will take lot of time so if you do manually everything it takes a lot of time so selector Hub will help you to reduce time and also effort it
71:22
Speaker A
will make your job very very simple and very very easy so once we start our project I will show you how to use selector H very effectively especially while working with the locators concept so 70% of the effort we will put in locators so once you write all the locators the next thing is
71:41
Speaker A
we have to interact with the web elements and we will perform different type of actions we will perform different type of validations okay then we will create end to end test cases so this is a BAS basic concepts once you understand how to locate element how many ways we can locate an element the
72:01
Speaker A
next step is we will learn different type of commands from web driver to perform different actions on web elements to automating the test case to perform the validations so that is the next thing so from tomorrow we will see how can we interact with the different type of elements
72:18
Speaker A
how can we validate them like how can we handle input boxes what type of validations we can do input boxes and how to handle checkboxes radio buttons dropdowns images links tables okay and mouse operations how can we perform drag and drop how to perform double click how to perform
72:36
Speaker A
single click so these are all different type of actions we perform on the web elements so next few sessions almost five to six sessions we will deal with different type of web elements and different type of action methods we will learn along with the locators locators concept will continue
72:55
Speaker A
every day on every example we will use different type of locators so after few days you will be familiar with all kinds of xath xath functions options everything you don't need to separately practice them because on day today basis we are trying to use everything in our automation test
73:10
Speaker A
scripts after few days so you will be familiar with all the options in locators as well as all the commands from the web driver you don't need to separately practice them so just practice my class examples whatever assignments I'm giving you just practice them so you will be familiar with
73:25
Speaker A
everything in few days okay so that is the next plan so we will continue in the tomorrow session
Topics:SeleniumJavaXPathXPath axesDOM navigationSelectorsHubXPath terminologySelenium locatorsXPath selectorsQA automation

Frequently Asked Questions

What is an XPath axis and why is it important?

An XPath axis is a way to navigate through the DOM in various directions such as parent, child, ancestor, descendant, and siblings. It is important because it allows locating elements even when they lack unique attributes by traversing related nodes.

What are the key XPath terminologies explained in this session?

The key terminologies include self node (starting point), parent (direct ancestor), child (direct descendant), ancestor (parent of parent), descendant (child of child), sibling (nodes sharing the same parent), preceding sibling, and following sibling.

How can XPath axes help in Selenium test automation?

XPath axes help testers write more robust and flexible locators by navigating through the DOM structure, enabling element identification even when attributes are missing or dynamic, thus improving test reliability.

Get More with the Söz AI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

Or transcribe another YouTube video here →