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
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up