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
Ideally we will not add IDs throughout our document. In this video, we will use our documentation to look at the static methods available for finding elements.
Shared code
const selenium = require("selenium-webdriver");
const By = selenium.By;
const driver = new selenium.Builder().forBrowser("chrome").build();
driver.get(process.env.URL);
Windows instructions
In windows this takes two commands, first you set your environment variable, then you call node
set URL=http://www.your-url-here.com
node
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
Okay, so now that we know that we really
shouldn't be sprinkling IDs all over our
0:00
document, we need to come up with some
better ways to approach this problem.
0:05
Let's take a look at what else we
have available in the documentation.
0:09
So what I'm gonna do is I'm gonna
navigate over to our By class here.
0:13
So let's go in here, in this By class, and
0:17
let's take a look at what else we
have in these static functions here.
0:19
By.className, that's kinda nice.
0:23
So that's like a CSS class.
0:25
Let's see if our code has that.
0:26
So it does have a class on the wrapper,
but our input file doesn't have that.
0:30
It does have this name attribute,
which the form uses when it's submitted.
0:35
So let's look and
see if that exists in here.
0:39
By.name, perfect.
0:45
The name attribute has the given value,
awesome.
0:47
So let's use that,
all form inputs have a name.
0:49
So let's go ahead and
make sure that the workspace is loaded.
0:52
I'm gonna click this, cuz I've got
a little surprise for you here.
0:56
So let's click this,
we'll launch our preview here.
0:59
I'm gonna grab that URL one more time.
1:02
And to save us some time,
1:06
what I've done is I have written
the code that you can just paste.
1:08
But it's gonna require you to,
when you start this up,
1:13
we're gonna have to paste
in an environment variable.
1:19
So that's gonna be URL=, and
I'm gonna paste in what I just had.
1:22
So if you haven't seen this before,
this pushes stuff into the environment and
1:26
you can then use it in your program.
1:30
It's a little bit different in Windows,
so check the teacher's notes for that.
1:32
So I'm passing in my URL and
now I'm gonna type node.
1:35
Then, in the teacher's notes below,
1:40
there is a string of text that
you can copy for the command.
1:41
So I'm just gonna grab that, then copy it,
and then I'm gonna paste it.
1:45
We have our app running,
I'm gonna close this other one.
1:51
See, they keep on piling up.
1:54
So this is our new one here.
1:56
And see, what happened,
in the code that was pasted out,
1:58
this process.env.URL that's
what we set up here.
2:02
So as long as we set that,
2:05
now the reason why I had to do that was
because mine is different than yours.
2:06
My workspace ID is different
than what yours looks like.
2:09
So yours will look a little bit
differently here, but it's now saved and
2:10
you can pass that through each time.
2:13
So we don't need to type all
that beginning stuff again.
2:15
Okay, so let's get it by name.
2:18
So we'll say driver.findElement.
2:21
And remember, it's By.name.
2:24
Now, the name of the attribute
is actually name, right?
2:28
So the value was name, because it's
gathering the first name there.
2:33
Cool, so that found it.
2:39
And now, since we have it,
instead of storing that in a variable,
2:41
what we can do is a thing called
method chaining, all right?
2:44
So we know that that returns the element.
2:47
So now we can say sendKeys,
and we'll say found by name.
2:49
See, what's happening here
is it found the element and
2:56
then it's calling sendKeys on it.
2:58
So let's do this, let's bring that up so
we can see it, shrink our window here.
3:01
Boom, found by name, awesome.
3:07
So that's by name, but what if I wanted
to grab it by the tag name, right,
3:10
the tag name input.
3:15
Well, let's hit that documentation again,
I think I saw that in there.
3:16
So By.name, partialLink, By.tagName.
3:21
But look at this, it's deprecated.
3:27
So it says locates an element with
a given tag, this is what we want.
3:29
It says, instead use By.css(tagName).
3:32
So it's deprecated and
that means it'll work now.
3:36
But in the future releases,
it very well won't.
3:39
So let's go ahead and
let's use that new version.
3:42
So let's see, so it says just use
By.css(tag.Name), so we can do that.
3:46
Uh-oh, my spidey sense is going off.
3:52
Isn't there more than
one input on the page?
3:55
Yeah, I think there must be, right?
3:58
There must be something
more than just that input.
4:01
So let's go ahead and
bring this up with Inspect.
4:03
So we've got the input here.
4:10
And this check box here, I think that
this, yeah, look, it's also an input.
4:13
So there's a couple of options
when you have this problem.
4:21
You could call a method
named findElements.
4:23
Now note, the S there is making it plural.
4:27
It returns an array of WebElement, and
you could loop through it and try and
4:29
suss out the right one, or let's do this.
4:34
So you might have noticed that
on the WebElement object there's
4:36
also a findElement method.
4:39
What's cool about this is it searches
only within the children of that element.
4:42
So what we could do first is we could find
the form, could find this form, right?
4:46
And then find the input.
4:53
And because the form children
only has one input and
4:55
it's not catching this other input
down here, that would do it.
4:58
So let's find the form like we did before.
5:03
So we'll say driver.findElement and
5:06
we wanna get that by its ID and
its ID was registrar.
5:12
And then let's just method chain our
findElement to get the input tag.
5:18
So, again, we'll just do that,
so we've got an element and
5:24
it has a findElement, right?
5:27
So we're gonna say,
inside of the form let's find
5:28
the first tag that is input.
5:33
And we know there's only one right now,
right?
5:38
And again, it said to use
By.css instead of By.tagName.
5:41
So let's do that, let's go ahead,
let's close this up.
5:45
And first, let's clear it.
5:50
Okay, so what that will do is that will
erase everything that is in there, boom.
5:53
And then we will update one more time,
and we'll do sendKeys.
5:59
And we'll say, let's see, Found form and
6:06
then found input by css.
6:11
So we did a chain find there.
6:14
Awesome, so again,
first we found the form using the ID and
6:17
then we chained off of that form
element and found the first input.
6:22
And then we chained off of that and
called sendKeys on that input.
6:28
This kind of nested searching from one
element to its children is quite common
6:32
and is a great way to avoid
adding attributes to your markup.
6:36
You are now armed with how to
find elements on your web page.
6:40
This is huge, this is the fundamental
task that you need to know to start
6:43
automating with Selenium WebDriver.
6:47
As you'll soon see,
after you've found the element,
6:50
interacting with it is
extremely straightforward.
6:52
You've done the challenging part already.
6:55
Great job!
6:57
There are even more ways
to locate elements.
6:58
And I suggest that you browse that
By locator class API documentation.
7:01
I've linked to it in the teacher's notes.
7:05
Later in this course, we'll dive deeper
into how to use the more advanced features
7:07
of the By.css class and
the super powerful By.xpath features.
7:10
So let's recap some of the best
practices that we just covered.
7:15
Keep your locator strategies concise.
7:19
The shorter, the better.
7:22
The less you have to specify, the better.
7:23
But you wanna make sure that
you keep them unambiguous.
7:26
Like we saw,
the locator can match multiple elements so
7:30
you need to make sure you're
specifying the one that you intend.
7:33
But be careful to make sure
that they remain reliable.
7:37
You don't wanna be so
specific that things are fragile.
7:41
Your page is going to change.
7:44
You want to make sure that your
locator survives the updates.
7:46
Selecting the proper element is a delicate
art that you will get better at over time.
7:50
And we'll drop several more
examples throughout this course.
7:54
Remember, you can add IDs to
help make things concise.
7:57
Use them sparingly,
as they pollute the global namespace and
8:01
can lose their reliabilities if your
teammates don't understand their purpose.
8:04
And finally, remember that you don't need
to locate your element in one fell swoop.
8:08
You can in fact chain finds, further
narrowing the possible elements as you go.
8:13
So now that we have gained
our element finding muscles,
8:18
let's start interacting with them.
8:20
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