1
00:00:00,000 --> 00:00:07,245
Ahora, tenemos una comprensión rápida de las pruebas de extremo a extremo

2
00:00:07,245 --> 00:00:10,140
y qué papel desempeñan las pruebas de extremo a extremo

3
00:00:10,140 --> 00:00:15,555
en la estrategia general para la prueba de aplicaciones angulares.

4
00:00:15,555 --> 00:00:18,929
Además, una breve introducción al transportador.

5
00:00:18,929 --> 00:00:22,835
Procedamos con el próximo ejercicio donde podríamos emplear el transportador

6
00:00:22,835 --> 00:00:26,825
y diseñar nuestras pruebas de extremo a extremo.

7
00:00:26,825 --> 00:00:30,960
Es una suerte que angular CLI

8
00:00:30,960 --> 00:00:35,050
establezca automáticamente todo lo que necesitamos para realizar pruebas de extremo a extremo,

9
00:00:35,050 --> 00:00:37,935
como veremos cuando procedamos con el ejercicio.

10
00:00:37,935 --> 00:00:43,430
Por lo tanto, se trata de implementar las diversas pruebas y

11
00:00:43,430 --> 00:00:50,035
luego llevar a cabo la prueba usando transportador en este ejercicio.

12
00:00:50,035 --> 00:00:53,865
Ir a nuestra aplicación angular en Visual Studio,

13
00:00:53,865 --> 00:00:56,305
si nos fijamos en el paquete de nuestro archivo JSON,

14
00:00:56,305 --> 00:00:59,965
veremos que ya encontramos

15
00:00:59,965 --> 00:01:05,640
la CLI angular ha configurado todo lo que necesitamos para llevar a cabo las pruebas de extremo a extremo.

16
00:01:05,640 --> 00:01:07,295
Así que, mientras te desplazas hacia abajo,

17
00:01:07,295 --> 00:01:10,550
verías que el transportador ya ha sido instalado en

18
00:01:10,550 --> 00:01:16,110
nuestro ordenador dentro del proyecto angular.

19
00:01:16,110 --> 00:01:23,420
Además, notamos que aquí hay una carpeta separada

20
00:01:23,420 --> 00:01:26,780
llamada e2e que contiene algunos archivos

21
00:01:26,780 --> 00:01:30,350
que ya se han configurado para llevar a cabo una prueba de extremo a extremo.

22
00:01:30,350 --> 00:01:33,890
Ahora, si necesita llevar a cabo extensas pruebas de extremo a extremo,

23
00:01:33,890 --> 00:01:36,620
entonces es una buena idea crear

24
00:01:36,620 --> 00:01:41,985
un archivo separado para cada conjunto de pruebas de extremo a extremo que desee llevar a cabo.

25
00:01:41,985 --> 00:01:43,785
Ahora, en este ejercicio en particular,

26
00:01:43,785 --> 00:01:47,090
sólo les estoy ilustrando cómo llevar a cabo pruebas de extremo a extremo.

27
00:01:47,090 --> 00:01:51,670
Entonces, voy a seguir con lo que ya ha sido configurado por angular CLI.

28
00:01:51,670 --> 00:01:55,710
Trabajaremos con los archivos que tenemos disponibles allí.

29
00:01:55,710 --> 00:02:01,405
Entonces, echemos un vistazo rápido a estos dos archivos aquí, la app.e2e-spec.ts,

30
00:02:01,405 --> 00:02:09,070
y verás que algún código ya ha sido andamiado en este archivo por angular.

31
00:02:09,070 --> 00:02:14,035
Además, este otro archivo llamado app.po.ts,

32
00:02:14,035 --> 00:02:17,780
esto no es más que una clase estándar de JavaScript

33
00:02:17,780 --> 00:02:21,170
que se ha configurado con algunos métodos aquí.

34
00:02:21,170 --> 00:02:24,380
Ahora, lo que vamos a hacer es agregar algunos métodos más a

35
00:02:24,380 --> 00:02:31,375
esta clase de JavaScript y también actualizar algunos de estos métodos que se dan aquí.

36
00:02:31,375 --> 00:02:40,095
Vamos a configurar nuestras pruebas en el archivo app.e2e-spec.ts.

37
00:02:40,095 --> 00:02:41,860
Así que, para continuar,

38
00:02:41,860 --> 00:02:44,875
vamos a la aplicación.

39
00:02:44,875 --> 00:02:49,890
archivo PO.ts, y luego dentro de este archivo, vamos a actualizar esto.

40
00:02:49,890 --> 00:02:55,140
Así que, aquí, ven que tenemos dos métodos que ya se han configurado aquí.

41
00:02:55,140 --> 00:03:01,160
Voy a actualizar estos métodos para permitirles tomar un parámetro aquí.

42
00:03:01,160 --> 00:03:05,250
Así que, voy a decir, NavigateTo con un enlace,

43
00:03:05,250 --> 00:03:06,760
que se proporciona como una cadena,

44
00:03:06,760 --> 00:03:10,970
y luego voy a actualizar este navegador llegar a

45
00:03:10,970 --> 00:03:15,615
usar el enlace que es el parámetro para este método.

46
00:03:15,615 --> 00:03:17,090
Entonces, ¿qué hace esto?

47
00:03:17,090 --> 00:03:18,330
Así que, como pueden ver,

48
00:03:18,330 --> 00:03:22,490
estamos haciendo uso de la sintaxis del transportador aquí.

49
00:03:22,490 --> 00:03:26,450
Entonces, esto dice retorno navegador get link.

50
00:03:26,450 --> 00:03:32,075
Por lo tanto, esta llamada en particular a este método de obtención del navegador habilitará

51
00:03:32,075 --> 00:03:41,440
nuestra aplicación para navegar a este enlace en particular que se suministra como un parámetro aquí.

52
00:03:41,440 --> 00:03:43,650
Entonces, antes de esta actualización,

53
00:03:43,650 --> 00:03:47,200
vio que el enlace suministrado aquí era barra,

54
00:03:47,200 --> 00:03:50,595
lo que significa que la raíz de nuestra aplicación angular.

55
00:03:50,595 --> 00:03:54,650
Ahora, he actualizado esto para tomar un parámetro aquí.

56
00:03:54,650 --> 00:04:00,490
Del mismo modo, el segundo método que ve se llama GetParagraphText.

57
00:04:00,490 --> 00:04:08,685
Ahora, este método se utiliza para obtener el contenido interno de un elemento HTML aquí.

58
00:04:08,685 --> 00:04:11,680
Entonces, para esto, también,

59
00:04:11,680 --> 00:04:14,770
configuraré un parámetro llamado selector,

60
00:04:14,770 --> 00:04:20,260
que es un selector CSS que suministraré aquí.

61
00:04:20,260 --> 00:04:22,430
Entonces, ves que aquí,

62
00:04:22,430 --> 00:04:28,775
voy a cambiar esto para tomar el selector como el parámetro.

63
00:04:28,775 --> 00:04:32,885
Ahora, de la experiencia anterior con la prueba unitaria,

64
00:04:32,885 --> 00:04:37,285
ves lo que significa y.css.

65
00:04:37,285 --> 00:04:40,130
Esto es lo mismo que estamos usando aquí también.

66
00:04:40,130 --> 00:04:47,820
Esto por método que se está utilizando ahora se importa desde la biblioteca de transportador aquí.

67
00:04:47,820 --> 00:04:52,610
El método del elemento también se importa de la biblioteca del transportador.

68
00:04:52,610 --> 00:04:56,915
Por lo tanto, este método de elemento le permite obtener acceso a un elemento HTML

69
00:04:56,915 --> 00:05:02,510
proporcionando esa selección para el elemento HTML como un parámetro aquí.

70
00:05:02,510 --> 00:05:05,760
Entonces, puedes decir por css, byId,

71
00:05:05,760 --> 00:05:11,855
y muchos otros métodos de este tipo disponibles para la clase by aquí.

72
00:05:11,855 --> 00:05:13,935
Entonces, el método getText,

73
00:05:13,935 --> 00:05:19,580
obtiene a medida que vemos el texto interior visible de este elemento en particular.

74
00:05:19,580 --> 00:05:22,985
Por lo tanto, esta es una forma de recuperar información de

75
00:05:22,985 --> 00:05:28,520
el elemento HTML particular dentro de nuestra ventana del navegador,

76
00:05:28,520 --> 00:05:33,780
y luego verificar si coincide con un patrón que estamos especificando aquí.

77
00:05:33,780 --> 00:05:37,035
Entonces, con esta actualización a app.po.ts,

78
00:05:37,035 --> 00:05:43,060
pasemos al archivo app.e2e-spec.ts.

79
00:05:43,060 --> 00:05:44,755
Así que, dentro de este archivo,

80
00:05:44,755 --> 00:05:48,630
notarás que estamos usando la sintaxis de Jasmine.

81
00:05:48,630 --> 00:05:54,730
Así que, aquí, me ves usando describir y luego lo que dice dejar la página AppPage.

82
00:05:54,730 --> 00:06:01,725
Así que, aquí, la página es donde estamos creando esta nueva clase llamada AppPage,

83
00:06:01,725 --> 00:06:08,330
que hemos declarado en el archivo app.po.ts como una clase de JavaScript aquí.

84
00:06:08,330 --> 00:06:13,540
Ahora, esta es solo una forma conveniente de configurar todas las cosas en una ubicación,

85
00:06:13,540 --> 00:06:18,950
y luego poder hacer uso de ellas en mi código de prueba.

86
00:06:18,950 --> 00:06:24,445
Entonces, aquí, estoy declarando la página para referirse a esta AppPage,

87
00:06:24,445 --> 00:06:26,809
y eso me permitirá acceder

88
00:06:26,809 --> 00:06:30,230
los métodos que he construido en esa clase aquí.

89
00:06:30,230 --> 00:06:37,680
Entonces, la primera prueba que voy a hacer es navegar a

90
00:06:37,680 --> 00:06:42,140
la raíz de mi aplicación angular

91
00:06:42,140 --> 00:06:46,440
y luego verificar si hay un patrón específico en eso.

92
00:06:46,440 --> 00:06:51,375
Notarás que en mi página principal,

93
00:06:51,375 --> 00:06:56,170
tendrás la cadena

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

95
00:07:03,550 --> 00:07:06,480
dentro de un elemento H1 en mi página.

96
00:07:06,480 --> 00:07:14,370
Entonces, lo que voy a hacer es navegar a la raíz de mi elemento HTML.

97
00:07:14,370 --> 00:07:18,340
Luego, allí, iré buscando

98
00:07:18,340 --> 00:07:23,955
la ruta de la aplicación y luego buscaré la etiqueta H1 dentro de la ruta de la aplicación.

99
00:07:23,955 --> 00:07:28,210
Entonces, esto debería ser igual a esta cadena en particular aquí.

100
00:07:28,210 --> 00:07:29,620
Entonces, solo voy a copiar

101
00:07:29,620 --> 00:07:34,530
la cadena Ristorante Con Fusion allí y luego suministrar eso como un parámetro aquí.

102
00:07:34,530 --> 00:07:37,000
Entonces, solo estoy actualizando la prueba para verificar

103
00:07:37,000 --> 00:07:41,585
exactamente lo que tenemos dentro de nuestra aplicación angular actualizada.

104
00:07:41,585 --> 00:07:43,200
Así que, con esta configuración,

105
00:07:43,200 --> 00:07:48,860
ahora voy a llevar a cabo mi primera prueba de mi aplicación angular.

106
00:07:48,860 --> 00:07:55,454
Así que, guardemos todos los cambios y luego regresemos a nuestra terminal.

107
00:07:55,454 --> 00:08:00,715
Dentro de la terminal, en mi carpeta de proyecto,

108
00:08:00,715 --> 00:08:05,965
en el símbolo del sistema, escribiré ng e2e.

109
00:08:05,965 --> 00:08:11,010
Notará que esto iniciará un navegador.

110
00:08:11,010 --> 00:08:19,445
En mi caso, iniciará una ventana de Chrome y luego realizará la prueba en esa ventana.

111
00:08:19,445 --> 00:08:21,710
Entonces, vamos a llevar a cabo la primera prueba.

112
00:08:21,710 --> 00:08:27,100
Verá que cuando la prueba se ejecuta después de compilar mi aplicación angular,

113
00:08:27,100 --> 00:08:28,705
cuando se ejecuta la prueba,

114
00:08:28,705 --> 00:08:33,725
se asegurará de que la prueba sea exitosa.

115
00:08:33,725 --> 00:08:36,295
Ves que en la parte posterior,

116
00:08:36,295 --> 00:08:42,055
mi navegador es abierto por ng e2e,

117
00:08:42,055 --> 00:08:46,880
y luego la prueba se llevó a cabo en esa ventana del navegador.

118
00:08:46,880 --> 00:08:52,025
Dice que la prueba se llevó a cabo con éxito aquí.

119
00:08:52,025 --> 00:08:54,390
Entonces, nota que incluso en este caso,

120
00:08:54,390 --> 00:08:56,485
necesita iniciar el navegador,

121
00:08:56,485 --> 00:08:59,310
cargar en mi aplicación angular en el navegador,

122
00:08:59,310 --> 00:09:02,370
toda la aplicación angular en el navegador.

123
00:09:02,370 --> 00:09:07,210
Luego, lleve a cabo la prueba de mi aplicación angular.

124
00:09:07,210 --> 00:09:12,595
En este punto, asegúrese de que su servidor,

125
00:09:12,595 --> 00:09:15,025
el servidor JSON está en funcionamiento,

126
00:09:15,025 --> 00:09:16,510
de lo contrario, su prueba fallará,

127
00:09:16,510 --> 00:09:18,915
porque cuando la prueba se haya realizado,

128
00:09:18,915 --> 00:09:22,140
intentará acceder al servidor JSON también.

129
00:09:22,140 --> 00:09:25,300
Por lo tanto, eso es algo que debes asegurar.

130
00:09:25,300 --> 00:09:28,035
continuar con nuestras pruebas.

131
00:09:28,035 --> 00:09:29,915
En el segundo paso,

132
00:09:29,915 --> 00:09:35,290
vamos a añadir un par de métodos más a esta AppPage.Clase

133
00:09:35,290 --> 00:09:41,330
aquí. Entonces, usaría un nuevo método

134
00:09:41,330 --> 00:09:50,730
llamado getElement y luego tomaría un parámetro de un selector.

135
00:09:51,160 --> 00:09:58,520
Este método me permite obtener acceso al elemento,

136
00:09:58,520 --> 00:10:04,500
que se selecciona utilizando el mismo mediante el selector CSS.

137
00:10:04,500 --> 00:10:06,545
Entonces, solo voy a copiar esto.

138
00:10:06,545 --> 00:10:09,785
Entonces, en este caso, en lugar de simplemente obtener el texto,

139
00:10:09,785 --> 00:10:13,750
realmente devolverá la referencia al elemento en sí,

140
00:10:13,750 --> 00:10:17,290
y luego para que pueda agregar de formas adicionales

141
00:10:17,290 --> 00:10:20,910
de acceder a la información dentro de ese elemento como lo requiriéramos.

142
00:10:20,910 --> 00:10:25,340
En este caso, el get-text se utiliza sólo para obtener el texto específico.

143
00:10:25,340 --> 00:10:28,470
Podríamos usar otros métodos en

144
00:10:28,470 --> 00:10:31,520
este elemento para obtener información adicional de esos elementos.

145
00:10:31,520 --> 00:10:37,220
Entonces, esa es la razón por la que estoy creando este método aquí.

146
00:10:37,220 --> 00:10:45,595
Del mismo modo, implementaré otro método llamado get all elements.

147
00:10:45,595 --> 00:10:52,040
Ahora, esto también usa un parámetro llamado selector como antes.

148
00:10:52,040 --> 00:10:56,115
Lo que hace el método getAll es seleccionar

149
00:10:56,115 --> 00:11:01,910
todos los elementos y luego devolverlos al collar,

150
00:11:01,910 --> 00:11:03,720
para que, por ejemplo,

151
00:11:03,720 --> 00:11:08,310
si su página contiene muchos elementos h1 en

152
00:11:08,310 --> 00:11:12,990
referencia a todos ellos se devuelva a mi collar.

153
00:11:12,990 --> 00:11:16,790
Entonces, que allí, entonces puedo decidir hacer

154
00:11:16,790 --> 00:11:20,940
una llamada a uno específico dentro de esta lista de elementos.

155
00:11:20,940 --> 00:11:22,505
Entonces, para hacer esto,

156
00:11:22,505 --> 00:11:25,525
usaremos el mismo retorno pero aquí,

157
00:11:25,525 --> 00:11:28,395
en lugar de decir selector de elementos,

158
00:11:28,395 --> 00:11:33,165
permítanme copiar eso y luego tenemos otro método llamado

159
00:11:33,165 --> 00:11:37,340
element.all que nos permite

160
00:11:37,340 --> 00:11:41,750
acceder a todos los elementos que coinciden con este selector en particular.

161
00:11:41,750 --> 00:11:45,790
El primero devolverá el primer elemento que coincida con ese selector.

162
00:11:45,790 --> 00:11:55,805
Después de estas actualizaciones, ahora cambiaremos a nuestro archivo de prueba y agregaremos una nueva prueba aquí.

163
00:11:55,805 --> 00:12:01,755
Entonces, aquí nuevamente, estoy usando la sintaxis de Jasmine para agregar la nueva prueba aquí.

164
00:12:01,755 --> 00:12:06,980
Por lo tanto, lo diré y luego dar una descripción para esta prueba.

165
00:12:06,980 --> 00:12:13,510
Dirá que debe navegar a aproximadamente

166
00:12:13,510 --> 00:12:22,645
nosotros página haciendo clic en el enlace.

167
00:12:22,645 --> 00:12:25,705
Ahora, si miras hacia atrás en tu aplicación Angular,

168
00:12:25,705 --> 00:12:28,530
notarías que dentro de tu aplicación Angular,

169
00:12:28,530 --> 00:12:36,735
tienes los enlaces de navegación en la parte superior de la página.

170
00:12:36,735 --> 00:12:40,680
Así que, lo que vamos a hacer en esta prueba es automáticamente

171
00:12:40,680 --> 00:12:45,500
ir y acceder a uno de esos enlaces de navegación y hacer clic en ellos.

172
00:12:45,500 --> 00:12:49,545
Ahora, por supuesto, como esperas, esto se va a hacer programáticamente,

173
00:12:49,545 --> 00:12:54,320
en lugar de hacer clic manualmente en el enlace.

174
00:12:54,320 --> 00:12:55,630
Entonces, para hacer eso,

175
00:12:55,630 --> 00:13:05,325
lo que voy a hacer es navegar a la raíz de mi aplicación Angular y luego,

176
00:13:05,325 --> 00:13:08,490
voy a acceder

177
00:13:15,040 --> 00:13:23,430
los enlaces en mi barra de navegación en la parte superior.

178
00:13:23,430 --> 00:13:27,850
Al decir page, getAllElements y

179
00:13:27,850 --> 00:13:32,815
obtendré todos los elementos que tienen la etiqueta a allí.

180
00:13:32,815 --> 00:13:40,994
Ahora, obviamente, tendrá muchas de esas etiquetas en nuestra página, pero los cuatro primeros,

181
00:13:40,994 --> 00:13:44,950
son los cuatro enlaces en

182
00:13:44,950 --> 00:13:52,100
la barra de navegación en la parte superior de nuestra página allí en el componente de encabezado.

183
00:13:52,100 --> 00:13:54,420
Entonces, al obtener acceso a esos

184
00:13:54,420 --> 00:14:00,710
, una nota ahora que estoy usando get todos los elementos, así que voy a obtener una serie de elementos.

185
00:14:00,710 --> 00:14:01,770
En este caso particular,

186
00:14:01,770 --> 00:14:07,850
resulta ser alrededor de 16 etiquetas diferentes que usarán en esa página allí.

187
00:14:07,850 --> 00:14:10,640
Por lo tanto, voy a ir y seleccionar.

188
00:14:10,640 --> 00:14:15,800
Entonces, aquí es donde uso este método llamado get y luego puedo especificar

189
00:14:15,800 --> 00:14:20,490
un índice para el elemento específico que quiero.

190
00:14:20,490 --> 00:14:26,460
Por lo tanto, he comprobado si miras el archivo de plantilla de componentes de encabezado,

191
00:14:26,460 --> 00:14:30,840
notarás que en el segundo que una etiqueta en

192
00:14:30,840 --> 00:14:38,950
la página HTML del componente de encabezado se refiere al enlace sobre nosotros allí.

193
00:14:38,950 --> 00:14:42,905
Entonces, eso es a lo que estoy accediendo diciendo get one.

194
00:14:42,905 --> 00:14:46,410
Zero, por supuesto, se refiere al enlace de inicio en

195
00:14:46,410 --> 00:14:51,155
el componente de encabezado donde creamos nuestra barra de herramientas en la parte superior allí.

196
00:14:51,155 --> 00:14:55,745
Entonces, obtengo acceso al segundo, así que este es el enlace sobre allí.

197
00:14:55,745 --> 00:14:59,100
Ahora, una vez que se hace con este enlace,

198
00:14:59,100 --> 00:15:03,030
hay un método que el transportador soporta

199
00:15:03,030 --> 00:15:08,045
en un elemento con un enlace llamado el clic.

200
00:15:08,045 --> 00:15:11,335
Entonces, esto, como puede ver programáticamente,

201
00:15:11,335 --> 00:15:17,160
hace un clic en ese elemento en particular en la ventana de mi navegador allí.

202
00:15:17,160 --> 00:15:21,840
Así que, programáticamente, estamos llevando a cabo lo que normalmente realizarías

203
00:15:21,840 --> 00:15:27,160
manualmente yendo físicamente a ese enlace y haciendo clic en él usando el ratón.

204
00:15:27,160 --> 00:15:29,790
Ahora, una vez que hacemos clic en el enlace, obviamente,

205
00:15:29,790 --> 00:15:33,400
vas a navegar a la página Acerca de nosotros.

206
00:15:33,400 --> 00:15:35,020
Ahora, dentro de la página Acerca de nosotros,

207
00:15:35,020 --> 00:15:37,780
si vas a mirar la plantilla de la página Acerca de nosotros,

208
00:15:37,780 --> 00:15:45,105
encontrarás que hay un elemento h3 que contiene el nombre de esa página.

209
00:15:45,105 --> 00:15:46,810
Dentro de ese elemento h3,

210
00:15:46,810 --> 00:15:51,640
verá un texto llamado Acerca del espacio Nosotros allí.

211
00:15:51,640 --> 00:15:53,990
Entonces, eso es lo que voy a comprobar ahora.

212
00:15:53,990 --> 00:15:58,440
La razón por la que voy a verificar eso es para asegurarme de haber navegado realmente a

213
00:15:58,440 --> 00:16:04,200
la página Acerca de nosotros haciendo estos pasos en mi aplicación Angular.

214
00:16:04,200 --> 00:16:07,685
Por lo tanto, aquí es donde usaré la espera.

215
00:16:07,685 --> 00:16:14,375
Ya hemos visto el uso de esperar y esperar página.

216
00:16:14,375 --> 00:16:18,990
getParagraphText y voy a obtener el texto del párrafo de

217
00:16:18,990 --> 00:16:25,365
h3 y esto espero toBe.

218
00:16:25,365 --> 00:16:33,430
Observe el uso de la sintaxis de Jasmine aquí y esto debería ser Acerca de nosotros.

219
00:16:34,460 --> 00:16:42,895
Así que, introduciendo esta segunda prueba en nuestro archivo de prueba aquí,

220
00:16:42,895 --> 00:16:48,950
vamos a guardar los cambios que hemos hecho y luego ir y ejecutar esta prueba.

221
00:16:49,510 --> 00:16:52,915
Va a la terminal.

222
00:16:52,915 --> 00:16:57,680
Una vez más, déjame ejecutar la prueba diciendo ng e2e

223
00:16:57,680 --> 00:17:03,220
y notarás que esto volverá a pasar por el mismo conjunto de pasos,

224
00:17:03,220 --> 00:17:09,880
y luego llevar a cabo ambas pruebas que ahora tengo en el archivo de prueba.

225
00:17:09,880 --> 00:17:15,110
Es interesante ver la prueba que se está llevando a cabo en el navegador.

226
00:17:15,110 --> 00:17:17,390
Por lo tanto, ves que estamos en la Página de inicio,

227
00:17:17,390 --> 00:17:22,595
ahora navega a la Página Acerca de y luego el éxito.

228
00:17:22,595 --> 00:17:25,840
Por lo tanto, hemos navegado con éxito desde

229
00:17:25,840 --> 00:17:29,290
la Página de inicio a la página Acerca y luego hemos verificado que has

230
00:17:29,290 --> 00:17:31,450
navegado a la página Acerca de realizando

231
00:17:31,450 --> 00:17:34,250
la prueba específica donde verificamos para asegurarnos de que

232
00:17:34,250 --> 00:17:39,515
el Acerca de nosotros está en una etiqueta h3 dentro de la página Acerca de nosotros allí.

233
00:17:39,515 --> 00:17:43,270
Así que, esta es una prueba más de extremo a extremo que podemos llevar a cabo,

234
00:17:43,270 --> 00:17:46,320
y realmente vieron que la prueba se estaba llevando a cabo justo delante

235
00:17:46,320 --> 00:17:49,855
de sus ojos sin su intervención manual.

236
00:17:49,855 --> 00:17:53,840
Espero que estés disfrutando llevando a cabo estas pruebas de extremo a extremo.

237
00:17:53,840 --> 00:17:55,725
Vamos a ser un poco más ambiciosos.

238
00:17:55,725 --> 00:18:00,280
Ahora, lo que vamos a hacer es navegar a un plato en particular,

239
00:18:00,280 --> 00:18:04,615
y luego tratar de insertar un comentario en ese plato.

240
00:18:04,615 --> 00:18:09,155
Ahora, aquí es donde voy a tomar la ayuda del soporte de Transportador,

241
00:18:09,155 --> 00:18:13,020
y me verán usando algunos métodos más de

242
00:18:13,020 --> 00:18:17,675
Transportador con el fin de navegar a la página del plato,

243
00:18:17,675 --> 00:18:23,570
vamos a navegar al primer plato en nuestro menú usando

244
00:18:23,570 --> 00:18:30,185
el enlace a la página de detalles del plato con el parámetro de ese plato en particular,

245
00:18:30,185 --> 00:18:31,995
la identificación del plato en particular.

246
00:18:31,995 --> 00:18:39,385
A continuación, identificaremos los elementos de entrada del formulario,

247
00:18:39,385 --> 00:18:42,990
y luego teclearemos automáticamente la información en

248
00:18:42,990 --> 00:18:47,425
esos elementos de entrada y luego tratar de enviar el formulario y ver qué sucede.

249
00:18:47,425 --> 00:18:49,975
Así que, para llevar a cabo esta prueba, de nuevo,

250
00:18:49,975 --> 00:18:52,830
entra y usando la sintaxis de Jasmine,

251
00:18:52,830 --> 00:18:59,595
voy a introducir una aquí y luego voy a identificar lo que esta prueba está tratando de hacer.

252
00:18:59,595 --> 00:19:07,904
Yo diría, «Debería introducir un nuevo comentario para el primer plato

253
00:19:07,904 --> 00:19:15,470
» y la función de flecha

254
00:19:15,470 --> 00:19:20,450
y ves que dentro de esta función de flecha,

255
00:19:20,450 --> 00:19:27,985
vamos a hacer nuestra primera página NavigateTo,

256
00:19:27,985 --> 00:19:35,660
vamos a navegar hasta el dishdetail cero.

257
00:19:35,660 --> 00:19:39,235
Por lo tanto, este es el primer plato en nuestro menú.

258
00:19:39,235 --> 00:19:43,060
Ahora, una vez que navegemos a la página dishdetail, diremos,

259
00:19:43,060 --> 00:19:52,030
«dejar que newAuthor sea igual a la página getElement».

260
00:19:52,030 --> 00:19:56,860
Así que vamos a encontrar ese elemento que es

261
00:19:56,860 --> 00:20:03,990
entrada y escriba texto aquí,

262
00:20:03,990 --> 00:20:10,010
así que esto me ayudará a identificar ese elemento de entrada donde el nombre del autor es

263
00:20:10,010 --> 00:20:17,115
escrito en la forma que hemos creado en nuestra página dishdetail.

264
00:20:17,115 --> 00:20:19,885
Si tienes curiosidad,

265
00:20:19,885 --> 00:20:21,380
ve y echa un vistazo a esa forma,

266
00:20:21,380 --> 00:20:23,645
y entonces verás que hay de hecho

267
00:20:23,645 --> 00:20:27,730
ese elemento de entrada en esa página de detalles.

268
00:20:27,730 --> 00:20:33,700
Entonces, accediendo a eso, voy a escribir el nombre del autor

269
00:20:33,700 --> 00:20:39,890
en ese campo de entrada allí.

270
00:20:39,890 --> 00:20:47,590
Entonces, aquí es donde el método de SendKeys que es apoyado en nuestro elemento viene en nuestra ayuda,

271
00:20:47,590 --> 00:20:50,170
el método de SendKeys apoyado por Transportador.

272
00:20:50,170 --> 00:20:56,805
Así que aquí, voy a escribir el nombre del autor como autor de la prueba.

273
00:20:56,805 --> 00:21:01,750
Entonces, al final de estos dos pasos,

274
00:21:01,750 --> 00:21:07,105
el autor de la prueba debe escribirse en el elemento de entrada en mi formulario.

275
00:21:07,105 --> 00:21:11,475
Ahora, además, también necesito escribir el comentario para ese formulario.

276
00:21:11,475 --> 00:21:14,660
También podemos configurar el valor de calificación,

277
00:21:14,660 --> 00:21:16,770
pero no voy a hacer eso en esta prueba en particular,

278
00:21:16,770 --> 00:21:21,530
solo voy a escribir el valor del comentario usando un enfoque similar.

279
00:21:21,530 --> 00:21:26,250
Entonces, diré, «let newComment»,

280
00:21:26,250 --> 00:21:29,650
nuevamente, obtendrá la página,

281
00:21:29,660 --> 00:21:34,690
getElement, y luego aquí es donde busco

282
00:21:34,690 --> 00:21:42,080
el área de texto y newComment,

283
00:21:43,170 --> 00:21:52,340
SendKeys y escriba «Test Comment».

284
00:21:52,650 --> 00:21:59,990
Por lo tanto, esto rellenará las palabras Test Comment en el área de texto

285
00:21:59,990 --> 00:22:02,380
que contiene los comentarios que

286
00:22:02,380 --> 00:22:07,130
el autor debe enviar para ese plato en particular.

287
00:22:07,130 --> 00:22:12,530
Después de esto, encontraremos el SubmitButton.

288
00:22:12,990 --> 00:22:15,430
Así que para hacer eso, diremos

289
00:22:15,430 --> 00:22:33,050
page.getElement tipo de botón submit,

290
00:22:33,570 --> 00:22:44,390
y luego una vez que tengamos el botón simplemente decimos, newSubmitButton.click.

291
00:22:44,390 --> 00:22:46,330
Así que, una vez que hacemos clic en el botón,

292
00:22:46,330 --> 00:22:48,610
el comentario lo volverá a enviar.

293
00:22:48,610 --> 00:22:55,930
Ahora, voy a usar otro método que admite Transportador.

294
00:22:55,930 --> 00:23:00,200
Voy a pausar la prueba en ese momento.

295
00:23:00,200 --> 00:23:06,170
Esto me permitirá pasar la prueba y luego llevar a cabo la prueba o la planta,

296
00:23:06,170 --> 00:23:09,160
así que esto dice, el navegador no está definido,

297
00:23:09,160 --> 00:23:14,210
así que necesito volver aquí y luego importar

298
00:23:18,930 --> 00:23:32,155
navegador de la biblioteca de Transportador allí,

299
00:23:32,155 --> 00:23:35,840
y luego ves que la línea roja Squiggly ha desaparecido,

300
00:23:35,840 --> 00:23:39,175
así que mi prueba debería todos se configuran correctamente allí.

301
00:23:39,175 --> 00:23:40,935
Así que, déjame guardar los cambios,

302
00:23:40,935 --> 00:23:44,320
vamos a ir y ejecutar esta tercera prueba también,

303
00:23:44,320 --> 00:23:48,505
junto con las dos pruebas restantes que ya hemos introducido.

304
00:23:48,505 --> 00:23:54,375
Ir al navegador, déjame volver a ejecutar la prueba de extremo a extremo,

305
00:23:54,375 --> 00:23:57,765
cuando se abre el navegador, ahí vamos,

306
00:23:57,765 --> 00:24:02,810
la primera prueba se ha llevado a cabo y que debería tener éxito,

307
00:24:02,810 --> 00:24:08,780
la segunda prueba se ha llevado a cabo y la tercera prueba donde navegamos detalle plato,

308
00:24:08,780 --> 00:24:18,145
y ves que el comentario de la prueba fue enviado correctamente por nuestra prueba.

309
00:24:18,145 --> 00:24:21,195
Así que, con esto, completamos este ejercicio.

310
00:24:21,195 --> 00:24:27,730
En este ejercicio, usted ha llevado a cabo tres pruebas diferentes utilizando el soporte de

311
00:24:27,730 --> 00:24:35,430
Transportador y ha descubierto que nuestra aplicación supera todas estas tres pruebas de extremo a extremo.

312
00:24:35,430 --> 00:24:39,075
Este es un buen momento para que guarde los cambios en

313
00:24:39,075 --> 00:24:46,420
su repositorio de Git usando la prueba de extremo a extremo del mensaje.