Preview
Video Player
00:00
00:00
A Fork in the XPath
12:28XPATH 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.
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