Preview
Video Player
00:00
00:00
Getting Started
10:04Automation code should be treated with the same level of respect as we treat our production code. In this video, we will start a new file and take a swing at removing the code repetition.
[SOUND] How are your
automation muscles feeling?
0:00
We're getting pretty good at this stuff,
aren't we?
0:06
If you've done some other types
of programming, you probably
0:09
have realized that we're doing a lot of
repeating ourselves there in the REPL.
0:11
We keep typing the same code over and
over.
0:15
This breaks a fundamental principle of
coding, and that is the DRY principle.
0:19
Don't repeat yourself.
0:23
Automation code should be treated
with the same level of respect
0:25
as we treat our production code.
0:28
So let's see if we can evolve our
exploration into an actual living program.
0:30
Let's go ahead and start a new file and
0:34
take a swing at removing
the code repetition.
0:36
So you can use any text
editor that you'd like, but
0:40
I'm gonna use Visual Studio Code.
0:42
It's free, and
it's a pretty powerful editor.
0:44
Download instructions are in the teacher's
notes if you wanna get in on this.
0:47
Okay, you can have of course
use whatever editor you'd like.
0:50
So I'm gonna open the editor
by using the command code dot.
0:53
That means open this directory
since I'm in basics.
0:58
Cool, so here is my code and
1:02
you'll see there's those node
modules that we had open.
1:04
I'm gonna close his welcome screen.
1:06
And you'll see here that it
has this toggle terminal,
1:09
which is a little hard to read.
1:11
But this was Ctrl and then a back tick,
1:12
which is really nice because
it opens up a terminal here.
1:14
So I can run everything from here.
1:18
So Ctrl back tick opens that and
closes it.
1:20
Great.
1:26
Okay, so what I'm gonna do is
I'm gonna create a new file and
1:27
I'm gonna call it index.js.
1:30
That's typical for
the main file in any Node project, right?
1:32
So here we go.
1:37
Let's import what we need.
1:39
So first we need our Selenium package.
1:40
And we're gonna require
selenium webdriver.
1:45
So next, we are going to pull out
that special little By library,
1:51
and we could definitely
just use selenium.By.
1:55
But we're gonna promote that
to our name space here, right?
1:58
And then we'll create our driver.
2:02
So we'll say const driver.
2:03
And remember this is using
the builder pattern, which is off of
2:06
selenium.Builder, so
you could put whatever you want here.
2:10
So we make a new selenium.builder and
we're gonna keep things on new lines.
2:14
Now that we are here in the editor,
we can make things a little bit prettier.
2:20
So we can say forBrowser and
look at how that code completions work and
2:22
that's pretty nice.
2:24
forBrowser and we want chrome here.
2:25
And then we want to actually build it
because that's what you do at the end of
2:29
the pattern.
2:33
But if I had other options,
I could add them in here.
2:34
What's nice about putting on different
lines is I can just comment out the single
2:35
line if I didn't want that anymore.
2:39
And the program will still run, so
this would still call build, cool.
2:41
So now let's go ahead and
open up our page.
2:47
So we'll say driver.get and
we'll do process.env.url.
2:50
So again, we're gonna make it so
we can pass in the url there.
2:56
Okay, so let's build this
reusability up step by step.
3:00
Now, one fairly obvious thing that I
was noticing was that we were repeating
3:05
our locators quite a bit.
3:09
Now, since we were duplicating that code
and that locator might very well change,
3:10
it would be a good idea to
create a place to store them so
3:16
that we could access them and
reuse them later, right?
3:19
To me, this sounds like a good place
to use a JavaScript object literal.
3:23
So we'll do const, we'll call it locators,
and we'll open up our new literal.
3:28
So what we should do here is the key
should be a description of what it is and
3:32
the value will be the actual locator.
3:37
So let's find that invitee form, right.
3:40
Well, inviteeForm is a great name for
a locator, right.
3:44
And remember that form had
an ID called registrar.
3:48
So we'll do by.id("registrar").
3:54
Let's see.
4:00
Let's also get the invitee name field.
4:02
So we'll say inviteeNameField,
4:04
and we'll do By.name.
4:09
And that was name.
4:12
It was field, name, name.
4:13
So, now that we have those locators,
we can use them, and
4:15
watch how more legible things become.
4:18
So, if we say
driver.findElement(locators.inviteeNameFi-
4:21
eld).sendKeys, and let's go ahead and
4:30
let's put this on a new line here.
4:37
Let's sendKeys to,
let's add our next student on the list,
4:42
which was Muhamed Hassan.
4:45
Awesome.
4:48
Okay, that reads pretty clear, right?
4:50
Like I know what that's looking for.
4:53
Now let's submit that form.
4:54
So we could say
driver.findElement(locators.inviteeForm).
4:56
And then we can call submit on that.
5:04
Now, what if we wanted
to add another invitee?
5:08
Ah-oh, I see some more
duplication coming in.
5:12
So basically what we would
do is we'd copy these lines,
5:15
we'd grab this copy it and
then change the name and then,
5:18
we don't wanna do that though because
we wanna keep things dry, right?
5:22
So a good solution to dry things
up is to use a function, right.
5:25
So let's do this.
5:30
Let's say, what are we doing here?
5:32
We are adding an invitee, right?
5:33
So let's make a function
called addInvitee.
5:35
Okay and it's gonna take a name.
5:41
And then we're going to more or less
do what we just did right here, right?
5:44
So why don't I just move this up?
5:48
There we go.
So it's in here and instead of passing in
5:50
the static name, what we'll do is we'll
pass in what was passed into the function.
5:54
So name there.
5:58
So now,
if we do addInvitee when we wanna call it,
5:59
we just pass in Muhamed Hassan And
there we go, very easily add more.
6:05
addInvitee, we could add Steve Hunter.
6:15
So it's nice and
clear what's happening here, right.
6:19
So let's go ahead and give this a run.
6:24
So I'm gonna open up my terminal and
I'm gonna press the up arrow.
6:26
And it's basically the same program,
right.
6:30
So I wanna set my URL value the same
way but now I'm gonna say index.js.
6:32
You know what?
I'm gonna check and
6:36
make sure my workspace is running first.
6:37
It is.
6:39
Here we go.
6:41
So now, we'll see that we popped it up and
it added our two invitees, awesome.
6:43
We forgot to shut down the browser
at the end of the program, right?
6:49
So our program is over but
this browser is running.
6:52
It's just something to remember
that there's gonna be a new Chrome
6:54
window that's gonna pop up each time.
6:58
Remember to close those.
7:00
But, since we got it open,
let's do some exploring.
7:02
So, remember when we talked about how
7:05
common the input field with
the name of name would be.
7:08
What if the developers working on the site
added a new field with the name of name?
7:12
It could very well break our selector,
couldn't it,
7:17
cuz there would be two inputs
with the name of name, right?
7:19
And that's what we're looking for,
we're just looking for by name of name.
7:22
It will be nice if we could just say
that we want the input with the name
7:29
of name inside of the registrar form.
7:34
But, I also wanna do it in
a single locator, right?
7:37
That would be cool.
7:40
Instead of chaining, and
I could definitely chain it, I could say,
7:41
get this this form and
then find this element.
7:44
But you can actually do that with CSS,
because they're pretty powerful, and
7:46
I think we should explore them a bit.
7:50
So, here's a quick taste.
7:52
So, let's go over to the dev tools and
let's open up this field here.
7:54
And I'm gonna close this.
8:01
Bring this down for us.
8:03
Let's pump that up a bit.
8:05
So before we use the XPath query,
but if you search here,
8:09
you can do a selector, and this is
a CSS selector that it's talking about.
8:14
So the pound sign or the hashtag depending
on your age, helps you to define an ID.
8:18
So we're looking for the form with
the ID of registrar, so registrar.
8:26
So there we go, so
8:31
this is anything with the ID of
registrar is what this is reading.
8:33
So the way that CSS selectors
work is I can just add a space
8:38
and then it will search within that,
from within the first element.
8:45
Now much like our chaining goals, so
it's gonna find all of the notes.
8:49
So we'll says register input.
8:53
Awesome.
8:57
So that's highlighted, but
what if a new input was added.
8:58
So what if there was an extra check
box in here or another field.
9:01
Again, we'd break it.
9:04
So what you can do is you can actually do
square brackets to get at the attributes.
9:05
So we want to get at the attribute
of name where it equals name.
9:11
Cool.
So now that we've found that,
9:18
I'm gonna copy this.
9:20
And I'm gonna go over to our selectors and
I'm gonna switch
9:21
this from By.name to By.css and
pop in our selector there.
9:26
And there we go.
9:33
So now the code didn't have to change
because I just changed the locator.
9:33
CSS selectors are so super powerful and
expansive that we should
9:38
probably do a little deeper of
a dive right after this quick break.
9:43
And let me remind you,
breaks are important.
9:48
They're super important for learning.
9:51
If you haven't done so recently,
you should get up, and stretch and
9:54
do some jumping jacks and
walk around a bit and
9:57
make sure that you got your
blood pumping to your brain.
9:59
And we'll get to selecting
some more of these elements.
10:01