1
00:00:00,000 --> 00:00:07,245
Теперь у нас есть быстрое понимание сквозных тестов

2
00:00:07,245 --> 00:00:10,140
и роли

3
00:00:10,140 --> 00:00:15,555
сквозных тестов в общей стратегии тестирования угловых приложений.

4
00:00:15,555 --> 00:00:18,929
Также, краткое введение в транспортир.

5
00:00:18,929 --> 00:00:22,835
Давайте приступим к следующему упражнению, где мы могли бы использовать

6
00:00:22,835 --> 00:00:26,825
транспортир и разработать наши сквозные тесты.

7
00:00:26,825 --> 00:00:30,960
К счастью, угловой CLI автоматически

8
00:00:30,960 --> 00:00:35,050
настраивает все, что нам нужно для проведения сквозных тестов,

9
00:00:35,050 --> 00:00:37,935
, как мы увидим, когда мы приступаем к упражнению.

10
00:00:37,935 --> 00:00:43,430
Таким образом, речь идет о реализации различных тестов и

11
00:00:43,430 --> 00:00:50,035
затем проведение теста с использованием транспортира в этом упражнении.

12
00:00:50,035 --> 00:00:53,865
Перейдя в наше угловое приложение в Visual Studio,

13
00:00:53,865 --> 00:00:56,305
если вы посмотрите на пакет нашего JSON-файла,

14
00:00:56,305 --> 00:00:59,965
вы увидите, что мы уже находим

15
00:00:59,965 --> 00:01:05,640
угловой CLI установил все, что нам нужно для проведения сквозных тестов.

16
00:01:05,640 --> 00:01:07,295
Итак, прокручивая вниз,

17
00:01:07,295 --> 00:01:10,550
вы увидите, что транспортир уже установлен на

18
00:01:10,550 --> 00:01:16,110
наш компьютер в рамках углового проекта.

19
00:01:16,110 --> 00:01:23,420
Также мы замечаем, что здесь есть отдельная папка

20
00:01:23,420 --> 00:01:26,780
под названием e2e, которая содержит несколько файлов

21
00:01:26,780 --> 00:01:30,350
, которые уже настроены для проведения сквозного теста.

22
00:01:30,350 --> 00:01:33,890
Теперь, если вам нужно провести обширные сквозные тесты,

23
00:01:33,890 --> 00:01:36,620
, то это хорошая идея, чтобы создать

24
00:01:36,620 --> 00:01:41,985
отдельный файл для каждого набора сквозных тестов, которые вы хотите выполнить.

25
00:01:41,985 --> 00:01:43,785
Теперь, в этом конкретном упражнении,

26
00:01:43,785 --> 00:01:47,090
я просто иллюстрирую вам, как проводить сквозные тесты.

27
00:01:47,090 --> 00:01:51,670
Итак, я собираюсь придерживаться того, что уже было установлено угловым CLI.

28
00:01:51,670 --> 00:01:55,710
Мы будем работать с файлами, которые у нас есть прямо там.

29
00:01:55,710 --> 00:02:01,405
Итак, давайте быстро посмотрим на эти два файла здесь, app.e2e-spec.ts,

30
00:02:01,405 --> 00:02:09,070
, и вы увидите, что некоторый код уже был выложен в этот файл по угловой.

31
00:02:09,070 --> 00:02:14,035
Кроме того, этот другой файл под названием app.po.ts,

32
00:02:14,035 --> 00:02:17,780
это не что иное, как стандартный класс JavaScript

33
00:02:17,780 --> 00:02:21,170
, который был настроен с помощью нескольких методов здесь.

34
00:02:21,170 --> 00:02:24,380
Теперь, что мы собираемся сделать, это добавить еще несколько методов для

35
00:02:24,380 --> 00:02:31,375
этого класса JavaScript, а также обновить некоторые из этих методов, которые приведены здесь.

36
00:02:31,375 --> 00:02:40,095
Мы установим наши тесты в файле app.e2e-spec.ts.

37
00:02:40,095 --> 00:02:41,860
Итак, чтобы продолжить,

38
00:02:41,860 --> 00:02:44,875
пойдем в приложение.

39
00:02:44,875 --> 00:02:49,890
Po.ts файл, а затем в этом файле, давайте обновим это.

40
00:02:49,890 --> 00:02:55,140
Итак, здесь вы видите, что у нас есть два метода, которые уже были созданы здесь.

41
00:02:55,140 --> 00:03:01,160
Я собираюсь обновить эти методы, чтобы позволить им взять параметр здесь.

42
00:03:01,160 --> 00:03:05,250
Итак, я скажу, navigateTo со ссылкой,

43
00:03:05,250 --> 00:03:06,760
которая предоставляется в виде строки,

44
00:03:06,760 --> 00:03:10,970
, а затем я собираюсь обновить этот браузер получить, чтобы

45
00:03:10,970 --> 00:03:15,615
использовать ссылку, которая является параметром для этого метода.

46
00:03:15,615 --> 00:03:17,090
Итак, что это делает?

47
00:03:17,090 --> 00:03:18,330
Итак, как вы можете видеть,

48
00:03:18,330 --> 00:03:22,490
мы используем синтаксис транспортира здесь.

49
00:03:22,490 --> 00:03:26,450
Итак, это говорит, что возврат браузера получает ссылку.

50
00:03:26,450 --> 00:03:32,075
Таким образом, этот конкретный вызов этого метода get браузера позволит

51
00:03:32,075 --> 00:03:41,440
нашему приложению перейти к этой конкретной ссылке, которая поставляется в качестве параметра здесь.

52
00:03:41,440 --> 00:03:43,650
Итак, перед этим обновлением

53
00:03:43,650 --> 00:03:47,200
вы видели, что ссылка здесь была косой чертой,

54
00:03:47,200 --> 00:03:50,595
, что означает, что корень нашего углового приложения.

55
00:03:50,595 --> 00:03:54,650
Теперь я обновил это, чтобы взять параметр здесь.

56
00:03:54,650 --> 00:04:00,490
Аналогично, второй метод, который вы видите, называется getParagraphText.

57
00:04:00,490 --> 00:04:08,685
Теперь этот метод используется для получения внутреннего содержимого HTML элемента здесь.

58
00:04:08,685 --> 00:04:11,680
Итак, для этого, также,

59
00:04:11,680 --> 00:04:14,770
я настрою параметр selector,

60
00:04:14,770 --> 00:04:20,260
, который является селектором CSS, который я поставлю здесь.

61
00:04:20,260 --> 00:04:22,430
Итак, вы видите, что здесь,

62
00:04:22,430 --> 00:04:28,775
я собираюсь изменить это, чтобы взять селектор в качестве параметра.

63
00:04:28,775 --> 00:04:32,885
Теперь, из предыдущего опыта с модульным тестом,

64
00:04:32,885 --> 00:04:37,285
вы видите, что и.css значит.

65
00:04:37,285 --> 00:04:40,130
Это то же самое, что мы используем и здесь.

66
00:04:40,130 --> 00:04:47,820
Этот метод, используемый здесь, теперь импортируется из библиотеки транспортира здесь.

67
00:04:47,820 --> 00:04:52,610
Метод элемента также импортируется из библиотеки транспортира.

68
00:04:52,610 --> 00:04:56,915
Таким образом, этот метод элемента позволяет получить доступ к HTML-элементу

69
00:04:56,915 --> 00:05:02,510
, предоставив эту отметку для элемента HTML в качестве параметра здесь.

70
00:05:02,510 --> 00:05:05,760
Итак, вы можете сказать по css, byID,

71
00:05:05,760 --> 00:05:11,855
и многим другим таким методам, доступным для класса здесь.

72
00:05:11,855 --> 00:05:13,935
Затем метод getText

73
00:05:13,935 --> 00:05:19,580
получает, как мы видим видимый внутренний текст этого конкретного элемента.

74
00:05:19,580 --> 00:05:22,985
Таким образом, это один из способов получения информации из

75
00:05:22,985 --> 00:05:28,520
конкретного элемента HTML в нашем окне браузера

76
00:05:28,520 --> 00:05:33,780
, а затем проверить, соответствует ли он шаблону, который мы указываем здесь.

77
00:05:33,780 --> 00:05:37,035
Итак, с этим обновлением app.po.ts,

78
00:05:37,035 --> 00:05:43,060
давайте перейдем к файлу app.e2e-spec.ts.

79
00:05:43,060 --> 00:05:44,755
Итак, в этом файле

80
00:05:44,755 --> 00:05:48,630
вы заметите, что мы используем синтаксис Jasmine.

81
00:05:48,630 --> 00:05:54,730
Итак, здесь, вы видите, что я использую описание, а затем, который говорит, пусть страница AppPage.

82
00:05:54,730 --> 00:06:01,725
Итак, вот страница, где мы создаем этот новый класс под названием AppPage,

83
00:06:01,725 --> 00:06:08,330
, который мы объявили в файле app.po.ts как класс JavaScript здесь.

84
00:06:08,330 --> 00:06:13,540
Теперь это просто удобный способ настроить все вещи в одном месте,

85
00:06:13,540 --> 00:06:18,950
, а затем использовать их в моем тестовом коде.

86
00:06:18,950 --> 00:06:24,445
Итак, здесь я объявляю страницу, чтобы ссылаться на этот AppPage,

87
00:06:24,445 --> 00:06:26,809
, и это позволит мне получить доступ

88
00:06:26,809 --> 00:06:30,230
к методам, которые я создал в этом классе здесь.

89
00:06:30,230 --> 00:06:37,680
Итак, первый тест, который я собираюсь сделать, это перейти к

90
00:06:37,680 --> 00:06:42,140
корню моего углового приложения

91
00:06:42,140 --> 00:06:46,440
, а затем проверить, есть ли в этом конкретный шаблон.

92
00:06:46,440 --> 00:06:51,375
Вы заметите, что на моей домашней странице

93
00:06:51,375 --> 00:06:56,170
у вас будет строка

94
00:06:56,170 --> 00:07:03,550
называется Ristorante Con Fusion

95
00:07:03,550 --> 00:07:06,480
внутри элемента H1 на моей странице.

96
00:07:06,480 --> 00:07:14,370
Итак, что я собираюсь сделать, это перейти к корню моего HTML-элемента.

97
00:07:14,370 --> 00:07:18,340
Затем, там, я буду искать

98
00:07:18,340 --> 00:07:23,955
маршрут приложения, а затем искать тег H1 внутри маршрута приложения.

99
00:07:23,955 --> 00:07:28,210
Тогда это должно быть равно этой конкретной строке здесь.

100
00:07:28,210 --> 00:07:29,620
Итак, я просто собираюсь скопировать

101
00:07:29,620 --> 00:07:34,530
строку Ristorante Con Fusion там, а затем поставить это в качестве параметра здесь.

102
00:07:34,530 --> 00:07:37,000
Итак, я просто обновляю тест, чтобы проверить

103
00:07:37,000 --> 00:07:41,585
именно то, что у нас есть в нашем обновленном угловом приложении.

104
00:07:41,585 --> 00:07:43,200
Итак, с этой настройкой

105
00:07:43,200 --> 00:07:48,860
теперь я собираюсь провести свой первый тест моего углового приложения.

106
00:07:48,860 --> 00:07:55,454
Итак, давайте сохраним все изменения, а затем вернемся в наш терминал.

107
00:07:55,454 --> 00:08:00,715
В терминале, в папке моего проекта,

108
00:08:00,715 --> 00:08:05,965
в подсказке я напечатаю ng e2e.

109
00:08:05,965 --> 00:08:11,010
Вы заметите, что это запустит браузер.

110
00:08:11,010 --> 00:08:19,445
В моем случае он запустит окно Chrome, а затем проведет тест в этом окне.

111
00:08:19,445 --> 00:08:21,710
Итак, давайте проведем первый тест.

112
00:08:21,710 --> 00:08:27,100
Вы увидите, что когда тест проходит после компиляции моего углового приложения,

113
00:08:27,100 --> 00:08:28,705
когда тест проходит,

114
00:08:28,705 --> 00:08:33,725
то он будет гарантировать, что тест будет успешным.

115
00:08:33,725 --> 00:08:36,295
Вы видите, что в задней части

116
00:08:36,295 --> 00:08:42,055
мой браузер открывается ng e2e,

117
00:08:42,055 --> 00:08:46,880
, а затем тест был проведен в этом окне браузера.

118
00:08:46,880 --> 00:08:52,025
В нем говорится, что тест был успешно проведен здесь.

119
00:08:52,025 --> 00:08:54,390
Итак, вы замечаете, что даже в этом случае

120
00:08:54,390 --> 00:08:56,485
нужно запустить браузер,

121
00:08:56,485 --> 00:08:59,310
загрузить в мое угловое приложение в браузер,

122
00:08:59,310 --> 00:09:02,370
все угловое приложение в браузер.

123
00:09:02,370 --> 00:09:07,210
Затем проведите тест от моего углового приложения.

124
00:09:07,210 --> 00:09:12,595
На этом этапе убедитесь, что ваш сервер,

125
00:09:12,595 --> 00:09:15,025
сервер JSON запущен и работает,

126
00:09:15,025 --> 00:09:16,510
в противном случае ваш тест завершится неудачей,

127
00:09:16,510 --> 00:09:18,915
потому что, когда тест был проведен,

128
00:09:18,915 --> 00:09:22,140
он попытается получить доступ к серверу JSON.

129
00:09:22,140 --> 00:09:25,300
Итак, это то, что вам нужно обеспечить.

130
00:09:25,300 --> 00:09:28,035
Продолжаем с нашими тестами.

131
00:09:28,035 --> 00:09:29,915
На втором шаге

132
00:09:29,915 --> 00:09:35,290
мы собираемся добавить еще пару методов в этот AppPage.

133
00:09:35,290 --> 00:09:41,330
Класс здесь. Итак, я бы использовал новый метод

134
00:09:41,330 --> 00:09:50,730
, называемый getElement, а затем взял параметр селектора.

135
00:09:51,160 --> 00:09:58,520
Этот метод позволяет мне получить доступ к элементу

136
00:09:58,520 --> 00:10:04,500
, который выбирается с помощью того же селектора CSS.

137
00:10:04,500 --> 00:10:06,545
Итак, я просто скопирую это.

138
00:10:06,545 --> 00:10:09,785
Таким образом, в этом случае вместо того, чтобы просто получить текст,

139
00:10:09,785 --> 00:10:13,750
он фактически вернет ссылку на сам элемент,

140
00:10:13,750 --> 00:10:17,290
, а затем, чтобы вы могли добавить дополнительными способами

141
00:10:17,290 --> 00:10:20,910
доступа к информации внутри этого элемента, как мы требуем.

142
00:10:20,910 --> 00:10:25,340
В этом случае get-text используется только для извлечения конкретного текста.

143
00:10:25,340 --> 00:10:28,470
Мы можем использовать другие методы на

144
00:10:28,470 --> 00:10:31,520
этого элемента для получения дополнительной информации из этих элементов.

145
00:10:31,520 --> 00:10:37,220
Итак, вот почему я создаю этот метод здесь.

146
00:10:37,220 --> 00:10:45,595
Аналогичным образом, я буду реализовывать другой метод, называемый get все элементы.

147
00:10:45,595 --> 00:10:52,040
Теперь это также использует параметр, называемый селектором, как и раньше.

148
00:10:52,040 --> 00:10:56,115
То, что делает метод GetAll, это выбрать

149
00:10:56,115 --> 00:11:01,910
все элементы, а затем вернуть их в воротник,

150
00:11:01,910 --> 00:11:03,720
так, что, например,

151
00:11:03,720 --> 00:11:08,310
, если ваша страница содержит много элементов h1 в

152
00:11:08,310 --> 00:11:12,990
ссылка на все из них, будет возвращена в мой воротник.

153
00:11:12,990 --> 00:11:16,790
Итак, что там, я могу затем решить сделать

154
00:11:16,790 --> 00:11:20,940
вызов к определенному в этом списке элементов.

155
00:11:20,940 --> 00:11:22,505
Итак, чтобы сделать это,

156
00:11:22,505 --> 00:11:25,525
мы будем использовать тот же возврат, но здесь,

157
00:11:25,525 --> 00:11:28,395
вместо того, чтобы сказать селектор элементов,

158
00:11:28,395 --> 00:11:33,165
позвольте мне просто скопировать это, а затем у нас есть другой метод под названием

159
00:11:33,165 --> 00:11:41,750
element.all, который позволяет нам raferatch получить доступ ко всем элементам, которые соответствуют этому конкретному селектору.

160
00:11:41,750 --> 00:11:45,790
Первый вернет первый элемент, который соответствует этому селектору.

161
00:11:45,790 --> 00:11:55,805
После этих обновлений мы перейдем к тестовым файлам и добавим новый тест здесь.

162
00:11:55,805 --> 00:12:01,755
Итак, опять же, я использую синтаксис Jasmine для добавления в новый тест здесь.

163
00:12:01,755 --> 00:12:06,980
Итак, я скажу это, а затем дам описание для этого теста.

164
00:12:06,980 --> 00:12:13,510
Скажу Он должен перейти к примерно

165
00:12:13,510 --> 00:12:22,645
нам страницу, нажав на ссылку.

166
00:12:22,645 --> 00:12:25,705
Теперь, если вы оглянетесь на свое угловое приложение,

167
00:12:25,705 --> 00:12:28,530
вы заметите, что в вашем угловом приложении,

168
00:12:28,530 --> 00:12:36,735
у вас есть навигационные ссылки в верхней части страницы.

169
00:12:36,735 --> 00:12:40,680
Итак, что мы собираемся сделать в этом тесте, это автоматически

170
00:12:40,680 --> 00:12:45,500
перейти и получить доступ к одной из этих навигационных ссылок и нажать на них.

171
00:12:45,500 --> 00:12:49,545
Теперь, конечно, как вы ожидаете, это будет сделано программно,

172
00:12:49,545 --> 00:12:54,320
, а не вручную нажав на ссылку.

173
00:12:54,320 --> 00:12:55,630
Итак, чтобы сделать это,

174
00:12:55,630 --> 00:13:05,325
то, что я собираюсь сделать, это перейти к корню моего углового приложения, а затем,

175
00:13:05,325 --> 00:13:08,490
я собираюсь получить доступ

176
00:13:15,040 --> 00:13:23,430
к ссылкам в моей панели навигации вверху.

177
00:13:23,430 --> 00:13:27,850
Сказав страницу, getAllElements и

178
00:13:27,850 --> 00:13:32,815
, тогда я получу все элементы, у которых есть тег.

179
00:13:32,815 --> 00:13:40,994
Теперь, очевидно, у вас будет много тех тегов на нашей странице, но четыре верхних,

180
00:13:40,994 --> 00:13:44,950
являются четыре ссылки в

181
00:13:44,950 --> 00:13:52,100
навигационной панели в верхней части нашей страницы там в компоненте заголовка.

182
00:13:52,100 --> 00:13:54,420
Итак, получая доступ к этим

183
00:13:54,420 --> 00:14:00,710
теперь обратите внимание, что я использую get все элементы, поэтому я собираюсь получить ряд элементов.

184
00:14:00,710 --> 00:14:01,770
В этом конкретном случае

185
00:14:01,770 --> 00:14:07,850
оказывается около 16 различных тегов, которые будут носить на этой странице там.

186
00:14:07,850 --> 00:14:10,640
Итак, я пойду и выберу.

187
00:14:10,640 --> 00:14:15,800
Итак, вот где я использую этот метод, называемый get, а затем я могу указать

188
00:14:15,800 --> 00:14:20,490
индекс для конкретного элемента, который я хочу.

189
00:14:20,490 --> 00:14:26,460
Итак, я проверил, если вы посмотрите на файл шаблона компонентов заголовка,

190
00:14:26,460 --> 00:14:30,840
вы заметите, что в самую секунду тег в

191
00:14:30,840 --> 00:14:38,950
HTML-страница компонента заголовка ссылается на ссылку о нас там.

192
00:14:38,950 --> 00:14:42,905
Так вот, к чему я получаю доступ, сказав получить один.

193
00:14:42,905 --> 00:14:46,410
Zero, конечно, относится к домашней ссылке в

194
00:14:46,410 --> 00:14:51,155
компонента заголовка, где мы создали нашу панель инструментов в верхней части.

195
00:14:51,155 --> 00:14:55,745
Итак, я получаю доступ ко второму, так что это ссылка там.

196
00:14:55,745 --> 00:14:59,100
Теперь, как только вы получите эту ссылку,

197
00:14:59,100 --> 00:15:03,030
есть метод, который транспортир поддерживает

198
00:15:03,030 --> 00:15:08,045
на элемент со ссылкой там называется щелчком.

199
00:15:08,045 --> 00:15:11,335
Итак, это, как вы видите программно,

200
00:15:11,335 --> 00:15:17,160
вызывает щелчок на этом конкретном элементе в моем окне браузера.

201
00:15:17,160 --> 00:15:21,840
Таким образом, программно, мы выполняем то, что вы обычно выполняете

202
00:15:21,840 --> 00:15:27,160
вручную, физически перейдя по этой ссылке и щелкнув по ней мышью.

203
00:15:27,160 --> 00:15:29,790
Теперь, как только мы нажимаем на ссылку,

204
00:15:29,790 --> 00:15:33,400
вы собираетесь перейти на страницу О нас.

205
00:15:33,400 --> 00:15:35,020
Теперь, на странице О нас,

206
00:15:35,020 --> 00:15:37,780
, если вы идете на шаблон страницы О нас,

207
00:15:37,780 --> 00:15:45,105
вы обнаружите, что есть элемент h3, который содержит имя этой страницы.

208
00:15:45,105 --> 00:15:46,810
В пределах этого элемента h3

209
00:15:46,810 --> 00:15:51,640
вы увидите текст под названием О пространстве нас там.

210
00:15:51,640 --> 00:15:53,990
Так вот, что я сейчас проверю.

211
00:15:53,990 --> 00:15:58,440
Причина, по которой я собираюсь проверить это, заключается в том, чтобы убедиться, что я действительно перешел на страницу

212
00:15:58,440 --> 00:16:04,200
О нас, выполнив эти шаги в моем угловом приложении.

213
00:16:04,200 --> 00:16:07,685
Итак, вот где я буду использовать ожидание.

214
00:16:07,685 --> 00:16:14,375
Мы уже видели использование ожидание и ожидание страницы.

215
00:16:14,375 --> 00:16:18,990
GetParagraphText и я собираюсь получить текст абзаца из

216
00:16:18,990 --> 00:16:25,365
h3, и это я ожидаю toBe.

217
00:16:25,365 --> 00:16:33,430
Обратите внимание на использование синтаксиса Jasmine здесь, и это должно быть О нас.

218
00:16:34,460 --> 00:16:42,895
Итак, введя этот второй тест в наш тестовый файл здесь,

219
00:16:42,895 --> 00:16:48,950
давайте сохраним изменения, которые мы сделали, а затем перейти и выполнить этот тест.

220
00:16:49,510 --> 00:16:52,915
Иду в терминал.

221
00:16:52,915 --> 00:16:57,680
Опять же, позвольте мне выполнить тест, сказав ng e2e

222
00:16:57,680 --> 00:17:03,220
, и вы заметите, что это снова пройдет через тот же набор шагов,

223
00:17:03,220 --> 00:17:09,880
, а затем выполнить оба теста, которые теперь у меня есть в тестовом файле.

224
00:17:09,880 --> 00:17:15,110
Интересно посмотреть, как проходит тест в браузере.

225
00:17:15,110 --> 00:17:17,390
Итак, вы видите, что мы находимся на главной странице,

226
00:17:17,390 --> 00:17:22,595
вы теперь переходите на страницу About и затем успех.

227
00:17:22,595 --> 00:17:25,840
Таким образом, мы успешно перешли с

228
00:17:25,840 --> 00:17:29,290
Домашняя страница на страницу О программе, а затем мы проверили, что у вас есть

229
00:17:29,290 --> 00:17:31,450
перейти на страницу About, проведя

230
00:17:31,450 --> 00:17:34,250
конкретный тест, где мы проверили, чтобы убедиться, что

231
00:17:34,250 --> 00:17:39,515
О нас находится в теге h3 внутри страницы О нас там.

232
00:17:39,515 --> 00:17:43,270
Итак, это еще один сквозной тест, который мы можем провести,

233
00:17:43,270 --> 00:17:46,320
, и вы видели, как тест проводится прямо перед

234
00:17:46,320 --> 00:17:49,855
ваших глаз без вашего ручного вмешательства.

235
00:17:49,855 --> 00:17:53,840
Надеюсь, вам нравится проводить эти сквозные тесты.

236
00:17:53,840 --> 00:17:55,725
Давайте немного амбициознее.

237
00:17:55,725 --> 00:18:00,280
Теперь, что мы собираемся сделать, это перейти к определенному блюду

238
00:18:00,280 --> 00:18:04,615
, а затем попытаться вставить комментарий в это блюдо.

239
00:18:04,615 --> 00:18:09,155
Теперь, вот где я собираюсь воспользоваться помощью Protractor поддержки,

240
00:18:09,155 --> 00:18:13,020
и вы увидите меня, используя еще несколько методов из

241
00:18:13,020 --> 00:18:17,675
Protractor для того, чтобы перейти на страницу блюда,

242
00:18:17,675 --> 00:18:23,570
мы перейдем к самому первому блюду в нашем меню, используя

243
00:18:23,570 --> 00:18:30,185
ссылку на страницу детализации блюда с параметром это конкретное блюдо,

244
00:18:30,185 --> 00:18:31,995
идентификатор конкретного блюда.

245
00:18:31,995 --> 00:18:39,385
Затем мы определим входные элементы формы

246
00:18:39,385 --> 00:18:42,990
, а затем будем автоматически вводить информацию в

247
00:18:42,990 --> 00:18:47,425
эти входные элементы, а затем попытаться отправить форму и посмотреть, что происходит.

248
00:18:47,425 --> 00:18:49,975
Итак, чтобы провести этот тест, снова

249
00:18:49,975 --> 00:18:52,830
войти и используя синтаксис Jasmine,

250
00:18:52,830 --> 00:18:59,595
я введу его здесь, а затем я определим, что этот тест пытается сделать.

251
00:18:59,595 --> 00:19:07,904
Я бы сказал, «Он должен ввести новый комментарий для первого

252
00:19:07,904 --> 00:19:15,470
блюдо» и функция стрелки

253
00:19:15,470 --> 00:19:20,450
, и вы видите, что внутри этой функции стрелки,

254
00:19:20,450 --> 00:19:27,985
мы собираемся сделать нашу первую страницу navigateTo,

255
00:19:27,985 --> 00:19:35,660
мы будем перейти к dishdetail ноль.

256
00:19:35,660 --> 00:19:39,235
Итак, это первое блюдо в нашем меню.

257
00:19:39,235 --> 00:19:43,060
Теперь, как только мы перейдем к странице dishdetail, мы скажем

258
00:19:43,060 --> 00:19:52,030
«пусть newAuthor равен странице getElement».

259
00:19:52,030 --> 00:19:56,860
Итак, мы собираемся найти этот элемент, который является

260
00:19:56,860 --> 00:20:03,990
ввода и введите текст здесь,

261
00:20:03,990 --> 00:20:10,010
, так что это поможет мне определить, что элемент ввода, где имя автора

262
00:20:10,010 --> 00:20:17,115
набрано в форме, которую мы создали на нашей странице dishdetail.

263
00:20:17,115 --> 00:20:19,885
Если вам интересно,

264
00:20:19,885 --> 00:20:21,380
пойти и взглянуть на эту форму,

265
00:20:21,380 --> 00:20:23,645
и тогда вы увидите, что есть действительно

266
00:20:23,645 --> 00:20:27,730
, что входной элемент на этой странице dishdetail там.

267
00:20:27,730 --> 00:20:33,700
Итак, доступ к этому, я собираюсь ввести имя автора

268
00:20:33,700 --> 00:20:39,890
в это поле ввода там.

269
00:20:39,890 --> 00:20:47,590
Итак, здесь на помощь приходит метод sendKeys', который поддерживается на нашем элементе,

270
00:20:47,590 --> 00:20:50,170
метод sendKeys', поддерживаемый Protractor.

271
00:20:50,170 --> 00:20:56,805
Итак, вот, я собираюсь ввести имя автора в качестве автора теста.

272
00:20:56,805 --> 00:21:01,750
Итак, в конце этих двух шагов

273
00:21:01,750 --> 00:21:07,105
автор теста должен быть набран в элементе ввода в моей форме.

274
00:21:07,105 --> 00:21:11,475
Теперь, кроме того, мне также нужно ввести комментарий для этой формы.

275
00:21:11,475 --> 00:21:14,660
Мы также можем настроить значение рейтинга,

276
00:21:14,660 --> 00:21:16,770
, но я не собираюсь делать это в этом конкретном тесте,

277
00:21:16,770 --> 00:21:21,530
Я просто собираюсь ввести значение комментария, используя аналогичный подход.

278
00:21:21,530 --> 00:21:26,250
Итак, я скажу, «пусть newComment»,

279
00:21:26,250 --> 00:21:29,650
снова, получит страницу

280
00:21:29,660 --> 00:21:34,690
getElement, а затем я ищу

281
00:21:34,690 --> 00:21:42,080
textarea и newComment,

282
00:21:43,170 --> 00:21:52,340
SendKeys и введите «Test Comment».

283
00:21:52,650 --> 00:21:59,990
Таким образом, это заполнит слова Test Comment в текстовой области

284
00:21:59,990 --> 00:22:02,380
, которая содержит комментарии, которые

285
00:22:02,380 --> 00:22:07,130
автор должен представить для этого конкретного блюда.

286
00:22:07,130 --> 00:22:12,530
После этого мы найдем SubmitButton.

287
00:22:12,990 --> 00:22:15,430
Итак, чтобы сделать это, мы скажем

288
00:22:15,430 --> 00:22:33,050
page.getElement тип кнопки отправить,

289
00:22:33,570 --> 00:22:44,390
, а затем, как только мы достанем кнопку мы просто говорим, newSubmitButton.click.

290
00:22:44,390 --> 00:22:46,330
Итак, как только мы нажмем на кнопку,

291
00:22:46,330 --> 00:22:48,610
комментарий будет повторно отправить его.

292
00:22:48,610 --> 00:22:55,930
Теперь я собираюсь использовать другой метод, который поддерживает Protractor.

293
00:22:55,930 --> 00:23:00,200
Я собираюсь приостановить тест в этот момент.

294
00:23:00,200 --> 00:23:06,170
Это позволит мне пройти тест, а затем провести тест или завод,

295
00:23:06,170 --> 00:23:09,160
так что это говорит, браузер не определен,

296
00:23:09,160 --> 00:23:14,210
поэтому мне нужно вернуться сюда, а затем импортировать

297
00:23:18,930 --> 00:23:32,155
браузер из библиотеки Protractor там,

298
00:23:32,155 --> 00:23:35,840
, а затем вы видите, что красная линия squiggly исчезла,

299
00:23:35,840 --> 00:23:39,175
так что мой тест должен все должны быть настроены правильно там.

300
00:23:39,175 --> 00:23:40,935
Итак, позвольте мне сохранить изменения,

301
00:23:40,935 --> 00:23:44,320
мы пойдем и выполним этот третий тест также,

302
00:23:44,320 --> 00:23:48,505
вместе с оставшимися двумя тестами, которые мы уже ввели.

303
00:23:48,505 --> 00:23:54,375
Перейдя в браузер, позвольте мне снова выполнить сквозной тест,

304
00:23:54,375 --> 00:23:57,765
когда браузер открывается, туда мы идем,

305
00:23:57,765 --> 00:24:02,810
первый тест был проведен и что должно быть успешным,

306
00:24:02,810 --> 00:24:08,780
второй тест был проведен и третий тест, где мы перешли блюдо подробно,

307
00:24:08,780 --> 00:24:18,145
и вы видите, что тест комментарий был представлен правильно нашим тестом.

308
00:24:18,145 --> 00:24:21,195
Итак, этим мы завершаем это упражнение.

309
00:24:21,195 --> 00:24:27,730
В этом упражнении вы провели три различных теста, используя поддержку

310
00:24:27,730 --> 00:24:35,430
Protractor, и обнаружили, что наше приложение проходит все эти три сквозных теста.

311
00:24:35,430 --> 00:24:39,075
Пришло время сохранить изменения в

312
00:24:39,075 --> 00:24:46,420
репозитории Git с помощью сквозного теста сообщений.