1
00:00:00,000 --> 00:00:07,245
Now, that we have a quick understanding of

2
00:00:07,245 --> 00:00:10,140
end-to-end tests and what role

3
00:00:10,140 --> 00:00:15,555
end-to-end tests play in the overall strategy for testing of angular applications.

4
00:00:15,555 --> 00:00:18,929
Also, a brief introduction to protractor.

5
00:00:18,929 --> 00:00:22,835
Let's proceed with the next exercise where we could employ

6
00:00:22,835 --> 00:00:26,825
protractor and design our end-to-end tests.

7
00:00:26,825 --> 00:00:30,960
It is fortunate that angular CLI automatically

8
00:00:30,960 --> 00:00:35,050
sets up everything that we need for conducting end-to-end tests,

9
00:00:35,050 --> 00:00:37,935
as we will see when we proceed with the exercise.

10
00:00:37,935 --> 00:00:43,430
So, it is a matter of implementing the various tests and

11
00:00:43,430 --> 00:00:50,035
then carrying out the test using protractor in this exercise.

12
00:00:50,035 --> 00:00:53,865
Going to our angular application in Visual Studio,

13
00:00:53,865 --> 00:00:56,305
if you look at the package of our JSON file,

14
00:00:56,305 --> 00:00:59,965
you will see that we already find

15
00:00:59,965 --> 00:01:05,640
the angular CLI has set up everything that we need for carrying out the end-to-end tests.

16
00:01:05,640 --> 00:01:07,295
So, as you scroll down,

17
00:01:07,295 --> 00:01:10,550
you would see that protractor has already been installed on

18
00:01:10,550 --> 00:01:16,110
our computer within the angular project.

19
00:01:16,110 --> 00:01:23,420
Also, we notice that there is a separate folder here

20
00:01:23,420 --> 00:01:26,780
called e2e which contains a few files

21
00:01:26,780 --> 00:01:30,350
that have been set up already for carrying out end-to-end test.

22
00:01:30,350 --> 00:01:33,890
Now, if you need to carry out extensive end-to-end tests,

23
00:01:33,890 --> 00:01:36,620
then it is a good idea to create

24
00:01:36,620 --> 00:01:41,985
a separate file for each set of end-to-end tests that you want to carry out.

25
00:01:41,985 --> 00:01:43,785
Now, in this particular exercise,

26
00:01:43,785 --> 00:01:47,090
I'm just illustrating to you how to carry out end-to-end tests.

27
00:01:47,090 --> 00:01:51,670
So, I'm going to stick with what has already been set up by angular CLI.

28
00:01:51,670 --> 00:01:55,710
We'll work with the files that we have available right there.

29
00:01:55,710 --> 00:02:01,405
So, let's take a quick look at these two files here, the app.e2e-spec.ts,

30
00:02:01,405 --> 00:02:09,070
and you'll see that some code has already been scaffolded out into this file by angular.

31
00:02:09,070 --> 00:02:14,035
Also, this other file called app.po.ts,

32
00:02:14,035 --> 00:02:17,780
this is nothing but a standard JavaScript class

33
00:02:17,780 --> 00:02:21,170
that has been set up with a few methods here.

34
00:02:21,170 --> 00:02:24,380
Now, what we're going to do is to add a few more methods to

35
00:02:24,380 --> 00:02:31,375
this JavaScript class and also update some of these methods that are given here.

36
00:02:31,375 --> 00:02:40,095
We'll set up our tests in the app.e2e-spec.ts file.

37
00:02:40,095 --> 00:02:41,860
So, to proceed forward,

38
00:02:41,860 --> 00:02:44,875
let's go to the app.

39
00:02:44,875 --> 00:02:49,890
Po.ts file, and then within this file, let's update this.

40
00:02:49,890 --> 00:02:55,140
So, here, you see that we have two methods that have been set up here already.

41
00:02:55,140 --> 00:03:01,160
I'm going to update this methods to enable them to take a parameter here.

42
00:03:01,160 --> 00:03:05,250
So, I will say, navigateTo with a link,

43
00:03:05,250 --> 00:03:06,760
which is provided as a string,

44
00:03:06,760 --> 00:03:10,970
and then I'm going to update this browser get to

45
00:03:10,970 --> 00:03:15,615
use the link which is the parameter for this method.

46
00:03:15,615 --> 00:03:17,090
So, what does this do?

47
00:03:17,090 --> 00:03:18,330
So, as you can see,

48
00:03:18,330 --> 00:03:22,490
we are making use of protractor syntax here.

49
00:03:22,490 --> 00:03:26,450
So, this says return browser get link.

50
00:03:26,450 --> 00:03:32,075
So, this particular call to this browser get method will enable

51
00:03:32,075 --> 00:03:41,440
our application to browse to this particular link that is supplied as a parameter here.

52
00:03:41,440 --> 00:03:43,650
So, before this update,

53
00:03:43,650 --> 00:03:47,200
you saw that the link supplied here was slash,

54
00:03:47,200 --> 00:03:50,595
which means that the root of our angular application.

55
00:03:50,595 --> 00:03:54,650
Now, I have updated this to take a parameter here.

56
00:03:54,650 --> 00:04:00,490
Similarly, the second method that you see is called the getParagraphText.

57
00:04:00,490 --> 00:04:08,685
Now, this method is used to obtain the inner content of an HTML element here.

58
00:04:08,685 --> 00:04:11,680
So, for this, also,

59
00:04:11,680 --> 00:04:14,770
I will set up a parameter called selector,

60
00:04:14,770 --> 00:04:20,260
which is a CSS selector that I will supply here.

61
00:04:20,260 --> 00:04:22,430
So, you see that in here,

62
00:04:22,430 --> 00:04:28,775
I'm going to change this to take the selector as the parameter.

63
00:04:28,775 --> 00:04:32,885
Now, from the previous experience with the unit test,

64
00:04:32,885 --> 00:04:37,285
you see what by and.css stand for.

65
00:04:37,285 --> 00:04:40,130
This is the same thing that we are using here also.

66
00:04:40,130 --> 00:04:47,820
This by method here being used is now imported from the protractor library here.

67
00:04:47,820 --> 00:04:52,610
The element method is also imported from the protractor library.

68
00:04:52,610 --> 00:04:56,915
So, this element method allows you to get access to an HTML element

69
00:04:56,915 --> 00:05:02,510
by providing that selection for the HTML element as a parameter here.

70
00:05:02,510 --> 00:05:05,760
So, you can say by css, byID,

71
00:05:05,760 --> 00:05:11,855
and many other such methods available for the by class here.

72
00:05:11,855 --> 00:05:13,935
Then, the getText method,

73
00:05:13,935 --> 00:05:19,580
gets as we see the visible inner text of this particular element.

74
00:05:19,580 --> 00:05:22,985
So, this is one way of retrieving information from

75
00:05:22,985 --> 00:05:28,520
the particular HTML element within our browser window,

76
00:05:28,520 --> 00:05:33,780
and then check to see if it matches a pattern that we are specifying here.

77
00:05:33,780 --> 00:05:37,035
So, with this update to the app.po.ts,

78
00:05:37,035 --> 00:05:43,060
let's move on to the app.e2e-spec.ts file.

79
00:05:43,060 --> 00:05:44,755
So, within this file,

80
00:05:44,755 --> 00:05:48,630
you'll notice that we are using the Jasmine syntax.

81
00:05:48,630 --> 00:05:54,730
So, here, you see me using describe and then which says let page AppPage.

82
00:05:54,730 --> 00:06:01,725
So, here, the page is where we are creating this new class called AppPage,

83
00:06:01,725 --> 00:06:08,330
which we have declared in the app.po.ts file as a JavaScript class here.

84
00:06:08,330 --> 00:06:13,540
Now, this is just a convenient way of setting up all the things in one location,

85
00:06:13,540 --> 00:06:18,950
and then being able to make use of them in my test code itself.

86
00:06:18,950 --> 00:06:24,445
So, here, I am declaring the page to refer to this AppPage,

87
00:06:24,445 --> 00:06:26,809
and so that will enable me to access

88
00:06:26,809 --> 00:06:30,230
the methods that I have constructed in that class here.

89
00:06:30,230 --> 00:06:37,680
So, the first test that I'm going to do is to navigate to

90
00:06:37,680 --> 00:06:42,140
the root of my angular application

91
00:06:42,140 --> 00:06:46,440
and then check to see if there is a specific pattern in that.

92
00:06:46,440 --> 00:06:51,375
You will notice that in my homepage,

93
00:06:51,375 --> 00:06:56,170
you will have the string

94
00:06:56,170 --> 00:07:03,550
called Ristorante Con Fusion

95
00:07:03,550 --> 00:07:06,480
inside an H1 element in my page.

96
00:07:06,480 --> 00:07:14,370
So, what I'm going to do is to navigate to the root of my HTML element.

97
00:07:14,370 --> 00:07:18,340
Then, in there, I will go looking around for

98
00:07:18,340 --> 00:07:23,955
the app route and then look for the H1 tag inside the app route.

99
00:07:23,955 --> 00:07:28,210
Then, this should equal this particular string here.

100
00:07:28,210 --> 00:07:29,620
So, I'm just going to copy

101
00:07:29,620 --> 00:07:34,530
the Ristorante Con Fusion string there and then supply that as a parameter here.

102
00:07:34,530 --> 00:07:37,000
So, I'm just updating the test to check for

103
00:07:37,000 --> 00:07:41,585
exactly what we have within our updated angular application.

104
00:07:41,585 --> 00:07:43,200
So, with this setup,

105
00:07:43,200 --> 00:07:48,860
now I'm going to carry out my first test of my angular application.

106
00:07:48,860 --> 00:07:55,454
So, let's save all the changes and then go back to our terminal.

107
00:07:55,454 --> 00:08:00,715
Within the terminal, in my project folder,

108
00:08:00,715 --> 00:08:05,965
at the prompt I will type ng e2e.

109
00:08:05,965 --> 00:08:11,010
You will notice that this will start a browser.

110
00:08:11,010 --> 00:08:19,445
In my case, it'll start a Chrome window and then carry out the test in that window.

111
00:08:19,445 --> 00:08:21,710
So, let's carry out the first test.

112
00:08:21,710 --> 00:08:27,100
You will see that when the test runs after compiling my angular application,

113
00:08:27,100 --> 00:08:28,705
when the test runs,

114
00:08:28,705 --> 00:08:33,725
then it will ensure that the test is successful.

115
00:08:33,725 --> 00:08:36,295
You see that in the back,

116
00:08:36,295 --> 00:08:42,055
my browser is opened by the ng e2e,

117
00:08:42,055 --> 00:08:46,880
and then the test was carried out in that browser window.

118
00:08:46,880 --> 00:08:52,025
It says that the test was successfully carried out here.

119
00:08:52,025 --> 00:08:54,390
So, you notice that even in this case,

120
00:08:54,390 --> 00:08:56,485
it needs to start the browser,

121
00:08:56,485 --> 00:08:59,310
load in my angular application into the browser,

122
00:08:59,310 --> 00:09:02,370
the entire angular application into the browser.

123
00:09:02,370 --> 00:09:07,210
Then, carry out the test off my angular application.

124
00:09:07,210 --> 00:09:12,595
At this point, make sure that your server,

125
00:09:12,595 --> 00:09:15,025
the JSON server is up and running,

126
00:09:15,025 --> 00:09:16,510
otherwise, your test will fail,

127
00:09:16,510 --> 00:09:18,915
because when the test has been carried out,

128
00:09:18,915 --> 00:09:22,140
it will try to access the JSON server also.

129
00:09:22,140 --> 00:09:25,300
So, that is something that you need to ensure.

130
00:09:25,300 --> 00:09:28,035
Carrying on with our tests.

131
00:09:28,035 --> 00:09:29,915
In the second step,

132
00:09:29,915 --> 00:09:35,290
we're going to add in a couple of more methods into this AppPage.

133
00:09:35,290 --> 00:09:41,330
Class here. So, I would use a new method

134
00:09:41,330 --> 00:09:50,730
called getElement and then taking in a parameter of a selector.

135
00:09:51,160 --> 00:09:58,520
This method allows me to get access to the element,

136
00:09:58,520 --> 00:10:04,500
which is selected by using the same by CSS selector.

137
00:10:04,500 --> 00:10:06,545
So, I'm just going to copy this.

138
00:10:06,545 --> 00:10:09,785
So, in this case, instead of just getting the text,

139
00:10:09,785 --> 00:10:13,750
it will actually return the reference to the element itself,

140
00:10:13,750 --> 00:10:17,290
and then so that you can add in additional ways

141
00:10:17,290 --> 00:10:20,910
of accessing information inside that element as we require.

142
00:10:20,910 --> 00:10:25,340
In this case, the get-text is used only to fetch the specific text.

143
00:10:25,340 --> 00:10:28,470
We might use other methods on

144
00:10:28,470 --> 00:10:31,520
this element to fetch additional information from that elements.

145
00:10:31,520 --> 00:10:37,220
So, that's the reason why I am creating this method here.

146
00:10:37,220 --> 00:10:45,595
Similarly, I will implement another method called get all elements.

147
00:10:45,595 --> 00:10:52,040
Now, this also uses a parameter called selector just like before.

148
00:10:52,040 --> 00:10:56,115
What the GetAll method does is to select

149
00:10:56,115 --> 00:11:01,910
all the elements and then return them to the collar,

150
00:11:01,910 --> 00:11:03,720
so that, for example,

151
00:11:03,720 --> 00:11:08,310
if your page contains many h1 elements in

152
00:11:08,310 --> 00:11:12,990
reference to all of them will be returned to my collar.

153
00:11:12,990 --> 00:11:16,790
So, that there, I can then decide to make

154
00:11:16,790 --> 00:11:20,940
a call to a specific one within this list of elements.

155
00:11:20,940 --> 00:11:22,505
So, to do this,

156
00:11:22,505 --> 00:11:25,525
we will use the same return but here,

157
00:11:25,525 --> 00:11:28,395
instead of saying element selector,

158
00:11:28,395 --> 00:11:33,165
let me just copy that and then we have another method called

159
00:11:33,165 --> 00:11:37,340
element.all which allows us to

160
00:11:37,340 --> 00:11:41,750
access all the elements that match this particular selector.

161
00:11:41,750 --> 00:11:45,790
The first one will return the first element that matches that selector.

162
00:11:45,790 --> 00:11:55,805
After these updates, we will now switch to our test file and add in a new test here.

163
00:11:55,805 --> 00:12:01,755
So, here again, I am using the Jasmine syntax for adding in the new test here.

164
00:12:01,755 --> 00:12:06,980
So, I will say it and then give a description for this test.

165
00:12:06,980 --> 00:12:13,510
Will say It should navigate to about

166
00:12:13,510 --> 00:12:22,645
us page by clicking on the link.

167
00:12:22,645 --> 00:12:25,705
Now, if you look back at your Angular application,

168
00:12:25,705 --> 00:12:28,530
you would notice that within your Angular application,

169
00:12:28,530 --> 00:12:36,735
you have the navigation links at the top of the page.

170
00:12:36,735 --> 00:12:40,680
So, what we're going to do in this test is to automatically

171
00:12:40,680 --> 00:12:45,500
go and access one of those navigation links and click on them.

172
00:12:45,500 --> 00:12:49,545
Now, of course, as you expect this is going to be done programmatically,

173
00:12:49,545 --> 00:12:54,320
rather than by manually clicking on the link.

174
00:12:54,320 --> 00:12:55,630
So, to do that,

175
00:12:55,630 --> 00:13:05,325
what I'm going to do is to navigate to the root of my Angular application and then,

176
00:13:05,325 --> 00:13:08,490
I'm going to access

177
00:13:15,040 --> 00:13:23,430
the links in my navigation bar at the top.

178
00:13:23,430 --> 00:13:27,850
By saying page, getAllElements and

179
00:13:27,850 --> 00:13:32,815
then I'll get all the elements that have the a tag in there.

180
00:13:32,815 --> 00:13:40,994
Now obviously, you will have many of those a tags in our page but the top four,

181
00:13:40,994 --> 00:13:44,950
are the four links in

182
00:13:44,950 --> 00:13:52,100
the navigation bar at the top of our page there in the header component.

183
00:13:52,100 --> 00:13:54,420
So, getting access to those

184
00:13:54,420 --> 00:14:00,710
a now note that I am using get all elements so I'm going to get a number of elements.

185
00:14:00,710 --> 00:14:01,770
In this particular case,

186
00:14:01,770 --> 00:14:07,850
it turns out to be about 16 different a tags that will wear in that page there.

187
00:14:07,850 --> 00:14:10,640
So, I'm going go and select.

188
00:14:10,640 --> 00:14:15,800
So, this is where I use this method called get and then I can specify

189
00:14:15,800 --> 00:14:20,490
an index for the specific element that I want.

190
00:14:20,490 --> 00:14:26,460
So, I have checked if you look at the header components template file,

191
00:14:26,460 --> 00:14:30,840
you will notice that the very second a tag in

192
00:14:30,840 --> 00:14:38,950
the header component's HTML page is referring to the about us link there.

193
00:14:38,950 --> 00:14:42,905
So, that is what I am getting access to by saying get one.

194
00:14:42,905 --> 00:14:46,410
Zero, of course, refers to the home link in

195
00:14:46,410 --> 00:14:51,155
the header component where we created our toolbar at the top there.

196
00:14:51,155 --> 00:14:55,745
So, I get access to the second one so this is the about link there.

197
00:14:55,745 --> 00:14:59,100
Now, once you get hold of this link,

198
00:14:59,100 --> 00:15:03,030
there is a method that protractor supports

199
00:15:03,030 --> 00:15:08,045
on a element with a link there called the click.

200
00:15:08,045 --> 00:15:11,335
So, this, as you see programmatically,

201
00:15:11,335 --> 00:15:17,160
causes a click on that particular element in my browser window there.

202
00:15:17,160 --> 00:15:21,840
So, programmatically, we are carrying out what you would normally carry out

203
00:15:21,840 --> 00:15:27,160
manually by physically going to that link and clicking on it using your mouse.

204
00:15:27,160 --> 00:15:29,790
Now, once we click on the link, obviously,

205
00:15:29,790 --> 00:15:33,400
you're going to navigate to the About Us page.

206
00:15:33,400 --> 00:15:35,020
Now, within the About Us page,

207
00:15:35,020 --> 00:15:37,780
if you go looking at the template of the About Us page,

208
00:15:37,780 --> 00:15:45,105
you will find that there is an h3 element which contains the name of that page.

209
00:15:45,105 --> 00:15:46,810
Within that h3 element,

210
00:15:46,810 --> 00:15:51,640
you will see a text called About space Us there.

211
00:15:51,640 --> 00:15:53,990
So, that is what I am going to check now.

212
00:15:53,990 --> 00:15:58,440
The reason I'm going to check that is to make sure that I have really navigated to

213
00:15:58,440 --> 00:16:04,200
the About Us page by doing these steps in my Angular application.

214
00:16:04,200 --> 00:16:07,685
So, this is where I will use the expect.

215
00:16:07,685 --> 00:16:14,375
We have already seen the use of expect and expect page.

216
00:16:14,375 --> 00:16:18,990
GetParagraphText and I'm going to get the paragraph text from

217
00:16:18,990 --> 00:16:25,365
h3 and this I expect toBe.

218
00:16:25,365 --> 00:16:33,430
Notice the use of the Jasmine syntax here and this should be About Us.

219
00:16:34,460 --> 00:16:42,895
So, introducing this second test into our test file here,

220
00:16:42,895 --> 00:16:48,950
let's save the changes that we have made and then go and execute this test.

221
00:16:49,510 --> 00:16:52,915
Going to the terminal.

222
00:16:52,915 --> 00:16:57,680
Again, let me execute the test by saying ng e2e

223
00:16:57,680 --> 00:17:03,220
and you will notice that this will again go through the same set of steps,

224
00:17:03,220 --> 00:17:09,880
and then carry out both the tests that now I have in the test file.

225
00:17:09,880 --> 00:17:15,110
It is interesting to watch the test being carried out in the browser.

226
00:17:15,110 --> 00:17:17,390
So, you see that we are on the Homepage,

227
00:17:17,390 --> 00:17:22,595
you now navigate to the About page and then success.

228
00:17:22,595 --> 00:17:25,840
So, we have successfully navigated from

229
00:17:25,840 --> 00:17:29,290
the Homepage to the About page and then we have verified that you have

230
00:17:29,290 --> 00:17:31,450
navigated to the About page by carrying out

231
00:17:31,450 --> 00:17:34,250
the specific test where we checked to make sure that

232
00:17:34,250 --> 00:17:39,515
the About Us is in an h3 tag inside the About Us page there.

233
00:17:39,515 --> 00:17:43,270
So, this is one more end-to-end test that we can carry out,

234
00:17:43,270 --> 00:17:46,320
and you actually saw the test being carried out right in front

235
00:17:46,320 --> 00:17:49,855
of your eyes without your manual intervention.

236
00:17:49,855 --> 00:17:53,840
I hope you're enjoying carrying out these end-to-end tests.

237
00:17:53,840 --> 00:17:55,725
Let's get a bit more ambitious.

238
00:17:55,725 --> 00:18:00,280
Now, what we're going to do is to navigate to a particular dish,

239
00:18:00,280 --> 00:18:04,615
and then try to insert a comment in that dish.

240
00:18:04,615 --> 00:18:09,155
Now, this is where I'm going to take the help of Protractor support,

241
00:18:09,155 --> 00:18:13,020
and you will see me using some more methods from

242
00:18:13,020 --> 00:18:17,675
Protractor in order to navigate to the dish page,

243
00:18:17,675 --> 00:18:23,570
we will navigate to the very first dish in our menu by using

244
00:18:23,570 --> 00:18:30,185
the link to the dish detail page with the parameter of that particular dish,

245
00:18:30,185 --> 00:18:31,995
the ID of the particular dish.

246
00:18:31,995 --> 00:18:39,385
Then, we will identify the input elements of the form,

247
00:18:39,385 --> 00:18:42,990
and then we will automatically type in information into

248
00:18:42,990 --> 00:18:47,425
those input elements and then try to submit the form and see what happens.

249
00:18:47,425 --> 00:18:49,975
So, to carry out this test, again,

250
00:18:49,975 --> 00:18:52,830
go in and using the Jasmine syntax,

251
00:18:52,830 --> 00:18:59,595
I will introduce an it here and then I will identify what this test is trying to do.

252
00:18:59,595 --> 00:19:07,904
I would say, "It should enter a new comment for the first

253
00:19:07,904 --> 00:19:15,470
dish" and arrow function

254
00:19:15,470 --> 00:19:20,450
and you see that inside this arrow function,

255
00:19:20,450 --> 00:19:27,985
we're going to do our first page navigateTo,

256
00:19:27,985 --> 00:19:35,660
we will navigate to the dishdetail zero.

257
00:19:35,660 --> 00:19:39,235
So, this is the very first dish in our menu.

258
00:19:39,235 --> 00:19:43,060
Now, once we navigate to the dishdetail page, we will say,

259
00:19:43,060 --> 00:19:52,030
"let newAuthor is equal to page getElement."

260
00:19:52,030 --> 00:19:56,860
So, we're going to find that element which is

261
00:19:56,860 --> 00:20:03,990
input and type text here,

262
00:20:03,990 --> 00:20:10,010
so this will help me to identify that input element where the author name is

263
00:20:10,010 --> 00:20:17,115
typed in the form that we have created in our dishdetail page.

264
00:20:17,115 --> 00:20:19,885
If you are curious,

265
00:20:19,885 --> 00:20:21,380
go and take a look at that form,

266
00:20:21,380 --> 00:20:23,645
and then you will see that there is indeed

267
00:20:23,645 --> 00:20:27,730
that input element in that dishdetail page there.

268
00:20:27,730 --> 00:20:33,700
So, accessing that, I'm going to type the author name

269
00:20:33,700 --> 00:20:39,890
into that input field there.

270
00:20:39,890 --> 00:20:47,590
So, this is where the sendKeys' method that is supported on our element comes to our aid,

271
00:20:47,590 --> 00:20:50,170
the sendKeys' method supported by Protractor.

272
00:20:50,170 --> 00:20:56,805
So here, I'm going to type in the author's name as test author.

273
00:20:56,805 --> 00:21:01,750
So, at the end of these two steps,

274
00:21:01,750 --> 00:21:07,105
the test author should be typed into the input element in my form.

275
00:21:07,105 --> 00:21:11,475
Now, in addition, I also need to type in the comment for that form.

276
00:21:11,475 --> 00:21:14,660
We also can set up the rating value,

277
00:21:14,660 --> 00:21:16,770
but I'm not going to do that in this particular test,

278
00:21:16,770 --> 00:21:21,530
I'm just going to type in the comment value using a similar approach.

279
00:21:21,530 --> 00:21:26,250
So, I'll say, "let newComment",

280
00:21:26,250 --> 00:21:29,650
again, will get page,

281
00:21:29,660 --> 00:21:34,690
getElement, and then this is where I look for

282
00:21:34,690 --> 00:21:42,080
the textarea and newComment,

283
00:21:43,170 --> 00:21:52,340
SendKeys and type in "Test Comment".

284
00:21:52,650 --> 00:21:59,990
So, this will fill in the words Test Comment into the text area

285
00:21:59,990 --> 00:22:02,380
which contains the comments that

286
00:22:02,380 --> 00:22:07,130
the author is supposed to submit for that particular dish.

287
00:22:07,130 --> 00:22:12,530
After this, we will find the SubmitButton.

288
00:22:12,990 --> 00:22:15,430
So to do that, we'll say

289
00:22:15,430 --> 00:22:33,050
page.getElement button type submit,

290
00:22:33,570 --> 00:22:44,390
and then once we get hold of the button we just say, newSubmitButton.click.

291
00:22:44,390 --> 00:22:46,330
So, once we click on the button,

292
00:22:46,330 --> 00:22:48,610
the comment will resubmit it.

293
00:22:48,610 --> 00:22:55,930
Now, I'm going to use another method that Protractor supports.

294
00:22:55,930 --> 00:23:00,200
I am going to pause the test at that point.

295
00:23:00,200 --> 00:23:06,170
This will enable me to pass the test and then carry out the test or the plant,

296
00:23:06,170 --> 00:23:09,160
so this says, browser is undefined,

297
00:23:09,160 --> 00:23:14,210
so I need to go back up here and then import

298
00:23:18,930 --> 00:23:32,155
browser from Protractor library there,

299
00:23:32,155 --> 00:23:35,840
and then you see that the red squiggly line has disappeared,

300
00:23:35,840 --> 00:23:39,175
so my test should all be set up correctly there.

301
00:23:39,175 --> 00:23:40,935
So, let me save the changes,

302
00:23:40,935 --> 00:23:44,320
we'll go and execute this third test also,

303
00:23:44,320 --> 00:23:48,505
together with the remaining two tests that we have already input.

304
00:23:48,505 --> 00:23:54,375
Going to the browser, let me again execute the end-to-end test,

305
00:23:54,375 --> 00:23:57,765
when the browser opens, there we go,

306
00:23:57,765 --> 00:24:02,810
the first test has been carried out and that should succeed,

307
00:24:02,810 --> 00:24:08,780
the second test has been carried out and the third test where we navigated dish detail,

308
00:24:08,780 --> 00:24:18,145
and you see that the test comment was submitted correctly by our test.

309
00:24:18,145 --> 00:24:21,195
So, with this, we complete this exercise.

310
00:24:21,195 --> 00:24:27,730
In this exercise, you have carried out three different tests using the support from

311
00:24:27,730 --> 00:24:35,430
Protractor and found that our application passes all these three end-to-end tests.

312
00:24:35,430 --> 00:24:39,075
This is a good time for you to save the changes to

313
00:24:39,075 --> 00:24:46,420
your Git repository using the message end-to-end test.