1
00:00:00,000 --> 00:00:06,822
[SOUND] How are your
automation muscles feeling?

2
00:00:06,822 --> 00:00:09,060
We're getting pretty good at this stuff,
aren't we?

3
00:00:09,060 --> 00:00:11,981
If you've done some other types
of programming, you probably

4
00:00:11,981 --> 00:00:15,685
have realized that we're doing a lot of
repeating ourselves there in the REPL.

5
00:00:15,685 --> 00:00:18,520
We keep typing the same code over and
over.

6
00:00:19,540 --> 00:00:23,780
This breaks a fundamental principle of
coding, and that is the DRY principle.

7
00:00:23,780 --> 00:00:25,330
Don't repeat yourself.

8
00:00:25,330 --> 00:00:28,460
Automation code should be treated
with the same level of respect

9
00:00:28,460 --> 00:00:30,230
as we treat our production code.

10
00:00:30,230 --> 00:00:33,709
So let's see if we can evolve our
exploration into an actual living program.

11
00:00:34,810 --> 00:00:36,580
Let's go ahead and start a new file and

12
00:00:36,580 --> 00:00:38,460
take a swing at removing
the code repetition.

13
00:00:40,020 --> 00:00:42,420
So you can use any text
editor that you'd like, but

14
00:00:42,420 --> 00:00:44,530
I'm gonna use Visual Studio Code.

15
00:00:44,530 --> 00:00:47,190
It's free, and
it's a pretty powerful editor.

16
00:00:47,190 --> 00:00:50,145
Download instructions are in the teacher's
notes if you wanna get in on this.

17
00:00:50,145 --> 00:00:53,641
Okay, you can have of course
use whatever editor you'd like.

18
00:00:53,641 --> 00:00:58,400
So I'm gonna open the editor
by using the command code dot.

19
00:00:58,400 --> 00:01:02,190
That means open this directory
since I'm in basics.

20
00:01:02,190 --> 00:01:04,680
Cool, so here is my code and

21
00:01:04,680 --> 00:01:06,800
you'll see there's those node
modules that we had open.

22
00:01:06,800 --> 00:01:09,178
I'm gonna close his welcome screen.

23
00:01:09,178 --> 00:01:11,123
And you'll see here that it
has this toggle terminal,

24
00:01:11,123 --> 00:01:12,236
which is a little hard to read.

25
00:01:12,236 --> 00:01:14,620
But this was Ctrl and then a back tick,

26
00:01:14,620 --> 00:01:18,940
which is really nice because
it opens up a terminal here.

27
00:01:18,940 --> 00:01:20,970
So I can run everything from here.

28
00:01:20,970 --> 00:01:24,520
So Ctrl back tick opens that and
closes it.

29
00:01:26,240 --> 00:01:27,130
Great.

30
00:01:27,130 --> 00:01:30,837
Okay, so what I'm gonna do is
I'm gonna create a new file and

31
00:01:30,837 --> 00:01:32,738
I'm gonna call it index.js.

32
00:01:32,738 --> 00:01:37,850
That's typical for
the main file in any Node project, right?

33
00:01:37,850 --> 00:01:38,370
So here we go.

34
00:01:39,380 --> 00:01:40,930
Let's import what we need.

35
00:01:40,930 --> 00:01:42,867
So first we need our Selenium package.

36
00:01:45,294 --> 00:01:49,970
And we're gonna require
selenium webdriver.

37
00:01:51,130 --> 00:01:55,900
So next, we are going to pull out
that special little By library,

38
00:01:55,900 --> 00:01:58,960
and we could definitely
just use selenium.By.

39
00:01:58,960 --> 00:02:02,470
But we're gonna promote that
to our name space here, right?

40
00:02:02,470 --> 00:02:03,890
And then we'll create our driver.

41
00:02:03,890 --> 00:02:06,200
So we'll say const driver.

42
00:02:06,200 --> 00:02:10,068
And remember this is using
the builder pattern, which is off of

43
00:02:10,068 --> 00:02:14,960
selenium.Builder, so
you could put whatever you want here.

44
00:02:14,960 --> 00:02:20,035
So we make a new selenium.builder and
we're gonna keep things on new lines.

45
00:02:20,035 --> 00:02:22,505
Now that we are here in the editor,
we can make things a little bit prettier.

46
00:02:22,505 --> 00:02:24,923
So we can say forBrowser and
look at how that code completions work and

47
00:02:24,923 --> 00:02:25,745
that's pretty nice.

48
00:02:25,745 --> 00:02:29,657
forBrowser and we want chrome here.

49
00:02:29,657 --> 00:02:33,384
And then we want to actually build it
because that's what you do at the end of

50
00:02:33,384 --> 00:02:34,104
the pattern.

51
00:02:34,104 --> 00:02:35,846
But if I had other options,
I could add them in here.

52
00:02:35,846 --> 00:02:39,009
What's nice about putting on different
lines is I can just comment out the single

53
00:02:39,009 --> 00:02:40,460
line if I didn't want that anymore.

54
00:02:41,610 --> 00:02:45,600
And the program will still run, so
this would still call build, cool.

55
00:02:47,330 --> 00:02:50,500
So now let's go ahead and
open up our page.

56
00:02:50,500 --> 00:02:56,550
So we'll say driver.get and
we'll do process.env.url.

57
00:02:56,550 --> 00:02:59,300
So again, we're gonna make it so
we can pass in the url there.

58
00:03:00,450 --> 00:03:05,110
Okay, so let's build this
reusability up step by step.

59
00:03:05,110 --> 00:03:09,000
Now, one fairly obvious thing that I
was noticing was that we were repeating

60
00:03:09,000 --> 00:03:10,800
our locators quite a bit.

61
00:03:10,800 --> 00:03:16,410
Now, since we were duplicating that code
and that locator might very well change,

62
00:03:16,410 --> 00:03:19,670
it would be a good idea to
create a place to store them so

63
00:03:19,670 --> 00:03:22,560
that we could access them and
reuse them later, right?

64
00:03:23,830 --> 00:03:28,650
To me, this sounds like a good place
to use a JavaScript object literal.

65
00:03:28,650 --> 00:03:32,780
So we'll do const, we'll call it locators,
and we'll open up our new literal.

66
00:03:32,780 --> 00:03:37,857
So what we should do here is the key
should be a description of what it is and

67
00:03:37,857 --> 00:03:40,533
the value will be the actual locator.

68
00:03:40,533 --> 00:03:44,120
So let's find that invitee form, right.

69
00:03:44,120 --> 00:03:47,255
Well, inviteeForm is a great name for
a locator, right.

70
00:03:48,540 --> 00:03:54,540
And remember that form had
an ID called registrar.

71
00:03:54,540 --> 00:04:00,907
So we'll do by.id("registrar").

72
00:04:00,907 --> 00:04:02,140
Let's see.

73
00:04:02,140 --> 00:04:04,540
Let's also get the invitee name field.

74
00:04:04,540 --> 00:04:09,151
So we'll say inviteeNameField,

75
00:04:09,151 --> 00:04:12,500
and we'll do By.name.

76
00:04:12,500 --> 00:04:13,520
And that was name.

77
00:04:13,520 --> 00:04:15,910
It was field, name, name.

78
00:04:15,910 --> 00:04:18,910
So, now that we have those locators,
we can use them, and

79
00:04:18,910 --> 00:04:21,030
watch how more legible things become.

80
00:04:21,030 --> 00:04:30,426
So, if we say
driver.findElement(locators.inviteeNameFi-

81
00:04:30,426 --> 00:04:37,104
eld).sendKeys, and let's go ahead and

82
00:04:37,104 --> 00:04:42,230
let's put this on a new line here.

83
00:04:42,230 --> 00:04:45,623
Let's sendKeys to,
let's add our next student on the list,

84
00:04:45,623 --> 00:04:47,130
which was Muhamed Hassan.

85
00:04:48,930 --> 00:04:49,430
Awesome.

86
00:04:50,630 --> 00:04:53,180
Okay, that reads pretty clear, right?

87
00:04:53,180 --> 00:04:54,640
Like I know what that's looking for.

88
00:04:54,640 --> 00:04:56,013
Now let's submit that form.

89
00:04:56,013 --> 00:05:04,371
So we could say
driver.findElement(locators.inviteeForm).

90
00:05:04,371 --> 00:05:06,394
And then we can call submit on that.

91
00:05:08,859 --> 00:05:12,008
Now, what if we wanted
to add another invitee?

92
00:05:12,008 --> 00:05:15,660
Ah-oh, I see some more
duplication coming in.

93
00:05:15,660 --> 00:05:18,800
So basically what we would
do is we'd copy these lines,

94
00:05:18,800 --> 00:05:22,250
we'd grab this copy it and
then change the name and then,

95
00:05:22,250 --> 00:05:25,920
we don't wanna do that though because
we wanna keep things dry, right?

96
00:05:25,920 --> 00:05:30,670
So a good solution to dry things
up is to use a function, right.

97
00:05:30,670 --> 00:05:32,070
So let's do this.

98
00:05:32,070 --> 00:05:33,340
Let's say, what are we doing here?

99
00:05:33,340 --> 00:05:35,680
We are adding an invitee, right?

100
00:05:35,680 --> 00:05:40,055
So let's make a function
called addInvitee.

101
00:05:41,420 --> 00:05:42,790
Okay and it's gonna take a name.

102
00:05:44,060 --> 00:05:48,070
And then we're going to more or less
do what we just did right here, right?

103
00:05:48,070 --> 00:05:50,500
So why don't I just move this up?

104
00:05:50,500 --> 00:05:54,300
There we go.
So it's in here and instead of passing in

105
00:05:54,300 --> 00:05:58,270
the static name, what we'll do is we'll
pass in what was passed into the function.

106
00:05:58,270 --> 00:05:59,460
So name there.

107
00:05:59,460 --> 00:06:05,990
So now,
if we do addInvitee when we wanna call it,

108
00:06:05,990 --> 00:06:15,671
we just pass in Muhamed Hassan And
there we go, very easily add more.

109
00:06:15,671 --> 00:06:19,464
addInvitee, we could add Steve Hunter.

110
00:06:19,464 --> 00:06:24,500
So it's nice and
clear what's happening here, right.

111
00:06:24,500 --> 00:06:26,850
So let's go ahead and give this a run.

112
00:06:26,850 --> 00:06:30,760
So I'm gonna open up my terminal and
I'm gonna press the up arrow.

113
00:06:30,760 --> 00:06:32,470
And it's basically the same program,
right.

114
00:06:32,470 --> 00:06:36,466
So I wanna set my URL value the same
way but now I'm gonna say index.js.

115
00:06:36,466 --> 00:06:37,980
You know what?
I'm gonna check and

116
00:06:37,980 --> 00:06:39,660
make sure my workspace is running first.

117
00:06:39,660 --> 00:06:40,160
It is.

118
00:06:41,160 --> 00:06:43,778
Here we go.

119
00:06:43,778 --> 00:06:49,127
So now, we'll see that we popped it up and
it added our two invitees, awesome.

120
00:06:49,127 --> 00:06:52,340
We forgot to shut down the browser
at the end of the program, right?

121
00:06:52,340 --> 00:06:54,890
So our program is over but
this browser is running.

122
00:06:54,890 --> 00:06:58,610
It's just something to remember
that there's gonna be a new Chrome

123
00:06:58,610 --> 00:07:00,410
window that's gonna pop up each time.

124
00:07:00,410 --> 00:07:02,410
Remember to close those.

125
00:07:02,410 --> 00:07:05,630
But, since we got it open,
let's do some exploring.

126
00:07:05,630 --> 00:07:08,350
So, remember when we talked about how

127
00:07:08,350 --> 00:07:11,620
common the input field with
the name of name would be.

128
00:07:12,630 --> 00:07:17,180
What if the developers working on the site
added a new field with the name of name?

129
00:07:17,180 --> 00:07:19,180
It could very well break our selector,
couldn't it,

130
00:07:19,180 --> 00:07:22,320
cuz there would be two inputs
with the name of name, right?

131
00:07:22,320 --> 00:07:25,110
And that's what we're looking for,
we're just looking for by name of name.

132
00:07:29,239 --> 00:07:34,150
It will be nice if we could just say
that we want the input with the name

133
00:07:34,150 --> 00:07:37,180
of name inside of the registrar form.

134
00:07:37,180 --> 00:07:40,720
But, I also wanna do it in
a single locator, right?

135
00:07:40,720 --> 00:07:41,930
That would be cool.

136
00:07:41,930 --> 00:07:44,460
Instead of chaining, and
I could definitely chain it, I could say,

137
00:07:44,460 --> 00:07:46,910
get this this form and
then find this element.

138
00:07:46,910 --> 00:07:50,720
But you can actually do that with CSS,
because they're pretty powerful, and

139
00:07:50,720 --> 00:07:52,350
I think we should explore them a bit.

140
00:07:52,350 --> 00:07:54,070
So, here's a quick taste.

141
00:07:54,070 --> 00:07:59,480
So, let's go over to the dev tools and
let's open up this field here.

142
00:08:01,070 --> 00:08:03,750
And I'm gonna close this.

143
00:08:03,750 --> 00:08:05,220
Bring this down for us.

144
00:08:05,220 --> 00:08:08,110
Let's pump that up a bit.

145
00:08:09,670 --> 00:08:14,320
So before we use the XPath query,
but if you search here,

146
00:08:14,320 --> 00:08:18,530
you can do a selector, and this is
a CSS selector that it's talking about.

147
00:08:18,530 --> 00:08:26,040
So the pound sign or the hashtag depending
on your age, helps you to define an ID.

148
00:08:26,040 --> 00:08:31,875
So we're looking for the form with
the ID of registrar, so registrar.

149
00:08:31,875 --> 00:08:33,037
So there we go, so

150
00:08:33,037 --> 00:08:37,300
this is anything with the ID of
registrar is what this is reading.

151
00:08:38,300 --> 00:08:43,920
So the way that CSS selectors
work is I can just add a space

152
00:08:45,330 --> 00:08:49,270
and then it will search within that,
from within the first element.

153
00:08:49,270 --> 00:08:53,650
Now much like our chaining goals, so
it's gonna find all of the notes.

154
00:08:53,650 --> 00:08:55,690
So we'll says register input.

155
00:08:57,040 --> 00:08:58,110
Awesome.

156
00:08:58,110 --> 00:09:01,590
So that's highlighted, but
what if a new input was added.

157
00:09:01,590 --> 00:09:04,500
So what if there was an extra check
box in here or another field.

158
00:09:04,500 --> 00:09:05,980
Again, we'd break it.

159
00:09:05,980 --> 00:09:11,980
So what you can do is you can actually do
square brackets to get at the attributes.

160
00:09:11,980 --> 00:09:17,050
So we want to get at the attribute
of name where it equals name.

161
00:09:18,300 --> 00:09:20,052
Cool.
So now that we've found that,

162
00:09:20,052 --> 00:09:21,700
I'm gonna copy this.

163
00:09:21,700 --> 00:09:26,933
And I'm gonna go over to our selectors and
I'm gonna switch

164
00:09:26,933 --> 00:09:32,280
this from By.name to By.css and
pop in our selector there.

165
00:09:33,310 --> 00:09:33,910
And there we go.

166
00:09:33,910 --> 00:09:38,839
So now the code didn't have to change
because I just changed the locator.

167
00:09:38,839 --> 00:09:43,198
CSS selectors are so super powerful and
expansive that we should

168
00:09:43,198 --> 00:09:48,190
probably do a little deeper of
a dive right after this quick break.

169
00:09:48,190 --> 00:09:51,640
And let me remind you,
breaks are important.

170
00:09:51,640 --> 00:09:54,200
They're super important for learning.

171
00:09:54,200 --> 00:09:57,259
If you haven't done so recently,
you should get up, and stretch and

172
00:09:57,259 --> 00:09:59,263
do some jumping jacks and
walk around a bit and

173
00:09:59,263 --> 00:10:01,770
make sure that you got your
blood pumping to your brain.

174
00:10:01,770 --> 00:10:04,370
And we'll get to selecting
some more of these elements.