Preview
Video Player
00:00
00:00
WebDriver Basics
6:46Selenium in installed, so it’s time to use it to navigate to a webpage. We will look at how we use Chrome dev tools to browse the DOM. As well as, what it looks like when things aren’t working correctly.
Okay, depending on how long of
a break you just took between now and
0:00
when you watched the previous video,
your workspace might have timed out, so
0:03
I'm gonna make sure that mine is running.
0:07
Okay, it is.
0:09
It would have told me right
here that it was timed out.
0:10
I'm gonna get my REPL back up and
running, so I'm gonna type node.
0:12
And we can use the up arrow to loop
through what we had typed before, so
0:17
let's get our page open again.
0:20
So let's see, we need to start with that,
the const selenium.
0:22
So I'm just pressing up arrow,
then we built our driver.
0:24
Great, and then we got our URL,
set our URL, then we went and got it.
0:29
So let's open that up again,
and so that spit out there.
0:35
Remember that's okay,
that's just to help us debug.
0:37
So here this has been launched,
so let's take a look.
0:41
Let's try and automate this page.
0:46
Let's try to type something
in this box from our code.
0:48
So let's take a look
at in Chrome DevTools.
0:53
Now if these are new to you, there's
more information in the teachers notes.
0:55
They're super hardy tools that you should
be aware of as you work with the web.
0:58
So if you just right-click, so I'm gonna
right-click here and choose Inspect,
1:02
it's gonna open up those tools.
1:07
So you'll notice up top
there's this Elements tab.
1:09
This is where we wanna be, and I'm
gonna drag this down here a little bit.
1:11
There we go, close this console for
right now, here we go.
1:14
So we're looking at the elements tab and
it's got this element highlighted right
1:19
here, which is the input text,
invite someone.
1:22
That's what we're looking for.
1:24
So in order to get a hold of this element,
1:27
we're going to need to have a way to
tell our web driver where to find it.
1:29
Now there's a couple of ways
to do this using WebDriver.
1:33
WebDriver understands XPath queries, which
is a way of navigating a tree of XML.
1:37
Like we have here in our HTML document,
HTML is a subset of XML.
1:42
There's more information
in the teacher's notes, and
1:48
we'll go over this XPath stuff
more throughout the course.
1:50
So don't get too hung up on it right now.
1:52
So the Elements tab here actually has
a little built in tool that we can use to
1:55
test our query.
1:59
I'm gonna make this a little bit bigger.
2:00
So there's a tool, if I press command F or
2:06
control F on Windows,
we can open up a little search box here.
2:09
And this you'll see understands XPath.
2:14
XPath allows you to be very explicit about
the elements that you're looking for.
2:17
So let's build a super explicit path.
2:21
So to represent the root,
you start with a single slash.
2:24
So let's get the root up here.
2:28
So single slash, slash, and
then I'm gonna type HTML.
2:29
And you'll see that when it's founded,
it highlights it.
2:34
So next down our path, we wanna go HTML,
we wanna go to the body, right?
2:37
Because the body is
the next container there.
2:42
So we'll do slash body,
there see it's highlighted.
2:44
We wanna get into what's next.
2:47
We want the div, slash div.
2:49
There's the div highlighted,
there's the header.
2:52
And finally, we want to get to the form.
2:55
[LAUGH] And then finally,
we want to get to the first input there.
3:00
Input, we got it, there we go.
3:04
So now we know that our XPath
query matches our input field.
3:07
So let's go ahead and
let's feed that to our driver.
3:10
So I'm gonna grab this.
3:13
I'm gonna close our tools,
so we've got this page back.
3:16
So the selenium module exports
a handy way to get to these locators.
3:19
Typically, you import it like this.
3:25
So you say, const by equals selenium,
that's the name of the package, .By.
3:27
So I'm gonna import this, so
that we can use it In a shorthand.
3:32
I could just write selenium.By every time.
3:36
So there is a method on
driver called findElement.
3:38
And it takes what is known as a locator.
3:43
And there is a static method off
of the By class named XPath,
3:48
and that will take our query.
3:54
I think I copied it.
3:58
Yeah, cool.
3:59
So I'm gonna paste that there, and so that
returns a locator that findElement needs.
3:59
So I'm gonna go ahead and
I'm gonna store this in a variable.
4:06
So we'll store this in fields.
4:10
So we'll say, field equals,
and that's because
4:12
findElement eventually returns
a web element, so let's store that.
4:16
And we can actually send a series
of key strokes to that element.
4:21
So let's use it, so
we'll say field.sendKeys.
4:25
And we'll say,
found this element with an explicit XPath.
4:31
I'm gonna move this window real quick,
so that we can see it.
4:39
So here it is, I'm gonna click, boom.
4:44
See how it wrote it down there?
4:47
Pretty cool, right?
4:51
So I know that I just said a mouthful,
so let's go over that one more time.
4:52
So our driver here, this driver
has a method named findElement.
4:56
And findElement takes a locator,
and like we said,
5:02
there are lots of ways to
find elements on a web page.
5:06
And one strategy for
locating an element is by using an XPath.
5:11
So By is a helper class from
the selenium package, and it has a nice
5:15
static method called XPath, which
takes our query and returns a locator.
5:21
But you might have noticed that
I said find element eventually
5:27
return the element.
5:30
Now that's because as you know, this web
stuff is usually pretty asynchronous,
5:32
multiple things are running at once.
5:36
In JavaScript, a common way to handle
this asynchronous nature is by using
5:39
a pattern known as promises.
5:43
If these are new to you, have no fear,
there's documentation and
5:45
resources in the teacher's notes.
5:48
Also each of these specific
language web driver implementations
5:50
manage these a little bit differently.
5:53
And the JavaScript version here,
uses something they call managed promises.
5:55
It does a great job of extracting
the worry of promises for you.
6:00
I will point out a couple of places
where you need to be careful with them,
6:04
I promise.
6:07
[LAUGH] See what I did there?
6:08
Pretty cool, that we were able to locate
that field using that XPath, right?
6:10
Now we walked down a very specific path
in the HTML to locate that element.
6:14
This brings up an interesting problem.
6:19
What do you think would
happen if we were to change
6:21
the layout just a little bit on that page?
6:24
Would it still work?
6:26
Well, let's think about it.
6:29
The path to the element, the way we
walk to the element and the change.
6:30
So it wouldn't work anymore.
6:35
So this extremely specific
XPath seems pretty fragile.
6:37
Let's keep that in mind as we look
at other ways of finding elements,
6:42
right after this quick break.
6:45