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