1
00:00:00,000 --> 00:00:07,245
Bây giờ, chúng ta có một sự hiểu biết nhanh chóng về các

2
00:00:07,245 --> 00:00:10,140
bài kiểm tra đầu cuối và vai trò của các

3
00:00:10,140 --> 00:00:15,555
bài kiểm tra đầu cuối đóng trong chiến lược tổng thể để thử nghiệm các ứng dụng góc cạnh.

4
00:00:15,555 --> 00:00:18,929
Ngoài ra, một giới thiệu ngắn gọn về thước đo.

5
00:00:18,929 --> 00:00:22,835
Hãy tiến hành bài tập tiếp theo, nơi chúng tôi có thể sử dụng

6
00:00:22,835 --> 00:00:26,825
thước đo và thiết kế các bài kiểm tra đầu cuối của chúng tôi.

7
00:00:26,825 --> 00:00:30,960
Thật may mắn là CLI góc cạnh tự động thiết

8
00:00:30,960 --> 00:00:35,050
lập mọi thứ mà chúng ta cần để tiến hành các bài kiểm tra đầu cuối,

9
00:00:35,050 --> 00:00:37,935
như chúng ta sẽ thấy khi chúng ta tiến hành bài tập.

10
00:00:37,935 --> 00:00:43,430
Vì vậy, nó là một vấn đề của việc thực hiện các thử nghiệm khác nhau và

11
00:00:43,430 --> 00:00:50,035
sau đó thực hiện các thử nghiệm bằng cách sử dụng thước đo trong bài tập này.

12
00:00:50,035 --> 00:00:53,865
Đi đến ứng dụng góc cạnh của chúng tôi trong Visual Studio,

13
00:00:53,865 --> 00:00:56,305
nếu bạn nhìn vào gói tập tin JSON của chúng tôi,

14
00:00:56,305 --> 00:00:59,965
bạn sẽ thấy rằng chúng tôi đã tìm thấy

15
00:00:59,965 --> 00:01:05,640
CLI góc cạnh đã thiết lập tất cả mọi thứ mà chúng tôi cần để thực hiện các bài kiểm tra đầu cuối.

16
00:01:05,640 --> 00:01:07,295
Vì vậy, khi bạn cuộn xuống,

17
00:01:07,295 --> 00:01:10,550
bạn sẽ thấy rằng thước đo đã được cài đặt trên

18
00:01:10,550 --> 00:01:16,110
máy tính của chúng tôi trong dự án góc cạnh.

19
00:01:16,110 --> 00:01:23,420
Ngoài ra, chúng tôi nhận thấy rằng có một thư mục riêng biệt ở đây

20
00:01:23,420 --> 00:01:26,780
được gọi là e2e chứa một vài tệp

21
00:01:26,780 --> 00:01:30,350
đã được thiết lập để thực hiện kiểm tra đầu cuối.

22
00:01:30,350 --> 00:01:33,890
Bây giờ, nếu bạn cần thực hiện các bài kiểm tra đầu cuối rộng rãi,

23
00:01:33,890 --> 00:01:36,620
thì bạn nên tạo

24
00:01:36,620 --> 00:01:41,985
một tập tin riêng biệt cho mỗi tập hợp các bài kiểm tra đầu cuối mà bạn muốn thực hiện.

25
00:01:41,985 --> 00:01:43,785
Bây giờ, trong bài tập đặc biệt này,

26
00:01:43,785 --> 00:01:47,090
tôi chỉ minh họa cho các bạn cách thực hiện các bài kiểm tra đầu cuối.

27
00:01:47,090 --> 00:01:51,670
Vì vậy, tôi sẽ gắn bó với những gì đã được thiết lập bởi CLI góc cạnh.

28
00:01:51,670 --> 00:01:55,710
Chúng tôi sẽ làm việc với các tập tin mà chúng tôi có sẵn ngay tại đó.

29
00:01:55,710 --> 00:02:01,405
Vì vậy, chúng ta hãy nhìn nhanh vào hai tập tin này ở đây, app.e2e-spec.t,

30
00:02:01,405 --> 00:02:09,070
và bạn sẽ thấy rằng một số mã đã được giàn giáo ra vào tập tin này bằng góc cạnh.

31
00:02:09,070 --> 00:02:14,035
Ngoài ra, tập tin khác được gọi là app.po.t,

32
00:02:14,035 --> 00:02:17,780
đây là không có gì ngoài một lớp JavaScript chuẩn

33
00:02:17,780 --> 00:02:21,170
đã được thiết lập với một vài phương pháp ở đây.

34
00:02:21,170 --> 00:02:24,380
Bây giờ, những gì chúng ta sẽ làm là thêm một vài phương pháp để

35
00:02:24,380 --> 00:02:31,375
lớp JavaScript này và cũng cập nhật một số các phương pháp được đưa ra ở đây.

36
00:02:31,375 --> 00:02:40,095
Chúng tôi sẽ thiết lập các bài kiểm tra của chúng tôi trong tập tin app.e2e-spec.t.

37
00:02:40,095 --> 00:02:41,860
Vì vậy, để tiếp tục,

38
00:02:41,860 --> 00:02:44,875
chúng ta hãy đi đến ứng dụng.

39
00:02:44,875 --> 00:02:49,890
Po.Ts tập tin, và sau đó trong tập tin này, chúng ta hãy cập nhật này.

40
00:02:49,890 --> 00:02:55,140
Vì vậy, ở đây, bạn thấy rằng chúng tôi có hai phương pháp đã được thiết lập ở đây đã.

41
00:02:55,140 --> 00:03:01,160
Tôi sẽ cập nhật các phương pháp này để cho phép họ có một tham số ở đây.

42
00:03:01,160 --> 00:03:05,250
Vì vậy, tôi sẽ nói, NavigateTo với một liên kết,

43
00:03:05,250 --> 00:03:06,760
được cung cấp dưới dạng một chuỗi,

44
00:03:06,760 --> 00:03:10,970
và sau đó tôi sẽ cập nhật trình duyệt này có được để

45
00:03:10,970 --> 00:03:15,615
sử dụng liên kết đó là tham số cho phương pháp này.

46
00:03:15,615 --> 00:03:17,090
Vậy, điều này có tác dụng gì?

47
00:03:17,090 --> 00:03:18,330
Vì vậy, như bạn có thể thấy,

48
00:03:18,330 --> 00:03:22,490
chúng tôi đang sử dụng cú pháp thước đo ở đây.

49
00:03:22,490 --> 00:03:26,450
Vì vậy, điều này nói trở lại trình duyệt nhận được liên kết.

50
00:03:26,450 --> 00:03:32,075
Vì vậy, cuộc gọi đặc biệt này để trình duyệt này get phương pháp sẽ cho phép

51
00:03:32,075 --> 00:03:41,440
ứng dụng của chúng tôi để duyệt đến liên kết đặc biệt này được cung cấp như là một tham số ở đây.

52
00:03:41,440 --> 00:03:43,650
Vì vậy, trước khi cập nhật này,

53
00:03:43,650 --> 00:03:47,200
bạn thấy rằng liên kết được cung cấp ở đây là dấu gạch chéo,

54
00:03:47,200 --> 00:03:50,595
có nghĩa là gốc của ứng dụng góc cạnh của chúng tôi.

55
00:03:50,595 --> 00:03:54,650
Bây giờ, tôi đã cập nhật này để có một tham số ở đây.

56
00:03:54,650 --> 00:04:00,490
Tương tự, phương pháp thứ hai mà bạn thấy được gọi là GetParagraphText.

57
00:04:00,490 --> 00:04:08,685
Bây giờ, phương pháp này được sử dụng để có được nội dung bên trong của một phần tử HTML ở đây.

58
00:04:08,685 --> 00:04:11,680
Vì vậy, đối với điều này, cũng,

59
00:04:11,680 --> 00:04:14,770
tôi sẽ thiết lập một tham số gọi là selector,

60
00:04:14,770 --> 00:04:20,260
đó là một bộ chọn CSS mà tôi sẽ cung cấp ở đây.

61
00:04:20,260 --> 00:04:22,430
Vì vậy, bạn thấy rằng ở đây,

62
00:04:22,430 --> 00:04:28,775
tôi sẽ thay đổi điều này để lấy bộ chọn làm tham số.

63
00:04:28,775 --> 00:04:32,885
Bây giờ, từ kinh nghiệm trước đó với bài kiểm tra đơn vị,

64
00:04:32,885 --> 00:04:37,285
bạn sẽ thấy những gì bởi and.css đại diện cho.

65
00:04:37,285 --> 00:04:40,130
Đây là điều tương tự mà chúng tôi đang sử dụng ở đây cũng.

66
00:04:40,130 --> 00:04:47,820
Điều này bằng phương pháp ở đây đang được sử dụng bây giờ được nhập từ thư viện thước đo ở đây.

67
00:04:47,820 --> 00:04:52,610
Phương pháp phần tử cũng được nhập từ thư viện thước đo.

68
00:04:52,610 --> 00:04:56,915
Vì vậy, phương pháp phần tử này cho phép bạn truy cập vào một phần tử HTML

69
00:04:56,915 --> 00:05:02,510
bằng cách cung cấp lựa chọn đó cho phần tử HTML như một tham số ở đây.

70
00:05:02,510 --> 00:05:05,760
Vì vậy, bạn có thể nói bằng css, byID,

71
00:05:05,760 --> 00:05:11,855
và nhiều phương pháp khác như vậy có sẵn cho các lớp học ở đây.

72
00:05:11,855 --> 00:05:13,935
Sau đó, phương pháp GetText,

73
00:05:13,935 --> 00:05:19,580
được như chúng ta thấy văn bản bên trong có thể nhìn thấy của phần tử cụ thể này.

74
00:05:19,580 --> 00:05:22,985
Vì vậy, đây là một cách

75
00:05:28,520 --> 00:05:33,780
để truy xuất thông tin từ các phần tử HTML cụ thể trong cửa sổ trình duyệt của chúng tôi, và sau đó kiểm tra xem nếu nó phù hợp với một mô hình mà chúng tôi đang chỉ định ở đây.

76
00:05:33,780 --> 00:05:37,035
Vì vậy, với bản cập nhật này cho app.po.t,

77
00:05:37,035 --> 00:05:43,060
chúng ta hãy chuyển sang tệp app.e2e-spec.t.

78
00:05:43,060 --> 00:05:44,755
Vì vậy, trong tập tin này,

79
00:05:44,755 --> 00:05:48,630
bạn sẽ nhận thấy rằng chúng tôi đang sử dụng cú pháp Jasmine.

80
00:05:48,630 --> 00:05:54,730
Vì vậy, ở đây, bạn thấy tôi sử dụng mô tả và sau đó nói cho trang Appage.

81
00:05:54,730 --> 00:06:01,725
Vì vậy, ở đây, trang là nơi chúng tôi đang tạo ra lớp mới này được gọi là AppPage,

82
00:06:01,725 --> 00:06:08,330
mà chúng tôi đã tuyên bố trong tập tin app.po.tsnhư là một lớp JavaScript ở đây.

83
00:06:08,330 --> 00:06:13,540
Bây giờ, đây chỉ là một cách thuận tiện

84
00:06:13,540 --> 00:06:18,950
để thiết lập tất cả mọi thứ ở một vị trí, và sau đó có thể sử dụng chúng trong mã thử nghiệm của tôi.

85
00:06:18,950 --> 00:06:24,445
Vì vậy, ở đây, tôi tuyên bố trang để tham khảo AppPage này,

86
00:06:24,445 --> 00:06:26,809
và do đó sẽ cho phép tôi truy cập vào

87
00:06:26,809 --> 00:06:30,230
các phương pháp mà tôi đã xây dựng trong lớp đó ở đây.

88
00:06:30,230 --> 00:06:37,680
Vì vậy, bài kiểm tra đầu tiên mà tôi sẽ làm là để điều hướng đến

89
00:06:37,680 --> 00:06:42,140
thư mục gốc của ứng dụng góc cạnh của tôi

90
00:06:42,140 --> 00:06:46,440
và sau đó kiểm tra để xem nếu có một mô hình cụ thể trong đó.

91
00:06:46,440 --> 00:06:51,375
Bạn sẽ nhận thấy rằng trong trang chủ của tôi,

92
00:06:51,375 --> 00:06:56,170
bạn sẽ có chuỗi

93
00:06:56,170 --> 00:07:03,550
gọi là Ristorante Con Fusion

94
00:07:03,550 --> 00:07:06,480
bên trong một phần tử H1 trong trang của tôi.

95
00:07:06,480 --> 00:07:14,370
Vì vậy, những gì tôi sẽ làm là để điều hướng đến thư mục gốc của phần tử HTML của tôi.

96
00:07:14,370 --> 00:07:18,340
Sau đó, trong đó, tôi sẽ đi tìm xung quanh cho

97
00:07:18,340 --> 00:07:23,955
tuyến đường ứng dụng và sau đó tìm thẻ H1 bên trong tuyến đường ứng dụng.

98
00:07:23,955 --> 00:07:28,210
Sau đó, điều này nên bằng chuỗi đặc biệt này ở đây.

99
00:07:28,210 --> 00:07:29,620
Vì vậy, tôi chỉ sẽ sao chép

100
00:07:29,620 --> 00:07:34,530
chuỗi Ristorante Con Fusion ở đó và sau đó cung cấp đó như là một tham số ở đây.

101
00:07:34,530 --> 00:07:37,000
Vì vậy, tôi chỉ cập nhật các bài kiểm tra để kiểm tra

102
00:07:37,000 --> 00:07:41,585
chính xác những gì chúng tôi có trong ứng dụng góc được cập nhật của chúng tôi.

103
00:07:41,585 --> 00:07:43,200
Vì vậy, với thiết lập này,

104
00:07:43,200 --> 00:07:48,860
bây giờ tôi sẽ thực hiện thử nghiệm đầu tiên của tôi về ứng dụng góc cạnh của tôi.

105
00:07:48,860 --> 00:07:55,454
Vì vậy, chúng ta hãy lưu tất cả các thay đổi và sau đó quay trở lại thiết bị đầu cuối của chúng tôi.

106
00:07:55,454 --> 00:08:00,715
Trong thiết bị đầu cuối, trong thư mục dự án của tôi,

107
00:08:00,715 --> 00:08:05,965
tại dấu nhắc tôi sẽ gõ ng e2e.

108
00:08:05,965 --> 00:08:11,010
Bạn sẽ nhận thấy rằng điều này sẽ bắt đầu một trình duyệt.

109
00:08:11,010 --> 00:08:19,445
Trong trường hợp của tôi, nó sẽ bắt đầu một cửa sổ Chrome và sau đó thực hiện kiểm tra trong cửa sổ đó.

110
00:08:19,445 --> 00:08:21,710
Vì vậy, chúng ta hãy thực hiện bài kiểm tra đầu tiên.

111
00:08:21,710 --> 00:08:27,100
Bạn sẽ thấy rằng khi thử nghiệm chạy sau khi biên dịch ứng dụng góc cạnh của tôi,

112
00:08:27,100 --> 00:08:28,705
khi thử nghiệm chạy,

113
00:08:28,705 --> 00:08:33,725
sau đó nó sẽ đảm bảo rằng thử nghiệm là thành công.

114
00:08:33,725 --> 00:08:36,295
Bạn thấy rằng ở phía sau,

115
00:08:36,295 --> 00:08:42,055
trình duyệt của tôi được mở bởi ng e2e,

116
00:08:42,055 --> 00:08:46,880
và sau đó thử nghiệm được thực hiện trong cửa sổ trình duyệt đó.

117
00:08:46,880 --> 00:08:52,025
Nó nói rằng thử nghiệm đã được thực hiện thành công ở đây.

118
00:08:52,025 --> 00:08:54,390
Vì vậy, bạn nhận thấy rằng ngay cả trong trường hợp này,

119
00:08:54,390 --> 00:08:56,485
nó cần phải bắt đầu trình duyệt,

120
00:08:56,485 --> 00:08:59,310
tải ứng dụng góc cạnh của tôi vào trình duyệt,

121
00:08:59,310 --> 00:09:02,370
toàn bộ ứng dụng góc cạnh vào trình duyệt.

122
00:09:02,370 --> 00:09:07,210
Sau đó, thực hiện bài kiểm tra ra ứng dụng góc cạnh của tôi.

123
00:09:07,210 --> 00:09:12,595
Tại thời điểm này, hãy chắc chắn rằng máy chủ của bạn,

124
00:09:12,595 --> 00:09:15,025
máy chủ JSON đang hoạt động và chạy,

125
00:09:15,025 --> 00:09:16,510
nếu không, thử nghiệm của bạn sẽ thất bại,

126
00:09:16,510 --> 00:09:18,915
bởi vì khi thử nghiệm đã được thực hiện,

127
00:09:18,915 --> 00:09:22,140
nó sẽ cố gắng truy cập vào máy chủ JSON cũng.

128
00:09:22,140 --> 00:09:25,300
Vì vậy, đó là điều mà bạn cần phải đảm bảo.

129
00:09:25,300 --> 00:09:28,035
Tiếp tục các bài kiểm tra của chúng tôi.

130
00:09:28,035 --> 00:09:29,915
Trong bước thứ hai,

131
00:09:29,915 --> 00:09:35,290
chúng ta sẽ thêm vào một vài phương pháp khác vào ứng dụng này.

132
00:09:35,290 --> 00:09:41,330
Lớp học ở đây. Vì vậy, tôi sẽ sử dụng một phương pháp mới

133
00:09:41,330 --> 00:09:50,730
được gọi là GetLement và sau đó tham số của một bộ chọn.

134
00:09:51,160 --> 00:09:58,520
Phương pháp này cho phép tôi truy cập vào phần tử,

135
00:09:58,520 --> 00:10:04,500
được chọn bằng cách sử dụng cùng một bộ chọn CSS.

136
00:10:04,500 --> 00:10:06,545
Vì vậy, tôi sẽ sao chép cái này.

137
00:10:06,545 --> 00:10:09,785
Vì vậy, trong trường hợp này, thay vì chỉ nhận được văn bản,

138
00:10:09,785 --> 00:10:13,750
nó sẽ thực sự trả về tham chiếu đến phần tử chính nó,

139
00:10:13,750 --> 00:10:17,290
và sau đó bạn có thể thêm vào

140
00:10:17,290 --> 00:10:20,910
các cách bổ sung để truy cập thông tin bên trong phần tử đó như chúng ta yêu cầu.

141
00:10:20,910 --> 00:10:25,340
Trong trường hợp này, get-text chỉ được sử dụng để lấy văn bản cụ thể.

142
00:10:25,340 --> 00:10:28,470
Chúng ta có thể sử dụng các phương pháp khác trên

143
00:10:28,470 --> 00:10:31,520
phần tử này để lấy thêm thông tin từ các phần tử đó.

144
00:10:31,520 --> 00:10:37,220
Vì vậy, đó là lý do tại sao tôi tạo ra phương pháp này ở đây.

145
00:10:37,220 --> 00:10:45,595
Tương tự như vậy, tôi sẽ thực hiện một phương pháp khác gọi là get all element.

146
00:10:45,595 --> 00:10:52,040
Bây giờ, điều này cũng sử dụng một tham số gọi là selector giống như trước đây.

147
00:10:52,040 --> 00:10:56,115
Những gì phương pháp GetAll làm là chọn

148
00:10:56,115 --> 00:11:01,910
tất cả các yếu tố và sau đó trả lại

149
00:11:01,910 --> 00:11:03,720
cho cổ áo, do đó, ví dụ,

150
00:11:03,720 --> 00:11:08,310
nếu trang của bạn chứa nhiều yếu tố h1 tham

151
00:11:08,310 --> 00:11:12,990
chiếu đến tất cả chúng sẽ được trả lại cho cổ áo của tôi.

152
00:11:12,990 --> 00:11:16,790
Vì vậy, rằng có, sau đó tôi có thể quyết định thực hiện

153
00:11:16,790 --> 00:11:20,940
một cuộc gọi đến một trong những cụ thể trong danh sách này của các yếu tố.

154
00:11:20,940 --> 00:11:22,505
Vì vậy, để làm điều này,

155
00:11:22,505 --> 00:11:25,525
chúng tôi sẽ sử dụng cùng một trở lại nhưng ở đây,

156
00:11:25,525 --> 00:11:28,395
thay vì nói phần tử chọn,

157
00:11:28,395 --> 00:11:33,165
hãy để tôi chỉ sao chép mà và sau đó chúng tôi có một phương pháp gọi là

158
00:11:33,165 --> 00:11:37,340
element.all cho phép chúng tôi

159
00:11:37,340 --> 00:11:41,750
truy cập tất cả các yếu tố phù hợp với chọn cụ thể này.

160
00:11:41,750 --> 00:11:45,790
Đầu tiên sẽ trả về phần tử đầu tiên phù hợp với bộ chọn đó.

161
00:11:45,790 --> 00:11:55,805
Sau những cập nhật này, bây giờ chúng tôi sẽ chuyển sang tập tin thử nghiệm của chúng tôi và thêm vào một thử nghiệm mới ở đây.

162
00:11:55,805 --> 00:12:01,755
Vì vậy, ở đây một lần nữa, tôi đang sử dụng cú pháp Jasmine để thêm vào thử nghiệm mới ở đây.

163
00:12:01,755 --> 00:12:06,980
Vì vậy, tôi sẽ nói nó và sau đó đưa ra một mô tả cho bài kiểm tra này.

164
00:12:06,980 --> 00:12:13,510
Sẽ nói Nó nên điều hướng đến về

165
00:12:13,510 --> 00:12:22,645
chúng tôi trang bằng cách nhấp vào liên kết.

166
00:12:22,645 --> 00:12:25,705
Bây giờ, nếu bạn nhìn lại ứng dụng Angular của bạn,

167
00:12:25,705 --> 00:12:28,530
bạn sẽ nhận thấy rằng trong ứng dụng Angular

168
00:12:28,530 --> 00:12:36,735
của bạn, bạn có các liên kết điều hướng ở đầu trang.

169
00:12:36,735 --> 00:12:40,680
Vì vậy, những gì chúng ta sẽ làm trong bài kiểm tra này là tự động

170
00:12:40,680 --> 00:12:45,500
truy cập và truy cập vào một trong những liên kết điều hướng và nhấp vào chúng.

171
00:12:45,500 --> 00:12:49,545
Bây giờ, tất nhiên, như bạn mong đợi điều này sẽ được thực hiện theo lập trình,

172
00:12:49,545 --> 00:12:54,320
chứ không phải bằng cách nhấp vào liên kết theo cách thủ công.

173
00:12:54,320 --> 00:12:55,630
Vì vậy, để làm điều đó,

174
00:12:55,630 --> 00:13:05,325
những gì tôi sẽ làm là để điều hướng đến thư mục gốc của ứng dụng Angular của tôi và sau đó,

175
00:13:05,325 --> 00:13:08,490
tôi sẽ truy cập vào

176
00:13:15,040 --> 00:13:23,430
các liên kết trong thanh điều hướng của tôi ở trên cùng.

177
00:13:23,430 --> 00:13:27,850
Bằng cách nói trang, getAllElements và

178
00:13:27,850 --> 00:13:32,815
sau đó tôi sẽ nhận được tất cả các yếu tố có một thẻ trong đó.

179
00:13:32,815 --> 00:13:40,994
Bây giờ rõ ràng, bạn sẽ có rất nhiều trong số đó một thẻ trong trang của chúng tôi nhưng bốn đầu,

180
00:13:40,994 --> 00:13:44,950
là bốn liên kết

181
00:13:44,950 --> 00:13:52,100
trong thanh điều hướng ở đầu trang của chúng tôi có trong thành phần tiêu đề.

182
00:13:52,100 --> 00:13:54,420
Vì vậy, nhận được quyền truy cập vào những

183
00:13:54,420 --> 00:14:00,710
bây giờ lưu ý rằng tôi đang sử dụng get tất cả các yếu tố vì vậy tôi sẽ nhận được một số yếu tố.

184
00:14:00,710 --> 00:14:01,770
Trong trường hợp cụ thể này,

185
00:14:01,770 --> 00:14:07,850
nó chỉ ra là khoảng 16 thẻ khác nhau mà sẽ mặc trong trang đó ở đó.

186
00:14:07,850 --> 00:14:10,640
Vì vậy, tôi sẽ đi và chọn.

187
00:14:10,640 --> 00:14:15,800
Vì vậy, đây là nơi tôi sử dụng phương pháp này được gọi là get và sau đó tôi có thể chỉ định

188
00:14:15,800 --> 00:14:20,490
một chỉ số cho các yếu tố cụ thể mà tôi muốn.

189
00:14:20,490 --> 00:14:26,460
Vì vậy, tôi đã kiểm tra nếu bạn nhìn vào các thành phần tiêu đề tập tin mẫu,

190
00:14:26,460 --> 00:14:30,840
bạn sẽ nhận thấy rằng thứ hai một thẻ

191
00:14:30,840 --> 00:14:38,950
trong trang HTML của thành phần tiêu đề là đề cập đến liên kết về chúng tôi có.

192
00:14:38,950 --> 00:14:42,905
Vì vậy, đó là những gì tôi nhận được quyền truy cập bằng cách nói nhận được một.

193
00:14:42,905 --> 00:14:46,410
Zero, tất nhiên, đề cập đến liên kết nhà trong

194
00:14:46,410 --> 00:14:51,155
thành phần tiêu đề, nơi chúng tôi đã tạo thanh công cụ của chúng tôi ở trên cùng ở đó.

195
00:14:51,155 --> 00:14:55,745
Vì vậy, tôi có quyền truy cập vào thứ hai vì vậy đây là liên kết về ở đó.

196
00:14:55,745 --> 00:14:59,100
Bây giờ, một khi bạn có được giữ của liên kết này,

197
00:14:59,100 --> 00:15:03,030
có một phương pháp mà protractor hỗ trợ

198
00:15:03,030 --> 00:15:08,045
trên một phần tử với một liên kết có được gọi là nhấp chuột.

199
00:15:08,045 --> 00:15:11,335
Vì vậy, điều này, như bạn thấy lập trình,

200
00:15:11,335 --> 00:15:17,160
gây ra một nhấp chuột vào yếu tố cụ thể trong cửa sổ trình duyệt của tôi ở đó.

201
00:15:17,160 --> 00:15:21,840
Vì vậy, theo lập trình, chúng tôi đang thực hiện những gì bạn thường sẽ thực hiện

202
00:15:21,840 --> 00:15:27,160
bằng tay bằng cách đi đến liên kết đó và nhấp vào nó bằng cách sử dụng chuột của bạn.

203
00:15:27,160 --> 00:15:29,790
Bây giờ, một khi chúng ta nhấp vào liên kết, rõ ràng,

204
00:15:29,790 --> 00:15:33,400
bạn sẽ điều hướng đến trang Giới thiệu.

205
00:15:33,400 --> 00:15:35,020
Bây giờ, trong trang Giới thiệu,

206
00:15:35,020 --> 00:15:37,780
nếu bạn xem mẫu của trang Giới thiệu,

207
00:15:37,780 --> 00:15:45,105
bạn sẽ thấy rằng có một phần tử h3 chứa tên của trang đó.

208
00:15:45,105 --> 00:15:46,810
Trong phần tử h3 đó,

209
00:15:46,810 --> 00:15:51,640
bạn sẽ thấy một văn bản gọi là Giới thiệu về không gian chúng tôi ở đó.

210
00:15:51,640 --> 00:15:53,990
Vì vậy, đó là những gì tôi sẽ kiểm tra bây giờ.

211
00:15:53,990 --> 00:15:58,440
Lý do tôi sẽ kiểm tra đó là để đảm bảo rằng tôi đã thực sự điều hướng đến

212
00:15:58,440 --> 00:16:04,200
trang Giới thiệu về chúng tôi bằng cách thực hiện các bước này trong ứng dụng Angular của tôi.

213
00:16:04,200 --> 00:16:07,685
Vì vậy, đây là nơi tôi sẽ sử dụng mong đợi.

214
00:16:07,685 --> 00:16:14,375
Chúng tôi đã thấy việc sử dụng mong đợi và mong đợi trang.

215
00:16:14,375 --> 00:16:18,990
GetParagraphText và tôi sẽ nhận được văn bản đoạn từ

216
00:16:18,990 --> 00:16:25,365
h3 và điều này tôi mong đợi toBe.

217
00:16:25,365 --> 00:16:33,430
Chú ý việc sử dụng cú pháp Jasmine ở đây và điều này nên là Giới thiệu về chúng tôi.

218
00:16:34,460 --> 00:16:42,895
Vì vậy, giới thiệu thử nghiệm thứ hai này vào tập tin thử nghiệm của chúng tôi ở đây, chúng ta

219
00:16:42,895 --> 00:16:48,950
hãy lưu những thay đổi mà chúng tôi đã thực hiện và sau đó đi và thực hiện bài kiểm tra này.

220
00:16:49,510 --> 00:16:52,915
Đi đến nhà ga.

221
00:16:52,915 --> 00:16:57,680
Một lần nữa, hãy để tôi thực hiện bài kiểm tra bằng cách nói ng e2e

222
00:16:57,680 --> 00:17:03,220
và bạn sẽ nhận thấy rằng điều này sẽ một lần nữa đi qua cùng một tập hợp các bước,

223
00:17:03,220 --> 00:17:09,880
và sau đó thực hiện cả hai bài kiểm tra mà bây giờ tôi có trong tập tin kiểm tra.

224
00:17:09,880 --> 00:17:15,110
Thật thú vị khi xem thử nghiệm được thực hiện trong trình duyệt.

225
00:17:15,110 --> 00:17:17,390
Vì vậy, bạn thấy rằng chúng tôi đang ở trên Trang chủ,

226
00:17:17,390 --> 00:17:22,595
bây giờ bạn điều hướng đến trang Giới thiệu và sau đó thành công.

227
00:17:22,595 --> 00:17:25,840
Vì vậy, chúng tôi đã điều hướng thành công từ

228
00:17:25,840 --> 00:17:29,290
Trang chủ đến trang Giới thiệu và sau đó chúng tôi đã xác minh rằng bạn đã

229
00:17:29,290 --> 00:17:31,450
điều hướng đến trang Giới thiệu bằng cách thực hiện

230
00:17:31,450 --> 00:17:34,250
kiểm tra cụ thể mà chúng tôi đã kiểm tra để đảm bảo rằng

231
00:17:34,250 --> 00:17:39,515
Giới thiệu chúng tôi nằm trong một thẻ h3 bên trong trang Giới thiệu ở đó.

232
00:17:39,515 --> 00:17:43,270
Vì vậy, đây là một bài kiểm tra đầu cuối mà chúng tôi có thể thực hiện,

233
00:17:43,270 --> 00:17:46,320
và bạn thực sự thấy bài kiểm tra được thực hiện ngay trước

234
00:17:46,320 --> 00:17:49,855
mắt bạn mà không cần sự can thiệp bằng tay của bạn.

235
00:17:49,855 --> 00:17:53,840
Tôi hy vọng bạn đang thích thực hiện các bài kiểm tra đầu cuối này.

236
00:17:53,840 --> 00:17:55,725
Hãy tham vọng hơn một chút.

237
00:17:55,725 --> 00:18:00,280
Bây giờ, những gì chúng ta sẽ làm là điều hướng đến một món ăn cụ thể,

238
00:18:00,280 --> 00:18:04,615
và sau đó cố gắng chèn một bình luận vào món ăn đó.

239
00:18:04,615 --> 00:18:09,155
Bây giờ, đây là nơi tôi sẽ có sự giúp đỡ của Protractor hỗ trợ,

240
00:18:09,155 --> 00:18:13,020
và bạn sẽ thấy tôi sử dụng một số phương pháp khác từ

241
00:18:13,020 --> 00:18:17,675
Protractor để điều hướng đến trang món ăn,

242
00:18:17,675 --> 00:18:23,570
chúng tôi sẽ điều hướng đến món ăn đầu tiên trong menu của chúng tôi bằng cách sử dụng

243
00:18:23,570 --> 00:18:30,185
liên kết đến trang chi tiết món ăn với tham số đó món ăn đặc biệt,

244
00:18:30,185 --> 00:18:31,995
ID của món ăn đặc biệt.

245
00:18:31,995 --> 00:18:39,385
Sau đó, chúng tôi sẽ xác định các yếu tố đầu vào của biểu mẫu,

246
00:18:39,385 --> 00:18:42,990
và sau đó chúng tôi sẽ tự động gõ thông tin vào

247
00:18:42,990 --> 00:18:47,425
các yếu tố đầu vào đó và sau đó cố gắng gửi biểu mẫu và xem điều gì sẽ xảy ra.

248
00:18:47,425 --> 00:18:49,975
Vì vậy, để thực hiện bài kiểm tra này, một lần nữa,

249
00:18:49,975 --> 00:18:52,830
đi vào và sử dụng cú pháp Jasmine,

250
00:18:52,830 --> 00:18:59,595
tôi sẽ giới thiệu một nó ở đây và sau đó tôi sẽ xác định những gì thử nghiệm này đang cố gắng để làm.

251
00:18:59,595 --> 00:19:07,904
Tôi sẽ nói, “Nó sẽ nhập một bình luận mới cho

252
00:19:07,904 --> 00:19:15,470
món ăn đầu tiên” và chức năng mũi tên

253
00:19:15,470 --> 00:19:20,450
và bạn thấy rằng bên trong chức năng mũi tên này,

254
00:19:20,450 --> 00:19:27,985
chúng tôi sẽ làm trang đầu tiên của chúng tôi NavigateTo,

255
00:19:27,985 --> 00:19:35,660
chúng tôi sẽ điều hướng đến dishdetail zero.

256
00:19:35,660 --> 00:19:39,235
Vì vậy, đây là món ăn đầu tiên trong thực đơn của chúng tôi.

257
00:19:39,235 --> 00:19:43,060
Bây giờ, một khi chúng ta điều hướng đến trang dishdetail, chúng ta sẽ nói,

258
00:19:43,060 --> 00:19:52,030
“hãy để NewAuthor bằng trang GetRement.”

259
00:19:52,030 --> 00:19:56,860
Vì vậy, chúng ta sẽ tìm thấy rằng yếu tố đó là

260
00:19:56,860 --> 00:20:03,990
đầu vào và gõ văn bản ở đây,

261
00:20:03,990 --> 00:20:10,010
vì vậy điều này sẽ giúp tôi xác định rằng yếu tố đầu vào nơi tên tác giả được

262
00:20:10,010 --> 00:20:17,115
gõ trong các hình thức mà chúng tôi đã tạo ra trong trang dishdetail của chúng tôi.

263
00:20:17,115 --> 00:20:19,885
Nếu bạn tò mò,

264
00:20:19,885 --> 00:20:21,380
đi và có một cái nhìn vào hình thức đó,

265
00:20:21,380 --> 00:20:23,645
và sau đó bạn sẽ thấy rằng có thực sự là

266
00:20:23,645 --> 00:20:27,730
yếu tố đầu vào trong đó trang dishdetail có.

267
00:20:27,730 --> 00:20:33,700
Vì vậy, truy cập vào đó, tôi sẽ gõ tên tác giả

268
00:20:33,700 --> 00:20:39,890
vào trường đầu vào đó.

269
00:20:39,890 --> 00:20:47,590
Vì vậy, đây là nơi mà phương pháp SendKeys' được hỗ trợ trên phần tử của chúng tôi đến với

270
00:20:47,590 --> 00:20:50,170
sự trợ giúp của chúng tôi, phương pháp SendKeys' được hỗ trợ bởi Protractor.

271
00:20:50,170 --> 00:20:56,805
Vì vậy, ở đây, tôi sẽ gõ vào tên của tác giả như là tác giả thử nghiệm.

272
00:20:56,805 --> 00:21:01,750
Vì vậy, ở phần cuối của hai bước này,

273
00:21:01,750 --> 00:21:07,105
tác giả thử nghiệm nên được gõ vào các yếu tố đầu vào trong hình thức của tôi.

274
00:21:07,105 --> 00:21:11,475
Bây giờ, ngoài ra, tôi cũng cần phải gõ vào bình luận cho biểu mẫu đó.

275
00:21:11,475 --> 00:21:14,660
Chúng tôi cũng có thể thiết lập giá trị đánh giá,

276
00:21:14,660 --> 00:21:16,770
nhưng tôi sẽ không làm điều đó trong bài kiểm tra đặc biệt này,

277
00:21:16,770 --> 00:21:21,530
tôi chỉ cần gõ vào giá trị nhận xét bằng cách sử dụng một cách tiếp cận tương tự.

278
00:21:21,530 --> 00:21:26,250
Vì vậy, tôi sẽ nói, “để NewComment”,

279
00:21:26,250 --> 00:21:29,650
một lần nữa, sẽ nhận được trang,

280
00:21:29,660 --> 00:21:34,690
GetRement, và sau đó đây là nơi tôi tìm kiếm

281
00:21:34,690 --> 00:21:42,080
textarea và NewComment,

282
00:21:43,170 --> 00:21:52,340
SendKeys và gõ vào “Test Comment”.

283
00:21:52,650 --> 00:21:59,990
Vì vậy, điều này sẽ điền vào các từ Test Comment vào khu vực văn bản

284
00:21:59,990 --> 00:22:02,380
có chứa các ý kiến mà

285
00:22:02,380 --> 00:22:07,130
tác giả là phải nộp cho đó món ăn cụ thể.

286
00:22:07,130 --> 00:22:12,530
Sau đó, chúng tôi sẽ tìm thấy SubmitButton.

287
00:22:12,990 --> 00:22:15,430
Vì vậy, để làm điều đó, chúng ta sẽ nói

288
00:22:15,430 --> 00:22:33,050
page.GetRement nút loại gửi,

289
00:22:33,570 --> 00:22:44,390
và sau đó một khi chúng tôi nhận được giữ của nút chúng tôi chỉ cần nói, NewSubmitButton.Click.

290
00:22:44,390 --> 00:22:46,330
Vì vậy, một khi chúng ta nhấp vào

291
00:22:46,330 --> 00:22:48,610
nút, nhận xét sẽ gửi lại nó.

292
00:22:48,610 --> 00:22:55,930
Bây giờ, tôi sẽ sử dụng một phương pháp khác mà Protractor hỗ trợ.

293
00:22:55,930 --> 00:23:00,200
Tôi sẽ tạm dừng bài kiểm tra tại thời điểm đó.

294
00:23:00,200 --> 00:23:06,170
Điều này sẽ cho phép tôi vượt qua các bài kiểm tra và sau đó thực hiện các bài kiểm tra hoặc các nhà máy,

295
00:23:06,170 --> 00:23:09,160
vì vậy điều này nói, trình duyệt là không xác định,

296
00:23:09,160 --> 00:23:14,210
vì vậy tôi cần phải đi trở lại đây và sau đó nhập

297
00:23:18,930 --> 00:23:32,155
trình duyệt từ thư viện Protractor có,

298
00:23:32,155 --> 00:23:35,840
và sau đó bạn thấy rằng các dòng squiggly màu đỏ đã biến mất,

299
00:23:35,840 --> 00:23:39,175
vì vậy thử nghiệm của tôi nên tất cả được thiết lập chính xác ở đó.

300
00:23:39,175 --> 00:23:40,935
Vì vậy, hãy để tôi lưu các thay đổi,

301
00:23:40,935 --> 00:23:44,320
chúng tôi sẽ đi và thực hiện bài kiểm tra thứ ba này cũng,

302
00:23:44,320 --> 00:23:48,505
cùng với hai bài kiểm tra còn lại mà chúng tôi đã nhập.

303
00:23:48,505 --> 00:23:54,375
Đi đến trình duyệt, hãy để tôi thực hiện một lần nữa thử nghiệm đầu cuối,

304
00:23:54,375 --> 00:23:57,765
khi trình duyệt mở ra, chúng tôi đi,

305
00:23:57,765 --> 00:24:02,810
thử nghiệm đầu tiên đã được thực hiện và điều đó nên thành công,

306
00:24:02,810 --> 00:24:08,780
thử nghiệm thứ hai đã được thực hiện và thử nghiệm thứ ba nơi chúng tôi điều hướng chi tiết món ăn,

307
00:24:08,780 --> 00:24:18,145
và bạn thấy rằng bình luận thử nghiệm là gửi một cách chính xác bằng bài kiểm tra của chúng tôi.

308
00:24:18,145 --> 00:24:21,195
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

309
00:24:21,195 --> 00:24:27,730
Trong bài tập này, bạn đã thực hiện ba bài kiểm tra khác nhau bằng cách sử dụng sự hỗ trợ từ

310
00:24:27,730 --> 00:24:35,430
Protractor và thấy rằng ứng dụng của chúng tôi vượt qua tất cả ba bài kiểm tra đầu cuối này.

311
00:24:35,430 --> 00:24:39,075
Đây là thời điểm tốt để bạn lưu các thay đổi vào

312
00:24:39,075 --> 00:24:46,420
kho lưu trữ Git của bạn bằng cách sử dụng bài kiểm tra đầu cuối thông điệp.