1
00:00:00,000 --> 00:00:07,245
Ora, che abbiamo una rapida comprensione dei

2
00:00:07,245 --> 00:00:10,140
test end-to-end e del ruolo che i

3
00:00:10,140 --> 00:00:15,555
test end-to-end svolgono nella strategia complessiva per il test di applicazioni angolari.

4
00:00:15,555 --> 00:00:18,929
Inoltre, una breve introduzione al goniometro.

5
00:00:18,929 --> 00:00:22,835
Procediamo con il prossimo esercizio in cui potremmo impiegare il

6
00:00:22,835 --> 00:00:26,825
goniometro e progettare i nostri test end-to-end.

7
00:00:26,825 --> 00:00:30,960
È una fortuna che la CLI angolare

8
00:00:30,960 --> 00:00:35,050
imposta automaticamente tutto ciò di cui abbiamo bisogno per condurre test end-to-end,

9
00:00:35,050 --> 00:00:37,935
come vedremo quando procederemo con l'esercizio.

10
00:00:37,935 --> 00:00:43,430
Quindi, si tratta di attuare i vari test e

11
00:00:43,430 --> 00:00:50,035
quindi di eseguire il test utilizzando il goniometro in questo esercizio.

12
00:00:50,035 --> 00:00:53,865
Andando alla nostra applicazione angolare in Visual Studio,

13
00:00:53,865 --> 00:00:56,305
se guardi il pacchetto del nostro file JSON,

14
00:00:56,305 --> 00:00:59,965
vedrai che già troviamo

15
00:00:59,965 --> 00:01:05,640
la CLI angolare ha impostato tutto ciò di cui abbiamo bisogno per eseguire i test end-to-end.

16
00:01:05,640 --> 00:01:07,295
Quindi, mentre scorri verso il basso,

17
00:01:07,295 --> 00:01:10,550
vedrai che il goniometro è già stato installato sul

18
00:01:10,550 --> 00:01:16,110
nostro computer all'interno del progetto angolare.

19
00:01:16,110 --> 00:01:23,420
Inoltre, notiamo che c'è una cartella separata qui

20
00:01:23,420 --> 00:01:26,780
chiamata e2e che contiene alcuni file

21
00:01:26,780 --> 00:01:30,350
che sono stati configurati già per eseguire test end-to-end.

22
00:01:30,350 --> 00:01:33,890
Ora, se è necessario eseguire test end-to-end estesi,

23
00:01:33,890 --> 00:01:36,620
allora è una buona idea creare

24
00:01:36,620 --> 00:01:41,985
un file separato per ogni set di test end-to-end che si desidera eseguire.

25
00:01:41,985 --> 00:01:43,785
Ora, in questo particolare esercizio,

26
00:01:43,785 --> 00:01:47,090
vi sto solo illustrando come eseguire test end-to-end.

27
00:01:47,090 --> 00:01:51,670
Quindi, ho intenzione di attenersi a ciò che è già stato impostato dalla CLI angolare.

28
00:01:51,670 --> 00:01:55,710
Lavoreremo con i file che abbiamo a disposizione proprio lì.

29
00:01:55,710 --> 00:02:01,405
Quindi, diamo una rapida occhiata a questi due file qui, l'app.e2e-spec.ts,

30
00:02:01,405 --> 00:02:09,070
e vedrete che qualche codice è già stato impalcato in questo file da angolare.

31
00:02:09,070 --> 00:02:14,035
Inoltre, questo altro file chiamato app.po.ts,

32
00:02:14,035 --> 00:02:17,780
questo non è altro che una classe JavaScript standard

33
00:02:17,780 --> 00:02:21,170
che è stata impostata con alcuni metodi qui.

34
00:02:21,170 --> 00:02:24,380
Ora, quello che stiamo per fare è aggiungere alcuni metodi in più a

35
00:02:24,380 --> 00:02:31,375
questa classe JavaScript e anche aggiornare alcuni di questi metodi che sono dati qui.

36
00:02:31,375 --> 00:02:40,095
Imposteremo i nostri test nel file app.e2e-spec.ts.

37
00:02:40,095 --> 00:02:41,860
Quindi, per procedere avanti,

38
00:02:41,860 --> 00:02:44,875
andiamo all'app.

39
00:02:44,875 --> 00:02:49,890
PO.ts, e quindi all'interno di questo file, aggiorniamo questo.

40
00:02:49,890 --> 00:02:55,140
Quindi, qui, vedete che abbiamo due metodi che sono già stati impostati qui.

41
00:02:55,140 --> 00:03:01,160
Ho intenzione di aggiornare questi metodi per consentire loro di prendere un parametro qui.

42
00:03:01,160 --> 00:03:05,250
Quindi, dirò, NavigateTo con un link,

43
00:03:05,250 --> 00:03:06,760
che viene fornito come una stringa,

44
00:03:06,760 --> 00:03:10,970
e poi ho intenzione di aggiornare questo browser per

45
00:03:10,970 --> 00:03:15,615
utilizzare il link che è il parametro per questo metodo.

46
00:03:15,615 --> 00:03:17,090
Allora, cosa fa questo?

47
00:03:17,090 --> 00:03:18,330
Quindi, come puoi vedere,

48
00:03:18,330 --> 00:03:22,490
stiamo facendo uso della sintassi del goniometro qui.

49
00:03:22,490 --> 00:03:26,450
Quindi, questo dice che il browser restituisce il link.

50
00:03:26,450 --> 00:03:32,075
Quindi, questa particolare chiamata a questo metodo get del browser consentirà

51
00:03:32,075 --> 00:03:41,440
alla nostra applicazione di navigare a questo particolare link che viene fornito come parametro qui.

52
00:03:41,440 --> 00:03:43,650
Quindi, prima di questo aggiornamento,

53
00:03:43,650 --> 00:03:47,200
hai visto che il link fornito qui era barra, il

54
00:03:47,200 --> 00:03:50,595
che significa che la radice della nostra applicazione angolare.

55
00:03:50,595 --> 00:03:54,650
Ora, ho aggiornato questo per prendere un parametro qui.

56
00:03:54,650 --> 00:04:00,490
Allo stesso modo, il secondo metodo visualizzato è chiamato getParagraphText.

57
00:04:00,490 --> 00:04:08,685
Ora, questo metodo viene utilizzato per ottenere il contenuto interno di un elemento HTML qui.

58
00:04:08,685 --> 00:04:11,680
Quindi, per questo, anche,

59
00:04:11,680 --> 00:04:14,770
imposterò un parametro chiamato selettore,

60
00:04:14,770 --> 00:04:20,260
che è un selettore CSS che fornirò qui.

61
00:04:20,260 --> 00:04:22,430
Quindi, vedi che qui dentro,

62
00:04:22,430 --> 00:04:28,775
cambierò questo per prendere il selettore come parametro.

63
00:04:28,775 --> 00:04:32,885
Ora, dalla precedente esperienza con il test unitario,

64
00:04:32,885 --> 00:04:37,285
si vede cosa sta per and.css.

65
00:04:37,285 --> 00:04:40,130
Questa è la stessa cosa che stiamo usando anche qui.

66
00:04:40,130 --> 00:04:47,820
Questo per metodo qui utilizzato è ora importato dalla libreria del goniometro qui.

67
00:04:47,820 --> 00:04:52,610
Anche il metodo elemento viene importato dalla libreria goniometro.

68
00:04:52,610 --> 00:04:56,915
Quindi, questo metodo elemento consente di ottenere l'accesso a un elemento HTML

69
00:04:56,915 --> 00:05:02,510
fornendo tale selezione per l'elemento HTML come parametro qui.

70
00:05:02,510 --> 00:05:05,760
Quindi, puoi dire da css, byID

71
00:05:05,760 --> 00:05:11,855
e molti altri metodi di questo tipo disponibili per la classe per qui.

72
00:05:11,855 --> 00:05:13,935
Quindi, il metodo getText,

73
00:05:13,935 --> 00:05:19,580
ottiene come vediamo il testo interno visibile di questo particolare elemento.

74
00:05:19,580 --> 00:05:22,985
Quindi, questo è un modo per recuperare informazioni dal

75
00:05:22,985 --> 00:05:28,520
particolare elemento HTML all'interno della nostra finestra del browser,

76
00:05:28,520 --> 00:05:33,780
e quindi verificare se corrisponde a un modello che stiamo specificando qui.

77
00:05:33,780 --> 00:05:37,035
Quindi, con questo aggiornamento per app.po.ts,

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

79
00:05:43,060 --> 00:05:44,755
Quindi, all'interno di questo file,

80
00:05:44,755 --> 00:05:48,630
noterai che stiamo usando la sintassi Jasmine.

81
00:05:48,630 --> 00:05:54,730
Quindi, qui, mi vedi usando descrivi e poi che dice let page AppPage.

82
00:05:54,730 --> 00:06:01,725
Quindi, qui, la pagina è dove stiamo creando questa nuova classe chiamata AppPage,

83
00:06:01,725 --> 00:06:08,330
che abbiamo dichiarato nel file app.po.ts come una classe JavaScript qui.

84
00:06:08,330 --> 00:06:13,540
Ora, questo è solo un modo conveniente per impostare tutte le cose in una posizione,

85
00:06:13,540 --> 00:06:18,950
e quindi essere in grado di farne uso nel mio codice di test stesso.

86
00:06:18,950 --> 00:06:24,445
Quindi, qui, sto dichiarando la pagina per fare riferimento a questa AppPage,

87
00:06:24,445 --> 00:06:26,809
e in modo che mi consenta di accedere

88
00:06:26,809 --> 00:06:30,230
ai metodi che ho costruito in quella classe qui.

89
00:06:30,230 --> 00:06:37,680
Quindi, il primo test che ho intenzione di fare è navigare alla

90
00:06:37,680 --> 00:06:42,140
radice della mia applicazione angolare

91
00:06:42,140 --> 00:06:46,440
e quindi controllare per vedere se c'è un modello specifico in questo.

92
00:06:46,440 --> 00:06:51,375
Noterai che nella mia homepage

93
00:06:51,375 --> 00:06:56,170
avrai la stringa

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

95
00:07:03,550 --> 00:07:06,480
all'interno di un elemento H1 nella mia pagina.

96
00:07:06,480 --> 00:07:14,370
Quindi, quello che ho intenzione di fare è navigare alla radice del mio elemento HTML.

97
00:07:14,370 --> 00:07:18,340
Quindi, lì dentro, andrò a cercare

98
00:07:18,340 --> 00:07:23,955
il percorso dell'app e poi cercherò il tag H1 all'interno del percorso dell'app.

99
00:07:23,955 --> 00:07:28,210
Quindi, questo dovrebbe essere uguale a questa particolare stringa qui.

100
00:07:28,210 --> 00:07:29,620
Quindi, ho intenzione di copiare

101
00:07:29,620 --> 00:07:34,530
la stringa Ristorante Con Fusion lì e poi fornirla come parametro qui.

102
00:07:34,530 --> 00:07:37,000
Quindi, sto solo aggiornando il test per verificare

103
00:07:37,000 --> 00:07:41,585
esattamente ciò che abbiamo all'interno della nostra applicazione angolare aggiornata.

104
00:07:41,585 --> 00:07:43,200
Quindi, con questa configurazione,

105
00:07:43,200 --> 00:07:48,860
ora eseguirò il mio primo test della mia applicazione angolare.

106
00:07:48,860 --> 00:07:55,454
Quindi, salviamo tutte le modifiche e poi torniamo al nostro terminale.

107
00:07:55,454 --> 00:08:00,715
All' interno del terminale, nella mia cartella del progetto,

108
00:08:00,715 --> 00:08:05,965
al prompt digiterò ng e2e.

109
00:08:05,965 --> 00:08:11,010
Noterai che questo avvierà un browser.

110
00:08:11,010 --> 00:08:19,445
Nel mio caso, avvierà una finestra di Chrome e quindi eseguirà il test in quella finestra.

111
00:08:19,445 --> 00:08:21,710
Quindi, eseguiamo il primo test.

112
00:08:21,710 --> 00:08:27,100
Vedrai che quando il test viene eseguito dopo aver compilato la mia applicazione angolare,

113
00:08:27,100 --> 00:08:28,705
quando il test viene eseguito,

114
00:08:28,705 --> 00:08:33,725
assicurerà che il test abbia successo.

115
00:08:33,725 --> 00:08:36,295
Vedete che nella parte posteriore, il

116
00:08:36,295 --> 00:08:42,055
mio browser è aperto dal ng e2e,

117
00:08:42,055 --> 00:08:46,880
e quindi il test è stato eseguito in quella finestra del browser.

118
00:08:46,880 --> 00:08:52,025
Dice che il test è stato eseguito con successo qui.

119
00:08:52,025 --> 00:08:54,390
Quindi, noti che anche in questo caso,

120
00:08:54,390 --> 00:08:56,485
deve avviare il browser,

121
00:08:56,485 --> 00:08:59,310
caricare la mia applicazione angolare nel browser,

122
00:08:59,310 --> 00:09:02,370
l'intera applicazione angolare nel browser.

123
00:09:02,370 --> 00:09:07,210
Quindi, esegui il test dalla mia applicazione angolare.

124
00:09:07,210 --> 00:09:12,595
A questo punto, assicurati che il tuo server,

125
00:09:12,595 --> 00:09:15,025
il server JSON sia attivo e funzionante

126
00:09:15,025 --> 00:09:16,510
, altrimenti, il test fallirà,

127
00:09:16,510 --> 00:09:18,915
perché quando il test è stato eseguito,

128
00:09:18,915 --> 00:09:22,140
proverà ad accedere anche al server JSON.

129
00:09:22,140 --> 00:09:25,300
Quindi, questo è qualcosa che devi assicurarti.

130
00:09:25,300 --> 00:09:28,035
Continuando con i nostri test.

131
00:09:28,035 --> 00:09:29,915
Nel secondo passaggio,

132
00:09:29,915 --> 00:09:35,290
ci accingiamo ad aggiungere un paio di altri metodi in questa AppPage.

133
00:09:35,290 --> 00:09:41,330
Classe qui. Quindi, userei un nuovo metodo

134
00:09:41,330 --> 00:09:50,730
chiamato getElement e quindi prenderò un parametro di un selettore.

135
00:09:51,160 --> 00:09:58,520
Questo metodo mi consente di ottenere l'accesso all'elemento,

136
00:09:58,520 --> 00:10:04,500
che viene selezionato utilizzando lo stesso dal selettore CSS.

137
00:10:04,500 --> 00:10:06,545
Quindi, ho intenzione di copiare questo.

138
00:10:06,545 --> 00:10:09,785
Quindi, in questo caso, invece di ottenere solo il testo,

139
00:10:09,785 --> 00:10:13,750
restituirà effettivamente il riferimento all'elemento stesso,

140
00:10:13,750 --> 00:10:17,290
e quindi in modo da poter aggiungere ulteriori modi per

141
00:10:17,290 --> 00:10:20,910
accedere alle informazioni all'interno di quell'elemento come richiesto.

142
00:10:20,910 --> 00:10:25,340
In questo caso, il get-text viene utilizzato solo per recuperare il testo specifico.

143
00:10:25,340 --> 00:10:28,470
Potremmo usare altri metodi su

144
00:10:28,470 --> 00:10:31,520
questo elemento per recuperare informazioni aggiuntive da tali elementi.

145
00:10:31,520 --> 00:10:37,220
Quindi, questo è il motivo per cui sto creando questo metodo qui.

146
00:10:37,220 --> 00:10:45,595
Allo stesso modo, implementerò un altro metodo chiamato get tutti gli elementi.

147
00:10:45,595 --> 00:10:52,040
Ora, questo utilizza anche un parametro chiamato selettore proprio come prima.

148
00:10:52,040 --> 00:10:56,115
Ciò che fa il metodo getAll è selezionare

149
00:10:56,115 --> 00:11:01,910
tutti gli elementi e quindi restituirli al collare, in

150
00:11:01,910 --> 00:11:03,720
modo che, ad esempio,

151
00:11:03,720 --> 00:11:08,310
se la tua pagina contiene molti elementi h1 in

152
00:11:08,310 --> 00:11:12,990
riferimento a tutti loro verranno restituiti al mio collare.

153
00:11:12,990 --> 00:11:16,790
Quindi, che lì, posso quindi decidere di effettuare

154
00:11:16,790 --> 00:11:20,940
una chiamata a uno specifico all'interno di questo elenco di elementi.

155
00:11:20,940 --> 00:11:22,505
Quindi, per fare questo,

156
00:11:22,505 --> 00:11:25,525
useremo lo stesso ritorno ma qui,

157
00:11:25,525 --> 00:11:28,395
invece di dire selettore di elementi,

158
00:11:28,395 --> 00:11:33,165
fammi solo copiare e poi abbiamo un altro metodo chiamato

159
00:11:33,165 --> 00:11:37,340
element.all che ci permette di

160
00:11:37,340 --> 00:11:41,750
accedere a tutti gli elementi che corrispondono a questo particolare selettore.

161
00:11:41,750 --> 00:11:45,790
Il primo restituirà il primo elemento che corrisponde a quel selettore.

162
00:11:45,790 --> 00:11:55,805
Dopo questi aggiornamenti, passeremo ora al nostro file di test e aggiungeremo un nuovo test qui.

163
00:11:55,805 --> 00:12:01,755
Quindi, qui di nuovo, sto usando la sintassi Jasmine per aggiungere il nuovo test qui.

164
00:12:01,755 --> 00:12:06,980
Quindi, lo dirò e poi darò una descrizione per questo test.

165
00:12:06,980 --> 00:12:13,510
Dirà Si dovrebbe navigare a su di

166
00:12:13,510 --> 00:12:22,645
noi pagina cliccando sul link.

167
00:12:22,645 --> 00:12:25,705
Ora, se guardi indietro alla tua applicazione Angular,

168
00:12:25,705 --> 00:12:28,530
noterai che all'interno della tua applicazione Angular,

169
00:12:28,530 --> 00:12:36,735
hai i collegamenti di navigazione nella parte superiore della pagina.

170
00:12:36,735 --> 00:12:40,680
Quindi, quello che faremo in questo test è quello di

171
00:12:40,680 --> 00:12:45,500
andare automaticamente e accedere a uno di quei collegamenti di navigazione e fare clic su di essi.

172
00:12:45,500 --> 00:12:49,545
Ora, naturalmente, come ci si aspetta che questo verrà fatto a livello di programmazione,

173
00:12:49,545 --> 00:12:54,320
piuttosto che facendo clic manualmente sul link.

174
00:12:54,320 --> 00:12:55,630
Quindi, per farlo,

175
00:12:55,630 --> 00:13:05,325
quello che farò è navigare alla radice della mia applicazione Angular e quindi,

176
00:13:05,325 --> 00:13:08,490
accederò ai

177
00:13:15,040 --> 00:13:23,430
collegamenti nella mia barra di navigazione in alto.

178
00:13:23,430 --> 00:13:27,850
Dicendo pagina, getAllelements e

179
00:13:27,850 --> 00:13:32,815
poi otterrò tutti gli elementi che hanno il tag a lì dentro.

180
00:13:32,815 --> 00:13:40,994
Ora, ovviamente, avrete molti di quelli a tag nella nostra pagina, ma i primi quattro,

181
00:13:40,994 --> 00:13:44,950
sono i quattro link

182
00:13:44,950 --> 00:13:52,100
nella barra di navigazione nella parte superiore della nostra pagina lì nel componente intestazione.

183
00:13:52,100 --> 00:13:54,420
Quindi, ottenendo l'accesso a quelli

184
00:13:54,420 --> 00:14:00,710
una nota ora che sto usando ottenere tutti gli elementi, quindi ho intenzione di ottenere un numero di elementi.

185
00:14:00,710 --> 00:14:01,770
In questo caso particolare,

186
00:14:01,770 --> 00:14:07,850
risulta essere circa 16 diversi tag che indosseranno in quella pagina lì.

187
00:14:07,850 --> 00:14:10,640
Quindi, vado a selezionare.

188
00:14:10,640 --> 00:14:15,800
Quindi, questo è dove utilizzo questo metodo chiamato get e quindi posso specificare

189
00:14:15,800 --> 00:14:20,490
un indice per l'elemento specifico che voglio.

190
00:14:20,490 --> 00:14:26,460
Quindi, ho controllato se guardi il file del modello dei componenti dell'intestazione,

191
00:14:26,460 --> 00:14:30,840
noterai che nel secondo un tag nella

192
00:14:30,840 --> 00:14:38,950
pagina HTML del componente di intestazione si riferisce al link su di noi lì.

193
00:14:38,950 --> 00:14:42,905
Quindi, questo è ciò a cui ho accesso dicendo prendine uno.

194
00:14:42,905 --> 00:14:46,410
Zero, ovviamente, si riferisce al link home

195
00:14:46,410 --> 00:14:51,155
nel componente header in cui abbiamo creato la nostra barra degli strumenti in alto lì.

196
00:14:51,155 --> 00:14:55,745
Quindi, ottengo l'accesso al secondo quindi questo è il link su lì.

197
00:14:55,745 --> 00:14:59,100
Ora, una volta ottenuto questo link,

198
00:14:59,100 --> 00:15:03,030
c'è un metodo che il goniometro supporta

199
00:15:03,030 --> 00:15:08,045
su un elemento con un link lì chiamato click.

200
00:15:08,045 --> 00:15:11,335
Quindi, questo, come vedi a livello di codice,

201
00:15:11,335 --> 00:15:17,160
provoca un clic su quel particolare elemento nella finestra del mio browser lì.

202
00:15:17,160 --> 00:15:21,840
Quindi, a livello di programmazione, stiamo eseguendo ciò che normalmente eseguiresti

203
00:15:21,840 --> 00:15:27,160
manualmente andando fisicamente a quel link e facendo clic su di esso usando il mouse.

204
00:15:27,160 --> 00:15:29,790
Ora, una volta cliccato sul link, ovviamente,

205
00:15:29,790 --> 00:15:33,400
andrai alla pagina Chi siamo.

206
00:15:33,400 --> 00:15:35,020
Ora, all'interno della pagina Chi siamo,

207
00:15:35,020 --> 00:15:37,780
se andate a guardare il modello della pagina Chi siamo,

208
00:15:37,780 --> 00:15:45,105
troverete che c'è un elemento h3 che contiene il nome di quella pagina.

209
00:15:45,105 --> 00:15:46,810
All' interno di quell'elemento h3,

210
00:15:46,810 --> 00:15:51,640
vedrai un testo chiamato About Space Us lì.

211
00:15:51,640 --> 00:15:53,990
Quindi, questo è quello che sto per controllare ora.

212
00:15:53,990 --> 00:15:58,440
Il motivo per cui ho intenzione di controllare è per assicurarmi di aver davvero navigato

213
00:15:58,440 --> 00:16:04,200
alla pagina Chi siamo facendo questi passaggi nella mia applicazione Angular.

214
00:16:04,200 --> 00:16:07,685
Quindi, questo è dove userò l'aspettativa.

215
00:16:07,685 --> 00:16:14,375
Abbiamo già visto l'uso di aspettarsi e aspettarsi pagina.

216
00:16:14,375 --> 00:16:18,990
getParagraphText e otterrò il testo del paragrafo da

217
00:16:18,990 --> 00:16:25,365
h3 e questo mi aspetto ToBe.

218
00:16:25,365 --> 00:16:33,430
Si noti l'uso della sintassi Jasmine qui e questo dovrebbe essere About Us.

219
00:16:34,460 --> 00:16:42,895
Quindi, introducendo questo secondo test nel nostro file di test qui,

220
00:16:42,895 --> 00:16:48,950
salviamo le modifiche che abbiamo fatto e poi andiamo ad eseguire questo test.

221
00:16:49,510 --> 00:16:52,915
Sto andando al terminal.

222
00:16:52,915 --> 00:16:57,680
Ancora una volta, permettimi di eseguire il test dicendo ng

223
00:16:57,680 --> 00:17:03,220
e2e e noterai che questo passerà nuovamente attraverso lo stesso insieme di passaggi,

224
00:17:03,220 --> 00:17:09,880
e quindi eseguirà entrambi i test che ora ho nel file di test.

225
00:17:09,880 --> 00:17:15,110
È interessante guardare il test eseguito nel browser.

226
00:17:15,110 --> 00:17:17,390
Così, si vede che siamo sulla Homepage,

227
00:17:17,390 --> 00:17:22,595
ora si passa alla pagina Informazioni e poi successo.

228
00:17:22,595 --> 00:17:25,840
Quindi, abbiamo navigato con successo

229
00:17:25,840 --> 00:17:29,290
dalla homepage alla pagina Informazioni e quindi abbiamo verificato che hai

230
00:17:29,290 --> 00:17:31,450
navigato alla pagina Informazioni eseguendo il

231
00:17:31,450 --> 00:17:34,250
test specifico in cui abbiamo controllato per

232
00:17:34,250 --> 00:17:39,515
assicurarci che l'About Us sia in un tag h3 all'interno della pagina Chi siamo lì.

233
00:17:39,515 --> 00:17:43,270
Quindi, questo è un altro test end-to-end che possiamo eseguire,

234
00:17:43,270 --> 00:17:46,320
e lei ha effettivamente visto che il test veniva eseguito proprio

235
00:17:46,320 --> 00:17:49,855
davanti ai suoi occhi senza il suo intervento manuale.

236
00:17:49,855 --> 00:17:53,840
Spero vi stiate divertendo a svolgere questi test end-to-end.

237
00:17:53,840 --> 00:17:55,725
Diventiamo un po' piu' ambiziosi.

238
00:17:55,725 --> 00:18:00,280
Ora, quello che faremo è navigare su un piatto particolare,

239
00:18:00,280 --> 00:18:04,615
e poi provare a inserire un commento in quel piatto.

240
00:18:04,615 --> 00:18:09,155
Ora, questo è dove ho intenzione di prendere l'aiuto del supporto Goniometro,

241
00:18:09,155 --> 00:18:13,020
e mi vedrete usare alcuni altri metodi da

242
00:18:13,020 --> 00:18:17,675
Goniometro per navigare alla pagina del piatto,

243
00:18:17,675 --> 00:18:23,570
navigheremo al primo piatto nel nostro menu utilizzando

244
00:18:23,570 --> 00:18:30,185
il link alla pagina dei dettagli del piatto con il parametro di quello piatto particolare,

245
00:18:30,185 --> 00:18:31,995
l'ID del piatto particolare.

246
00:18:31,995 --> 00:18:39,385
Quindi, identificheremo gli elementi di input del modulo,

247
00:18:39,385 --> 00:18:42,990
e quindi digiteremo automaticamente le informazioni in

248
00:18:42,990 --> 00:18:47,425
quegli elementi di input e quindi provare a inviare il modulo e vedere cosa succede.

249
00:18:47,425 --> 00:18:49,975
Quindi, per eseguire questo test, di nuovo,

250
00:18:49,975 --> 00:18:52,830
entrare e utilizzare la sintassi Jasmine,

251
00:18:52,830 --> 00:18:59,595
introdurrò un esso qui e poi identificherò ciò che questo test sta cercando di fare.

252
00:18:59,595 --> 00:19:07,904
Direi, «Dovrebbe inserire un nuovo commento per il primo

253
00:19:07,904 --> 00:19:15,470
piatto» e la funzione freccia

254
00:19:15,470 --> 00:19:20,450
e si vede che all'interno di questa funzione freccia,

255
00:19:20,450 --> 00:19:27,985
stiamo andando a fare la nostra prima pagina navigateTo,

256
00:19:27,985 --> 00:19:35,660
navigheremo al dishdetail zero.

257
00:19:35,660 --> 00:19:39,235
Quindi, questo è il primo piatto nel nostro menu.

258
00:19:39,235 --> 00:19:43,060
Ora, una volta che si naviga alla pagina dishdetail, diremo,

259
00:19:43,060 --> 00:19:52,030
«lasciare che newAuthor è uguale a pagina getElement.»

260
00:19:52,030 --> 00:19:56,860
Quindi, stiamo andando a trovare quell'elemento che è

261
00:19:56,860 --> 00:20:03,990
input e digitare il testo qui,

262
00:20:03,990 --> 00:20:10,010
quindi questo mi aiuterà a identificare quell'elemento di input in cui il nome dell'autore è

263
00:20:10,010 --> 00:20:17,115
digitato nella forma che abbiamo creato nella nostra pagina dishdetail.

264
00:20:17,115 --> 00:20:19,885
Se sei curioso,

265
00:20:19,885 --> 00:20:21,380
vai a dare un'occhiata a quel modulo,

266
00:20:21,380 --> 00:20:23,645
e poi vedrai che c'è davvero

267
00:20:23,645 --> 00:20:27,730
quell'elemento di input in quella pagina dishdetail lì.

268
00:20:27,730 --> 00:20:33,700
Quindi, accedendo a questo, ho intenzione di digitare il nome dell'autore

269
00:20:33,700 --> 00:20:39,890
in quel campo di input lì.

270
00:20:39,890 --> 00:20:47,590
Quindi, questo è dove il metodo SendKeys' supportato sul nostro elemento viene in nostro aiuto,

271
00:20:47,590 --> 00:20:50,170
il metodo SendKeys' supportato da Goniometro.

272
00:20:50,170 --> 00:20:56,805
Quindi qui, ho intenzione di digitare il nome dell'autore come autore del test.

273
00:20:56,805 --> 00:21:01,750
Quindi, alla fine di questi due passaggi,

274
00:21:01,750 --> 00:21:07,105
l'autore del test dovrebbe essere digitato nell'elemento di input nel mio modulo.

275
00:21:07,105 --> 00:21:11,475
Ora, inoltre, ho anche bisogno di digitare il commento per quel modulo.

276
00:21:11,475 --> 00:21:14,660
Possiamo anche impostare il valore di valutazione,

277
00:21:14,660 --> 00:21:16,770
ma non ho intenzione di farlo in questo particolare test,

278
00:21:16,770 --> 00:21:21,530
ho solo intenzione di digitare il valore del commento usando un approccio simile.

279
00:21:21,530 --> 00:21:26,250
Quindi, dirò, «lascia NewComment», di

280
00:21:26,250 --> 00:21:29,650
nuovo, otterrà pagina,

281
00:21:29,660 --> 00:21:34,690
getElement, e poi questo è dove cerco

282
00:21:34,690 --> 00:21:42,080
la textarea e newComment,

283
00:21:43,170 --> 00:21:52,340
sendKeys e digito «Test Comment».

284
00:21:52,650 --> 00:21:59,990
Quindi, questo riempirà le parole Test Comment nell'area di testo

285
00:21:59,990 --> 00:22:02,380
che contiene i commenti che

286
00:22:02,380 --> 00:22:07,130
l'autore dovrebbe inviare per quel particolare piatto.

287
00:22:07,130 --> 00:22:12,530
Dopo questo, troveremo il SubmitButton.

288
00:22:12,990 --> 00:22:15,430
Quindi, per fare ciò, diremo

289
00:22:15,430 --> 00:22:33,050
page.getElement tipo pulsante invia,

290
00:22:33,570 --> 00:22:44,390
e poi una volta che entriamo in possesso del pulsante diciamo solo, newSubmitButton.click.

291
00:22:44,390 --> 00:22:46,330
Quindi, una volta fatto clic sul pulsante,

292
00:22:46,330 --> 00:22:48,610
il commento lo invierà di nuovo.

293
00:22:48,610 --> 00:22:55,930
Ora, ho intenzione di utilizzare un altro metodo che Goniometro supporta.

294
00:22:55,930 --> 00:23:00,200
Ho intenzione di mettere in pausa il test a quel punto.

295
00:23:00,200 --> 00:23:06,170
Questo mi permetterà di superare il test e quindi eseguire il test o l'impianto,

296
00:23:06,170 --> 00:23:09,160
quindi questo dice, il browser non è definito,

297
00:23:09,160 --> 00:23:14,210
quindi ho bisogno di tornare qui e quindi importare il

298
00:23:18,930 --> 00:23:32,155
browser dalla libreria

299
00:23:32,155 --> 00:23:35,840
Goniometro lì, e poi vedi che la linea rossa ondulata è scomparsa,

300
00:23:35,840 --> 00:23:39,175
quindi il mio test dovrebbe tutti essere impostato correttamente lì.

301
00:23:39,175 --> 00:23:40,935
Quindi, lasciami salvare le modifiche,

302
00:23:40,935 --> 00:23:44,320
andremo ed eseguiremo anche questo terzo test,

303
00:23:44,320 --> 00:23:48,505
insieme ai restanti due test che abbiamo già inserito.

304
00:23:48,505 --> 00:23:54,375
Andando al browser, lasciami ancora eseguire il test end-to-end,

305
00:23:54,375 --> 00:23:57,765
quando il browser si apre, ci andiamo,

306
00:23:57,765 --> 00:24:02,810
il primo test è stato eseguito e che dovrebbe avere successo,

307
00:24:02,810 --> 00:24:08,780
il secondo test è stato effettuato e il terzo test in cui abbiamo navigato dettaglio piatto,

308
00:24:08,780 --> 00:24:18,145
e vedi che il commento di prova è stato inviato correttamente dal nostro test.

309
00:24:18,145 --> 00:24:21,195
Quindi, con questo, completiamo questo esercizio.

310
00:24:21,195 --> 00:24:27,730
In questo esercizio, hai eseguito tre test diversi utilizzando il supporto di

311
00:24:27,730 --> 00:24:35,430
Goniometro e hai scoperto che la nostra applicazione supera tutti questi tre test end-to-end.

312
00:24:35,430 --> 00:24:39,075
Questo è un buon momento per salvare le modifiche al

313
00:24:39,075 --> 00:24:46,420
tuo repository Git usando il test end-to-end dei messaggi.