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
In this video we will cover other types of element finds.
Learn More
We found our element to interact with but
our locator was way too specific.
0:00
Any change to the page can potentially
break our ability to access that element.
0:05
Now detailed knowledge about
the structure of the layout of the page
0:09
is definitely an automation anti-pattern.
0:13
You want to be as specific as you can be,
but not as rigid
0:16
as to require the entire structure
of the document to remain unchanged.
0:19
If you fall into that trap,
0:23
any change to the layout of your
page breaks the locator strategy.
0:25
This how do I be specific
about an element without
0:29
relying on the page structure
problem is actually quite common.
0:33
We see this a lot in both CSS and
0:37
JavaScript in the DOM, or
document object model.
0:39
We want to be able to specify the exact
element that we're talking about.
0:43
Now a typical solution to this is to
add an identifier to your element.
0:47
In HTML, we do this with the id attribute.
0:51
Then in CSS, we can reference
it with the id selector or
0:54
we could use get element=
by id in JavaScript.
0:58
So the good news is, most of the time,
the page you are trying to automate is
1:01
already setup to have
easily locatable elements.
1:05
Because others have needed to access
things either for style or interactivity.
1:08
Selenium allows you to leverage that work.
1:13
Why don't we take a look at accessing
these elements by their identifier?
1:16
Okay, so let's start by looking
at the layout of our page.
1:20
Well first, is your server running?
1:23
[LAUGH] It's sounds like that
old prank call, doesn't it?
1:25
You better go catch it.
1:28
So mine isn't, so
I'm gonna click Continue Working.
1:29
And I'm gonna choose Reload.
1:31
And this should be enough to start
our preview up and running again.
1:33
All right, so I'm going to flip back and
let's go back to our ripple.
1:38
And we'll say,
node get that up and running.
1:46
And I'm gonna again press the up arrow.
1:48
Let's bring in Selenium and
let's also bring in By over here.
1:51
And then we will go ahead and
might as well set our url.
1:57
And let's get the driver built, so
2:05
we're gonna build the driver
using the builder pattern there.
2:08
And then we are going to,
2:11
and you saw it pop up behind there,
let's go ahead and open up our page.
2:13
Okay, now let's try to see
what sort of id we have.
2:18
So we're looking again,
we're looking at this text input.
2:22
So right click and Inspect, okay,
I'm gonna look at the Elements tab here.
2:24
I'm gonna close this, let's go ahead and
bring this down here.
2:29
And I'm gonna pop this up for
visibility purposes.
2:35
Okay so we've got an id,
not on the input tag, but
2:39
we do have one on the form tag here,
so it has an id.
2:42
So, let's see what that looks like, so
let's flip back over to our code here.
2:47
So what we'll do is we'll make
a new variable called form.
2:50
And we will use the find
element method of the driver.
2:55
And our locator strategy this
time is going to be using By.
2:59
And there's another method here,
named id, and it takes the id.
3:03
And again, that id, let's flip back real
quick and make sure that id was registrar.
3:11
So we should be able to get
a hold of that by ID registrar.
3:16
Cool, so now we have a form element.
3:22
Well, eventually,
remember this is a premise.
3:26
But it is in our field, so
we can't just send keys to the form, but
3:29
what could we do with this element,
we have a hold of it.
3:34
So this is a great time to
look at the documentation.
3:37
Let's do a search for
Selenium WebDriver API.
3:39
And I'm just gonna throw on
a JS there just to make sure
3:47
we get the one that we're talking about.
3:50
Cuz remember, there's a bunch
of different languages for it.
3:51
So I"m gonna click this selenium-webdriver
one right here, awesome.
3:54
Let's open up these modules here, and
if you click the selenium-webdriver,
4:00
this will show all of the documentation
here and they're pretty great.
4:04
You can see here that if you scroll down,
we have this WebElementPromise.
4:09
And that's what we have,
let's click into that.
4:14
If we scroll down, you'll see
that it has some methods, right?
4:16
So, you can cancel or click or
find, get an attribute.
4:19
So, let's see, which one we can do here?
4:25
Here's getTagName, let's go ahead and
if we click it will open up and
4:28
will tell you what it does.
4:31
So it says it schedules a command to query
for the tag/node name of this element.
4:32
Awesome, so that's the tag name.
4:39
So the tag name should be form, right?
4:40
But let's look, in this case, this is
saying that it returns a Thenable, so
4:43
that's a promise, okay?
4:47
And it's probably like you're
usually accustomed to.
4:49
So, what happens is you call the function
this getTagName, and it returns a promise.
4:52
And see how it's
a Thenable of type string.
4:57
So that string is gonna be the name.
5:00
So, to get access to that value,
you need to call and
5:03
then provide it a function,
so let's do that.
5:07
So we're gonna get the tag name for
the form that we got.
5:10
So let's come back to where we're at,
here we are.
5:14
So we're gonna say form.getTagName, okay?
5:16
And again, that returns a promise.
5:22
So a promise has a then on it, okay?
5:25
So after it's gone and gotten the tag
name, it's gonna call a function for us.
5:27
Now we're gonna use
the arrow function syntax.
5:31
If this is new to you,
check the teacher's notes.
5:34
So the function expects
a string called name and
5:36
then we're just gonna print it out.
5:41
We'll say console.log("Tag
5:42
name is " + name)).
5:47
Make sure we close that out properly,
awesome.
5:52
So tag name is form,
cool, there's our value.
5:56
So let's look at another one really quick,
let's flip back to that doc.
6:00
So let's say, get Let's see, there's text,
getSize, that's fun, so let's do this.
6:03
So it's Thenable that returns an object
that has a height and a width.
6:11
And it computes the size of
the elements bounding box in pixels.
6:16
Well, that's pretty cool right,
so let's try that.
6:19
Let's go back to our form,
we'll say form.getSize.
6:23
And again, it returns a promise,
it's a thenable.
6:30
And the size object,
6:33
it's gonna be an object that has
a height and width on there.
6:35
So we'll say console.dir(size),
cuz we'll wanna spit that out so
6:37
it looks a little bit prettier.
6:41
So then, and look at that, so,
the size of the form is 54 by 520.
6:43
It looks like it has some other
information in here, it's not filled out.
6:49
Okay, so we still need to get to
our input field though, right?
6:51
We need get here, how can we do that?
6:56
Well, you know what,
I do have access to that source.
7:01
Why don't I just go in there and
add my ID, right?
7:04
I mean, what could go wrong?
7:06
So I am gonna come in here.
7:07
Here's our input type I'm just gonna go
ahead and I'm gonna say id="invitee".
7:09
Cool and then if I come back here and
I can just go get that, right?
7:15
It looks pretty easy so we'll
7:21
say const field = driver.findElement.
7:25
And again, we want to find it by id, and
7:30
the id that we just
added is called invitee.
7:34
So it should fail now, right, because
the document's open, so it can't find it.
7:37
So wow, that failed really hard.
7:42
So it says,
no such element: Unable to locate element.
7:44
ID invitee.
7:49
Ok, so, it can't find that, so.
7:50
Let's go ahead and, I'm gonna go ahead
and, see, left this thing up and running.
7:52
And these will start piling up here.
7:56
Let's go ahead and let's close this.
7:59
And I'll start things up again.
8:04
Boy, we need to do something about this,
don't we?
8:06
Selenium and we're gonna go ahead and
8:10
build the driver we need to
make sure that we get by here.
8:13
There's our by, and then we need to do the
builder, we've got the builder already.
8:18
We need to get the url which we haven't
set yet, so we need to set the url.
8:24
Now we can do driver.get (url),
okay, so now our page is open again.
8:31
And I wanna try and
find that field, there we go.
8:36
Field =
driver.findElement(By.id"invitee"));.
8:39
And it should be there now,
because the page just refreshed, right?
8:42
Okay, so now we've got the field,
and let's do our trick there.
8:46
And we can say field.sendKeys("Found
by id"), boom, we did it.
8:52
Now, before we go celebrating too much,
9:01
I kinda led you down a path
towards a bad practice.
9:04
Adding specific attributes for
automation purposes
9:07
only is a common trap that people just
getting started tend to fall into.
9:10
So I wanted to walk you through it,
sorry for misleading a little bit.
9:14
But let's think this through,
9:18
we don't really wanna add
an id to every element, do we?
9:19
First off, you might not have access to
make the modifications to the source,
9:23
like we just did.
9:26
Maybe you're on a team that doesn't have
the ability to make those kind of changes.
9:27
And second, it's a lot of work, imagine
all those ids that you'd have to create.
9:31
You'll find that when working on a team
that relying on ids that you created
9:37
might mean that people using them for
CSS won't understand what they're for and
9:41
[SOUND] remove them.
9:46
If you need another reason to avoid
using ids just for locator purposes,
9:47
this will probably seal the deal.
9:52
One thing you might not realize
is that elements with the id
9:54
attribute actually pollute
the global name space.
9:58
Here, let me show you real quick,
so I'm wanna go ahead and
10:00
open up, let's full screen this.
10:04
I'm gonna go ahead and open up our Tools,
I'm going to Inspect this element.
10:06
I'm gonna flip over to
the console here and close this.
10:12
So, you probably know that already,
with JavaScript,
10:18
we could say document.getElementbyId and
it has an invitee right?
10:22
Check this out,
if I do window.invitee, look at that.
10:31
Also, it's available on the window.
10:38
That means that a variable was
created just to store that element.
10:41
And because window is
in the default scope,
10:46
we also just have a plain
old variable called invitee.
10:49
Just available, yeah, there is,
10:53
let's remove that id and be a good
teammate and a good JavaScript citizen.
10:56
So I'm gonna get rid of
that id that we added.
11:01
Save that, now in order to get at
that unidentified input element,
11:07
we're going to need to explore
a few more locator strategies.
11:11
Let's do just that right
after this quick break.
11:16
You need to sign up for Treehouse in order to download course files.
Sign up