Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
XPATH is another option to use when finding elements. It is similar to CSS in that it allows for finding elements using complex criteria. In this video we will take a look at using XPATH matchers and the unique features they offer.
Shared Code
const invitees = [
'Gonzalo Torres del Fierro',
'Shadd Anderson',
'George Aparece',
'Shadab Khan',
'Joseph Michael Casey',
'Jennifer Nordell',
'Faisal Albinali',
'Taron Foxworth',
'David Riesz',
'Maicej Torbus',
'Martin Luckett',
'Joel Bardsley',
'Reuben Varzea',
'Ken Alger',
'Amrit Pandey',
'Rafal Rudzinski',
'Brian Lynch',
'Lupe Camacho',
'Luke Fiji',
'Sean Christensen',
'Philip Graf',
'Mike Norman',
'Michael Hulet',
'Brent Suggs'
];
Learn More
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
As you just saw, CSS is pretty powerful.
0:00
It does a great job of remaining
concise and extremely expressive.
0:03
Now believe it or
0:07
not, XPath can do even more, but
it quickly looses its conciseness.
0:08
I want to do some exploration with
you because it's so super powerful.
0:13
Sometimes you'll need to lean
on it when CSS falls short.
0:16
For instance, here's one case that you
can't do reliably across all browsers yet
0:20
with CSS.
0:24
We want find an element
based on its content.
0:25
We want to find one of those
invitees by name, so let's do this.
0:28
Okay, so first let's get some more
students added here to our invitee list.
0:33
In the teacher's notes,
I've built an array of invitees, and
0:39
I'm gonna drop them right here at the top,
right under our driver there.
0:43
Boom.
0:47
There's all our students right?
0:48
Look at all those beautiful names,
all right.
0:51
So, those are in the teacher's notes.
0:55
All right, and now I just want to add all
these invitees, and since that's an array,
0:58
let's just use an array method there.
1:03
So we'll say invitees, which is that
array there, and we'll say, forEach.
1:05
So the way that this works
is it takes a callback here,
1:10
and a callback expects each
one of those elements, so
1:15
we'll say invitee => addInvitee(invitee),
cool.
1:20
So, actually if you look at it,
what happens is this is just looking for
1:26
a function that takes an invitee,
and that's what addInvites does,
1:31
so what we can actually do is just
do this forEach of those invitees,
1:36
(addInvitee) like so.
1:41
I'm gonna make sure my workspace
is running, and it is, and
1:43
then I'm going to go ahead, save this
file, and I am gonna do my up arrow and
1:47
run this, and watch this get filled out,
it's beautiful.
1:53
[NOISE] And I clicked the toggle
button at the end there, [LAUGH] but
1:57
look at these names,
I would love to go to this party.
2:01
What a great treehouse party this is.
2:04
So let's assume though that I was just
trying to get a hold of one of these
2:07
by name, like let's assume that I was
trying to here to get a hold of this
2:11
one by Shadd Anderson.
2:15
Now he trolled me earlier on Twitter
by saying he didn't wanna do it, and
2:16
then he said okay sure, [LAUGH] because
that's what Shadd does, he is a troll.
2:20
So let's do this,
let's remove Shadd from the party.
2:26
So, I wanna lean on XPath here.
2:29
So, what I'm gonna do is I'm gonna go
to the elements tab, so let's Inspect.
2:32
Cool, and let's bring this down,
let's close these new releases, and
2:37
let's go ahead, and
let's pop this up a little bit.
2:42
There we go, and
I'm gonna open up the find again.
2:46
So, remember you can do XPath or
CSS up in here.
2:48
So what we wanna do is we
wanna do a relative search.
2:51
Let's see,
what does this look like actually?
2:55
What's in here?
2:57
Okay, so there's a span and
then the name there.
2:58
Okay, so what we wanna do is a relative
search from anywhere in the document,
3:02
and with XPath,
you do that with two slashes.
3:07
So we say anything there, and
then so now, just like CSS,
3:10
we specify the tag name that we want.
3:14
So we wanna find a span,
cuz we're looking for a span.
3:17
Okay, so there we go.
3:21
So there's 24 spans on this page.
3:22
Let's kind of make sure that those
are all the names of the people.
3:25
There's the Shadd one that
we wanna get rid off.
3:27
Okay, cool, awesome.
3:30
So, we don't wanna grab this first span,
and
3:32
there's 24 of those available there, so
3:35
what we can do is we can do more testing
on each of these nodes that's found.
3:38
So remember we wanna find a specific text.
3:43
We wanna find Shadd Anderson.
3:46
So to do that, we do what is known as a
predicate, and it further tests your node.
3:48
So those are in hard brackets, like so [],
and in here, we can check an expression.
3:53
So the expression that we're gonna call,
3:58
we're gonna call [text()=
"Shadd Anderson"].
4:02
Now look at that, we got the span.
4:07
Now text gets all of the content in the
element and it's checking for equality, so
4:10
we got it.
4:15
So, but man, how do we get this button?
4:15
How do we get this remove button?
4:17
So we have a lot of options,
but let's work our way there.
4:20
First, what we could do is we could go up
to the parent, the parent is the li there.
4:24
So, let's try that.
4:29
So, in XPath,
you can reference different axes,
4:30
and one access that we can
reference is the parent access.
4:33
So I can do this, I can say /parent,
and then do the axes, you do :: which
4:37
a little wacko, but we'll do that, and
then you say what you're looking for,
4:42
so we're looking for the li above
Shadd Anderson, so that is that.
4:47
So, now if we don't really care what
the parent is, we can do parent::, and
4:51
you can just do star, and
star kind of just selects anything.
4:55
You can actually do that anywhere,
star's kind of a wild card.
4:58
But this parent parent star has done
enough that they actually made a shortcut,
5:01
which I think it reads a little bit
better, especially in our scenario, and
5:05
that's the double period, and that looks
like a, kind of like a directory changing.
5:08
So there we go, so if you do ..,
that's gonna find any parent of Shadd.
5:14
There's only ever one parent, right?
5:19
So now we're in a place where
we want to do a new node test.
5:21
Here's a point where you
get to pick your poison.
5:26
What's more likely to change in our
current situation, is it the copy, or
5:28
is it the layout?
5:31
So, I could definitely hard
code the text of this button.
5:32
The button that we wanna find
is the one that says remove.
5:35
So, let's do that.
5:38
See, inside the button
there's text to remove.
5:40
So we could try that, so
we could just do, like we just learned.
5:42
Say button, so that found the first one.
5:45
Let's see, it found two, but
let's get specific about it we'll say,
5:46
[text()="remove"], and there we go.
5:52
So that's one way to get it, but
what if that text changes to delete?
5:55
If this is more likely to happen and
the design is to change,
6:02
you can of course go another route.
6:04
So let's say that we wanted
to just get the buttons.
6:06
So we could lose the predicate.
6:09
So let's lose this predicate.
6:11
So we're back to two buttons here.
6:12
So layout-wise, it's the second one,
so we could use an index.
6:16
So we can say, button[2], and
I do wanna point out here that in XPath,
6:19
it surprisingly is not zero-based, like
arrays in most languages, it's one-based.
6:25
So we're looking for the second one, and
we're actually using the number two,
6:33
zero doesn't come into play,
unlike typical array indices.
6:36
So the other thing I can do is
I can also specify that I want
6:40
the last button in there.
6:43
There's also sibling axes
that we could use, and
6:46
it's equivalent to the plus
sign that we saw in CSS.
6:49
Check the teacher's notes for
more information on XPath.
6:52
But for now let's just use this
one in our code, so let's grab
6:54
this selector that grabs the last
button where it's named Shadd Anderson.
6:58
Now, we need to make our
locator more dynamic than that.
7:04
Different languages have different
ways of handling this, but
7:08
JavaScript's newer syntax
really shine here.
7:11
So what I wanna do is I
wanna make a locator, and
7:14
we'll name it exactly what we want.
7:17
So we're gonna say, we want this
to be the removeButtonForInvitee,
7:20
and what we'll do is
we'll have this thing,
7:26
this will be a function,
so it requires an Invitee.
7:30
So you pass it an invitee, and
the you'll get back the proper selector.
7:35
So what we'll do is we'll say By.xpath,
and
7:39
we'll pass in what we copied from there.
7:43
This has the quote problem
that we had seen before.
7:49
What we really wanna do,
I'm gonna leave those quotes there,
7:54
because what we're gonna do is we're gonna
change this to be a template string.
7:57
So I'm gonna remove this,
I'm gonna change this to the tick, and
8:00
if you haven't seen template strings
before, they're really slick.
8:03
So what happens is I can now
access variables that are in my
8:07
scope by using a $ and
surrounding them with these.
8:13
So template strings, more on those in the
teacher's notes, I'm gonna get rid of this
8:18
semicolon at the end here, and
let's see if I can't get this fully open.
8:22
The font up pretty high for everybody but.
8:27
So removeButtonForInvitee, and
what happens is, you pass in an invitee,
8:29
and then to the function, and
8:34
the function will return a finder
very specific to what you typed in.
8:36
So whatever's typed in here is gonna
get replaced here in the string, and
8:41
that will return the locator,
so let's use it.
8:45
So under addInvitee here,
I'm gonna say, function removeInvitee.
8:49
So removeInvitee will take
the invitee's name, and then we'll
8:55
say,driver.findElement(locators.removeBut-
tonForInvitee).
9:01
Now remember this is a function, so
we're going to pass in what was passed in,
9:08
And then we're gonna click,
9:17
because that thing's gonna
build the proper XPath for us.
9:19
So let's call that, I'm gonna turn
off this toggle at the end so
9:23
we can see it really quick, and so
all the invitees are gonna be added,
9:28
and then we're gonna say
removeInvitee("Shadd Anderson").
9:34
Cool, all right so, we're gonna pass in,
we're gonna call the function,
9:42
we're gonna pass in the string "Shadd
Anderson" and it's gonna come in here,
9:46
It's gonna go into find element.
9:50
Find element needs a locator, so
it's gonna run this function,
9:52
removeButtonForInvitee and
pass in "Shadd Anderson".
9:55
Here's the definition of the function,
this will be "Shadd Anderson", it will
9:59
come through and say "Shadd Anderson" and
the XPath will find specifically that.
10:02
Let's go ahead, and let's run it,
and make sure we got things working.
10:07
I'm gonna press the up arrow.
10:11
I'm gonna close our other one that
we had open, and I will call this.
10:12
There we go.
10:20
There it is, fills everybody out,
and it removed Chad from there.
10:21
I wanted to show you
one more thing in here.
10:25
If you come in, just like before in
the console, we were able to use dollar,
10:28
dollar, we can also, if we wanted to
check an XPath, we can choose $x.
10:33
So again, let's make one up.
10:38
Let's say we wanted to find the form,
we wanna find anything,
10:40
let's find anything remotely, any type
of element that has the ID of registrar.
10:45
So that should return
the form with that ID.
10:54
Awesome, and it does.
11:00
Cool and so, again,
when you open this up, and
11:02
you mouse over it, it shows what it is.
11:05
So $x will do any Xpath query,
right there, from the command line.
11:09
Awesome, right?
11:13
I hope you're beginning to
see how powerful the CSS and
11:15
XPath selectors can be.
11:18
Remember to always try and
keep things unambiguous and precise.
11:20
There are many ways to
select the same element, but
11:23
you should always embrace the lazy.
11:26
Try and
focus on what is least likely to change.
11:28
You don't want to do more work
than you need to, do you?
11:31
One thing I wanted to point out
was how good the abstractions
11:34
are starting to feel.
11:37
We were able to say, add invitee,
and remove invitee, and
11:38
we weren't really even talking about how
that was implemented, user interface wise.
11:42
What this means is that if things
were to change in our app,
11:46
we could definitely update our locators
and our methods to match the new layout or
11:49
interface, and that is pretty powerful.
11:53
We've abstracted a way to how.
11:56
Currently, we are only dealing
with a single page application,
11:59
but imagine this across
a huge application.
12:02
This level of abstracting away
the actions you can do on a page would
12:05
definitely be ideal.
12:09
Well, there is a pattern that emerges
pretty quickly during automation of larger
12:11
projects that encourages this
abstraction for readability and
12:15
code duplication avoidance.
12:18
It's called the page object model, and
12:20
we should take some time
to explore its benefits.
12:23
Let's do that right
after this quick break.
12:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up