1
00:00:00,000 --> 00:00:07,245
Jetzt haben wir ein schnelles Verständnis von

2
00:00:07,245 --> 00:00:10,140
End-to-End-Tests und welche Rolle

3
00:00:10,140 --> 00:00:15,555
End-to-End-Tests in der Gesamtstrategie zum Testen von Winkelanwendungen spielen.

4
00:00:15,555 --> 00:00:18,929
Auch eine kurze Einführung in Winkelmesser.

5
00:00:18,929 --> 00:00:22,835
Fahren wir mit der nächsten Übung fort, in der wir

6
00:00:22,835 --> 00:00:26,825
Winkelmesser einsetzen und unsere End-to-End-Tests entwerfen könnten.

7
00:00:26,825 --> 00:00:30,960
Es ist glücklich, dass die eckige CLI automatisch

8
00:00:30,960 --> 00:00:35,050
alles einrichtet, was wir für die Durchführung von End-to-End-Tests benötigen,

9
00:00:35,050 --> 00:00:37,935
wie wir sehen werden, wenn wir mit der Übung fortfahren.

10
00:00:37,935 --> 00:00:43,430
Es geht also darum, die verschiedenen Tests durchzuführen und

11
00:00:43,430 --> 00:00:50,035
dann den Test mit Winkelmesser in dieser Übung durchzuführen. Wenn Sie

12
00:00:50,035 --> 00:00:53,865
zu unserer eckigen Anwendung in Visual Studio gehen,

13
00:00:53,865 --> 00:00:56,305
wenn Sie sich das Paket unserer JSON-Datei ansehen,

14
00:00:56,305 --> 00:00:59,965
werden Sie sehen, dass wir bereits feststellen, dass

15
00:00:59,965 --> 00:01:05,640
die eckige CLI alles eingerichtet hat, was wir für die Durchführung der End-to-End-Tests benötigen.

16
00:01:05,640 --> 00:01:07,295
Wenn Sie also nach unten scrollen,

17
00:01:07,295 --> 00:01:10,550
würden Sie sehen, dass Winkelmesser bereits auf

18
00:01:10,550 --> 00:01:16,110
unserem Computer innerhalb des Winkelprojekts installiert wurde.

19
00:01:16,110 --> 00:01:23,420
Außerdem stellen wir fest, dass es hier einen separaten Ordner

20
00:01:23,420 --> 00:01:26,780
namens e2e gibt, der einige Dateien enthält

21
00:01:26,780 --> 00:01:30,350
, die bereits für die Durchführung von End-to-End-Test eingerichtet wurden.

22
00:01:30,350 --> 00:01:33,890
Wenn Sie nun umfangreiche End-to-End-Tests durchführen müssen,

23
00:01:33,890 --> 00:01:36,620
empfiehlt es sich,

24
00:01:36,620 --> 00:01:41,985
eine separate Datei für jeden Satz von End-to-End-Tests zu erstellen, die Sie durchführen möchten.

25
00:01:41,985 --> 00:01:43,785
In dieser speziellen Übung

26
00:01:43,785 --> 00:01:47,090
illustriere ich Ihnen nur, wie Sie End-to-End-Tests durchführen können.

27
00:01:47,090 --> 00:01:51,670
Also werde ich bei dem bleiben, was bereits durch eckige CLI eingerichtet wurde.

28
00:01:51,670 --> 00:01:55,710
Wir arbeiten mit den Dateien, die wir direkt dort zur Verfügung haben.

29
00:01:55,710 --> 00:02:01,405
Also, werfen wir einen kurzen Blick auf diese beiden Dateien hier, die app.e2e-spec.ts,

30
00:02:01,405 --> 00:02:09,070
und Sie werden sehen, dass einige Code bereits durch eckig in diese Datei gerüstert wurde.

31
00:02:09,070 --> 00:02:14,035
Auch diese andere Datei namens app.po.ts,

32
00:02:14,035 --> 00:02:17,780
dies ist nichts anderes als eine Standard-JavaScript-Klasse

33
00:02:17,780 --> 00:02:21,170
, die hier mit ein paar Methoden eingerichtet wurde.

34
00:02:21,170 --> 00:02:24,380
Nun, was wir tun werden, ist, ein paar weitere Methoden zu

35
00:02:24,380 --> 00:02:31,375
dieser JavaScript-Klasse hinzuzufügen und auch einige dieser Methoden zu aktualisieren, die hier angegeben sind.

36
00:02:31,375 --> 00:02:40,095
Wir richten unsere Tests in der Datei app.e2e-spec.ts ein.

37
00:02:40,095 --> 00:02:41,860
Also, um vorwärts fortzufahren,

38
00:02:41,860 --> 00:02:44,875
gehen wir zur App.

39
00:02:44,875 --> 00:02:49,890
PO.ts Datei, und dann innerhalb dieser Datei, lassen Sie uns dies aktualisieren.

40
00:02:49,890 --> 00:02:55,140
Hier sehen Sie also, dass wir zwei Methoden haben, die hier bereits eingerichtet wurden.

41
00:02:55,140 --> 00:03:01,160
Ich werde diese Methoden aktualisieren, damit sie hier einen Parameter verwenden können.

42
00:03:01,160 --> 00:03:05,250
Also, ich werde sagen, NavigateTo mit einem Link

43
00:03:05,250 --> 00:03:06,760
, der als String zur Verfügung gestellt wird,

44
00:03:06,760 --> 00:03:10,970
und dann werde ich diesen Browser aktualisieren, um

45
00:03:10,970 --> 00:03:15,615
den Link zu verwenden, der der Parameter für diese Methode ist.

46
00:03:15,615 --> 00:03:17,090
Also, was macht das?

47
00:03:17,090 --> 00:03:18,330
Also, wie Sie sehen können,

48
00:03:18,330 --> 00:03:22,490
verwenden wir hier die Winkelmesser Syntax.

49
00:03:22,490 --> 00:03:26,450
Also, das sagt Rückgabe-Browser get link.

50
00:03:26,450 --> 00:03:32,075
Also, dieser spezielle Aufruf dieses Browser-Get-Methode wird es

51
00:03:32,075 --> 00:03:41,440
unserer Anwendung ermöglichen, zu diesem speziellen Link zu navigieren, der hier als Parameter bereitgestellt wird.

52
00:03:41,440 --> 00:03:43,650
Also, vor diesem Update

53
00:03:43,650 --> 00:03:47,200
haben Sie gesehen, dass der hier bereitgestellte Link Schrägstrich war,

54
00:03:47,200 --> 00:03:50,595
was bedeutet, dass die Wurzel unserer Winkelanwendung.

55
00:03:50,595 --> 00:03:54,650
Jetzt habe ich dies aktualisiert, um einen Parameter hier zu nehmen.

56
00:03:54,650 --> 00:04:00,490
Ebenso wird die zweite Methode, die Sie sehen, GetParagraphText genannt.

57
00:04:00,490 --> 00:04:08,685
Nun wird diese Methode verwendet, um den inneren Inhalt eines HTML-Elements hier zu erhalten.

58
00:04:08,685 --> 00:04:11,680
Also, dafür

59
00:04:11,680 --> 00:04:14,770
werde ich auch einen Parameter namens Selektor einrichten, der

60
00:04:14,770 --> 00:04:20,260
ein CSS-Selektor ist, den ich hier bereitstellen werde.

61
00:04:20,260 --> 00:04:22,430
Also, Sie sehen, dass

62
00:04:22,430 --> 00:04:28,775
ich das hier ändern werde, um den Selektor als Parameter zu nehmen.

63
00:04:28,775 --> 00:04:32,885
Nun, aus der vorherigen Erfahrung mit dem Komponententest,

64
00:04:32,885 --> 00:04:37,285
sehen Sie, was durch and.css steht.

65
00:04:37,285 --> 00:04:40,130
Das ist das gleiche, was wir auch hier verwenden.

66
00:04:40,130 --> 00:04:47,820
Dieses hier verwendete Verfahren wird nun aus der Winkelmesser Bibliothek importiert.

67
00:04:47,820 --> 00:04:52,610
Die Elementmethode wird auch aus der Winkelmesser Bibliothek importiert.

68
00:04:52,610 --> 00:04:56,915
Diese Elementmethode ermöglicht es Ihnen, Zugriff auf ein HTML-Element zu erhalten

69
00:04:56,915 --> 00:05:02,510
, indem Sie diese Auswahl für das HTML-Element als Parameter hier bereitstellen.

70
00:05:02,510 --> 00:05:05,760
Sie können also mit CSS, ById

71
00:05:05,760 --> 00:05:11,855
und vielen anderen solchen Methoden sagen, die für die nach Klasse hier verfügbar sind.

72
00:05:11,855 --> 00:05:13,935
Dann

73
00:05:13,935 --> 00:05:19,580
erhält die getText-Methode, wie wir den sichtbaren inneren Text dieses bestimmten Elements sehen.

74
00:05:19,580 --> 00:05:22,985
Dies ist also eine Möglichkeit, Informationen aus

75
00:05:22,985 --> 00:05:28,520
dem bestimmten HTML-Element innerhalb unseres Browserfensters abzurufen

76
00:05:28,520 --> 00:05:33,780
und dann zu prüfen, ob es einem Muster entspricht, das wir hier angeben.

77
00:05:33,780 --> 00:05:37,035
Also, mit diesem Update auf die app.po.ts,

78
00:05:37,035 --> 00:05:43,060
gehen wir zur Datei app.e2e-spec.ts.

79
00:05:43,060 --> 00:05:44,755
In dieser Datei

80
00:05:44,755 --> 00:05:48,630
werden Sie feststellen, dass wir die Jasmine-Syntax verwenden.

81
00:05:48,630 --> 00:05:54,730
Also, hier sehen Sie mich mit beschreiben und dann, was sagt, lassen Sie Seite AppPage.

82
00:05:54,730 --> 00:06:01,725
Also, hier ist die Seite, wo wir diese neue Klasse namens AppPage erstellen,

83
00:06:01,725 --> 00:06:08,330
die wir in der app.po.ts Datei als JavaScript-Klasse hier deklariert haben.

84
00:06:08,330 --> 00:06:13,540
Nun, dies ist nur eine bequeme Möglichkeit, alle Dinge an einem Ort einzurichten

85
00:06:13,540 --> 00:06:18,950
und sie dann in meinem Testcode selbst zu verwenden.

86
00:06:18,950 --> 00:06:24,445
Also, hier deklariere ich die Seite, um auf diese AppPage zu verweisen,

87
00:06:24,445 --> 00:06:26,809
und so kann ich auf

88
00:06:26,809 --> 00:06:30,230
die Methoden zugreifen, die ich hier in dieser Klasse erstellt habe.

89
00:06:30,230 --> 00:06:37,680
Also, der erste Test, den ich tun werde, ist,

90
00:06:37,680 --> 00:06:42,140
zum Wurzel meiner Winkelanwendung zu navigieren

91
00:06:42,140 --> 00:06:46,440
und dann zu überprüfen, ob es ein bestimmtes Muster darin gibt.

92
00:06:46,440 --> 00:06:51,375
Sie werden feststellen, dass

93
00:06:51,375 --> 00:06:56,170
Sie auf meiner Homepage die Zeichenfolge

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

95
00:07:03,550 --> 00:07:06,480
in einem H1-Element auf meiner Seite haben werden.

96
00:07:06,480 --> 00:07:14,370
Also, was ich tun werde, ist, zum Stamm meines HTML-Elements zu navigieren.

97
00:07:14,370 --> 00:07:18,340
Dann werde ich mich dort nach

98
00:07:18,340 --> 00:07:23,955
der App-Route umsehen und dann nach dem H1-Tag in der App-Route suchen.

99
00:07:23,955 --> 00:07:28,210
Dann sollte dies dieser bestimmten Zeichenfolge hier entsprechen.

100
00:07:28,210 --> 00:07:29,620
Also, ich werde nur

101
00:07:29,620 --> 00:07:34,530
die Ristorante Con Fusion-Zeichenfolge dort kopieren und dann als Parameter hier bereitstellen.

102
00:07:34,530 --> 00:07:37,000
Also, ich aktualisiere nur den Test, um

103
00:07:37,000 --> 00:07:41,585
genau zu überprüfen, was wir in unserer aktualisierten Winkelanwendung haben.

104
00:07:41,585 --> 00:07:43,200
Also, mit diesem Setup

105
00:07:43,200 --> 00:07:48,860
werde ich jetzt meinen ersten Test meiner Winkelanwendung durchführen.

106
00:07:48,860 --> 00:07:55,454
Also, speichern wir alle Änderungen und gehen Sie dann zurück zu unserem Terminal.

107
00:07:55,454 --> 00:08:00,715
Innerhalb des Terminals, in meinem Projektordner,

108
00:08:00,715 --> 00:08:05,965
werde ich an der Eingabeaufforderung ng e2e eingeben.

109
00:08:05,965 --> 00:08:11,010
Sie werden feststellen, dass dadurch ein Browser gestartet wird.

110
00:08:11,010 --> 00:08:19,445
In meinem Fall startet es ein Chrome-Fenster und führt dann den Test in diesem Fenster durch.

111
00:08:19,445 --> 00:08:21,710
Also, lassen Sie uns den ersten Test durchführen.

112
00:08:21,710 --> 00:08:27,100
Sie werden sehen, dass, wenn der Test nach dem Kompilieren meiner Winkelanwendung ausgeführt wird,

113
00:08:27,100 --> 00:08:28,705
wenn der Test ausgeführt

114
00:08:28,705 --> 00:08:33,725
wird, sichergestellt wird, dass der Test erfolgreich ist.

115
00:08:33,725 --> 00:08:36,295
Sie sehen, dass auf der Rückseite

116
00:08:36,295 --> 00:08:42,055
mein Browser von der ng e2e geöffnet wird,

117
00:08:42,055 --> 00:08:46,880
und dann wurde der Test in diesem Browserfenster durchgeführt.

118
00:08:46,880 --> 00:08:52,025
Es besagt, dass der Test hier erfolgreich durchgeführt wurde.

119
00:08:52,025 --> 00:08:54,390
Sie bemerken also, dass

120
00:08:54,390 --> 00:08:56,485
es selbst in diesem Fall den Browser starten muss,

121
00:08:56,485 --> 00:08:59,310
meine Winkelanwendung in den Browser laden muss,

122
00:08:59,310 --> 00:09:02,370
die gesamte Winkelanwendung in den Browser.

123
00:09:02,370 --> 00:09:07,210
Führen Sie dann den Test aus meiner Winkelanwendung durch. Stellen

124
00:09:07,210 --> 00:09:12,595
Sie an diesem Punkt sicher, dass Ihr Server,

125
00:09:12,595 --> 00:09:15,025
der JSON-Server einsatzbereit ist.

126
00:09:15,025 --> 00:09:16,510
Andernfalls schlägt der Test fehl,

127
00:09:16,510 --> 00:09:18,915
da der Test

128
00:09:18,915 --> 00:09:22,140
auch versucht wird, auf den JSON-Server zuzugreifen.

129
00:09:22,140 --> 00:09:25,300
Also, das ist etwas, das Sie sicherstellen müssen.

130
00:09:25,300 --> 00:09:28,035
Weiter mit unseren Tests.

131
00:09:28,035 --> 00:09:29,915
Im zweiten Schritt

132
00:09:29,915 --> 00:09:35,290
werden wir ein paar weitere Methoden in diese APPage hinzufügen.

133
00:09:35,290 --> 00:09:41,330
Klasse hier. Also würde ich eine neue Methode

134
00:09:41,330 --> 00:09:50,730
namens GetElement verwenden und dann einen Parameter eines Selektors aufnehmen.

135
00:09:51,160 --> 00:09:58,520
Diese Methode ermöglicht es mir, Zugriff auf das Element zu erhalten,

136
00:09:58,520 --> 00:10:04,500
das mit demselben vom CSS-Selektor ausgewählt wird.

137
00:10:04,500 --> 00:10:06,545
Also, ich werde das nur kopieren.

138
00:10:06,545 --> 00:10:09,785
Also, in diesem Fall, anstatt nur den Text zu erhalten,

139
00:10:09,785 --> 00:10:13,750
wird es tatsächlich den Verweis auf das Element selbst zurückgeben,

140
00:10:13,750 --> 00:10:17,290
und dann, so dass Sie zusätzliche Möglichkeiten hinzufügen können,

141
00:10:17,290 --> 00:10:20,910
auf Informationen innerhalb dieses Elements zuzugreifen, wie wir es benötigen.

142
00:10:20,910 --> 00:10:25,340
In diesem Fall wird der get-Text nur verwendet, um den spezifischen Text zu holen.

143
00:10:25,340 --> 00:10:28,470
Wir könnten andere Methoden für

144
00:10:28,470 --> 00:10:31,520
dieses Element verwenden, um zusätzliche Informationen von diesen Elementen zu holen.

145
00:10:31,520 --> 00:10:37,220
Also, das ist der Grund, warum ich diese Methode hier erstelle.

146
00:10:37,220 --> 00:10:45,595
In ähnlicher Weise werde ich eine andere Methode namens get all elements implementieren.

147
00:10:45,595 --> 00:10:52,040
Nun verwendet dies auch einen Parameter namens Selektor wie zuvor.

148
00:10:52,040 --> 00:10:56,115
Was die getAll-Methode tut, ist,

149
00:10:56,115 --> 00:11:01,910
alle Elemente auszuwählen und sie dann an den Kragen zurückzugeben

150
00:11:01,910 --> 00:11:03,720
, so dass zum Beispiel,

151
00:11:03,720 --> 00:11:08,310
wenn Ihre Seite viele h1-Elemente in

152
00:11:08,310 --> 00:11:12,990
Bezug auf alle enthält, an meinen Kragen zurückgegeben werden.

153
00:11:12,990 --> 00:11:16,790
Also, dass ich dort dann entscheiden kann,

154
00:11:16,790 --> 00:11:20,940
einen Aufruf zu einem bestimmten in dieser Liste von Elementen zu machen.

155
00:11:20,940 --> 00:11:22,505
Also, um dies zu tun,

156
00:11:22,505 --> 00:11:25,525
werden wir die gleiche Rückkehr verwenden, aber hier,

157
00:11:25,525 --> 00:11:28,395
anstatt Elementselektor zu sagen,

158
00:11:28,395 --> 00:11:33,165
lassen Sie mich das einfach kopieren und dann haben wir eine andere Methode namens

159
00:11:33,165 --> 00:11:37,340
element.all, die uns erlaubt,

160
00:11:37,340 --> 00:11:41,750
auf alle Elemente zuzugreifen, die diesem speziellen Selektor entsprechen.

161
00:11:41,750 --> 00:11:45,790
Der erste wird das erste Element zurückgeben, das diesem Selektor entspricht.

162
00:11:45,790 --> 00:11:55,805
Nach diesen Updates werden wir nun zu unserer Testdatei wechseln und hier einen neuen Test hinzufügen.

163
00:11:55,805 --> 00:12:01,755
Also, auch hier verwende ich die Jasmine-Syntax, um hier den neuen Test hinzuzufügen.

164
00:12:01,755 --> 00:12:06,980
Also, ich werde es sagen und dann eine Beschreibung für diesen Test geben.

165
00:12:06,980 --> 00:12:13,510
Wird sagen, Es sollte zu über

166
00:12:13,510 --> 00:12:22,645
uns Seite navigieren, indem Sie auf den Link klicken.

167
00:12:22,645 --> 00:12:25,705
Wenn Sie nun auf Ihre Angular-Anwendung zurückblicken,

168
00:12:25,705 --> 00:12:28,530
würden Sie feststellen, dass

169
00:12:28,530 --> 00:12:36,735
Sie in Ihrer Angular-Anwendung die Navigationslinks oben auf der Seite haben.

170
00:12:36,735 --> 00:12:40,680
Also, was wir in diesem Test tun werden, ist, automatisch zu

171
00:12:40,680 --> 00:12:45,500
gehen und auf einen dieser Navigationslinks zugreifen und darauf klicken.

172
00:12:45,500 --> 00:12:49,545
Nun, natürlich, wie Sie erwarten, wird dies programmgesteuert durchgeführt werden,

173
00:12:49,545 --> 00:12:54,320
anstatt manuell auf den Link zu klicken.

174
00:12:54,320 --> 00:12:55,630
Also, um das zu tun,

175
00:12:55,630 --> 00:13:05,325
was ich tun werde, ist, zum Stamm meiner Angular-Anwendung

176
00:13:05,325 --> 00:13:08,490
zu navigieren und dann werde ich auf

177
00:13:15,040 --> 00:13:23,430
die Links in meiner Navigationsleiste oben zugreifen.

178
00:13:23,430 --> 00:13:27,850
Indem wir Seite sagen, GetAllElements und

179
00:13:27,850 --> 00:13:32,815
dann bekomme ich alle Elemente, die das a-Tag dort haben.

180
00:13:32,815 --> 00:13:40,994
Nun offensichtlich, Sie werden viele dieser ein Tags auf unserer Seite haben, aber die oberen vier,

181
00:13:40,994 --> 00:13:44,950
sind die vier Links in

182
00:13:44,950 --> 00:13:52,100
der Navigationsleiste oben auf unserer Seite gibt es in der Header-Komponente.

183
00:13:52,100 --> 00:13:54,420
Also, Zugriff auf diese

184
00:13:54,420 --> 00:14:00,710
eine Notiz, die ich verwende, erhalten Sie alle Elemente, so dass ich eine Reihe von Elementen erhalten werde.

185
00:14:00,710 --> 00:14:01,770
In diesem speziellen Fall

186
00:14:01,770 --> 00:14:07,850
stellt sich heraus, dass es etwa 16 verschiedene Tags sein wird, die in dieser Seite dort tragen.

187
00:14:07,850 --> 00:14:10,640
Also, ich gehe und wähle aus.

188
00:14:10,640 --> 00:14:15,800
Also, hier verwende ich diese Methode namens get und dann kann ich

189
00:14:15,800 --> 00:14:20,490
einen Index für das spezifische Element angeben, das ich möchte.

190
00:14:20,490 --> 00:14:26,460
Also, ich habe überprüft, ob Sie sich die Header-Komponenten-Vorlagendatei ansehen,

191
00:14:26,460 --> 00:14:30,840
werden Sie feststellen, dass sich in der Sekunde ein Tag in

192
00:14:30,840 --> 00:14:38,950
der HTML-Seite der Header-Komponente auf den Link „Über uns“ bezieht.

193
00:14:38,950 --> 00:14:42,905
Also, das ist, worauf ich Zugriff bekomme, indem ich sage, dass du eins bekommst.

194
00:14:42,905 --> 00:14:46,410
Null bezieht sich natürlich auf den Home-Link in

195
00:14:46,410 --> 00:14:51,155
der Header-Komponente, wo wir unsere Symbolleiste oben dort erstellt haben.

196
00:14:51,155 --> 00:14:55,745
Also, ich bekomme Zugriff auf die zweite, also ist dies der über Link dort.

197
00:14:55,745 --> 00:14:59,100
Jetzt, sobald Sie diesen Link erhalten,

198
00:14:59,100 --> 00:15:03,030
gibt es eine Methode, die Winkelmesser

199
00:15:03,030 --> 00:15:08,045
auf einem Element mit einem Link dort unterstützt, der als Klick bezeichnet wird.

200
00:15:08,045 --> 00:15:11,335
Dies

201
00:15:11,335 --> 00:15:17,160
verursacht also, wie Sie programmgesteuert sehen, einen Klick auf dieses bestimmte Element in meinem Browserfenster dort.

202
00:15:17,160 --> 00:15:21,840
Also, programmgesteuert, führen wir das aus, was Sie normalerweise

203
00:15:21,840 --> 00:15:27,160
manuell durchführen würden, indem Sie physisch zu diesem Link gehen und mit der Maus darauf klicken.

204
00:15:27,160 --> 00:15:29,790
Sobald wir nun auf den Link klicken,

205
00:15:29,790 --> 00:15:35,020
navigieren Sie natürlich zur Seite Über uns.

206
00:15:35,020 --> 00:15:37,780
Wenn Sie nun auf der Seite „Über uns“ die Vorlage der Seite „Über uns“ betrachten,

207
00:15:37,780 --> 00:15:45,105
werden Sie feststellen, dass es ein h3-Element gibt, das den Namen dieser Seite enthält.

208
00:15:45,105 --> 00:15:46,810
Innerhalb dieses h3-Elements

209
00:15:46,810 --> 00:15:51,640
sehen Sie dort einen Text namens Über Raum Uns.

210
00:15:51,640 --> 00:15:53,990
Das ist es, was ich jetzt überprüfen werde.

211
00:15:53,990 --> 00:15:58,440
Der Grund, warum ich das überprüfen werde, besteht darin, sicherzustellen, dass ich wirklich zur

212
00:15:58,440 --> 00:16:04,200
Seite Über uns navigiert habe, indem ich diese Schritte in meiner Angular-Anwendung mache.

213
00:16:04,200 --> 00:16:07,685
Also, hier werde ich die Erwartung nutzen.

214
00:16:07,685 --> 00:16:14,375
Wir haben bereits die Verwendung von erwarten und erwarten Seite gesehen.

215
00:16:14,375 --> 00:16:18,990
GetParagraphText und ich werde den Absatztext von

216
00:16:18,990 --> 00:16:25,365
h3 erhalten und das erwarte ich toBe.

217
00:16:25,365 --> 00:16:33,430
Beachten Sie die Verwendung der Jasmin-Syntax hier und dies sollte über uns sein.

218
00:16:34,460 --> 00:16:42,895
Also, indem wir diesen zweiten Test in unsere Testdatei hier einführen,

219
00:16:42,895 --> 00:16:48,950
speichern wir die Änderungen, die wir vorgenommen haben, und dann gehen Sie und führen Sie diesen Test.

220
00:16:49,510 --> 00:16:52,915
Ich gehe zum Terminal.

221
00:16:52,915 --> 00:16:57,680
Lassen Sie mich den Test erneut ausführen, indem Sie ng e2e sagen,

222
00:16:57,680 --> 00:17:03,220
und Sie werden feststellen, dass dies wieder die gleichen Schritte durchlaufen wird,

223
00:17:03,220 --> 00:17:09,880
und dann beide Tests durchführen, die ich jetzt in der Testdatei habe.

224
00:17:09,880 --> 00:17:15,110
Es ist interessant zu beobachten, wie der Test im Browser durchgeführt wird.

225
00:17:15,110 --> 00:17:17,390
So, Sie sehen, dass wir auf der Homepage sind,

226
00:17:17,390 --> 00:17:22,595
navigieren Sie jetzt auf die Info Seite und dann Erfolg.

227
00:17:22,595 --> 00:17:25,840
So haben wir erfolgreich von

228
00:17:25,840 --> 00:17:29,290
der Homepage zur About Seite navigiert und dann haben wir überprüft, dass Sie

229
00:17:29,290 --> 00:17:31,450
zur About Seite navigiert haben, indem wir

230
00:17:31,450 --> 00:17:34,250
den spezifischen Test durchgeführt haben, bei dem wir überprüft haben, um sicherzustellen, dass sich

231
00:17:34,250 --> 00:17:39,515
das Über uns in einem h3-Tag innerhalb der Über uns Seite befindet.

232
00:17:39,515 --> 00:17:43,270
Also, das ist ein weiterer End-to-End-Test, den wir durchführen können,

233
00:17:43,270 --> 00:17:46,320
und Sie haben tatsächlich gesehen, dass der Test direkt vor

234
00:17:46,320 --> 00:17:49,855
Ihren Augen ohne Ihr manuelles Eingreifen durchgeführt wurde.

235
00:17:49,855 --> 00:17:53,840
Ich hoffe, Sie genießen die Durchführung dieser End-to-End-Tests.

236
00:17:53,840 --> 00:17:55,725
Lasst uns etwas ehrgeiziger werden.

237
00:17:55,725 --> 00:18:00,280
Nun, was wir tun werden, ist zu einem bestimmten Gericht zu navigieren

238
00:18:00,280 --> 00:18:04,615
und dann versuchen, einen Kommentar in dieses Gericht einzufügen.

239
00:18:04,615 --> 00:18:09,155
Nun, hier werde ich die Hilfe von Winkelmesser Unterstützung nehmen,

240
00:18:09,155 --> 00:18:13,020
und Sie werden sehen, wie ich einige weitere Methoden von

241
00:18:13,020 --> 00:18:17,675
Winkelmesser verwenden, um zur Teller Seite zu

242
00:18:17,675 --> 00:18:23,570
navigieren, werden wir zum allerersten Gericht in unserem Menü navigieren, indem Sie

243
00:18:23,570 --> 00:18:30,185
den Link zur Schale Detailseite mit dem Parameter bestimmten Gericht,

244
00:18:30,185 --> 00:18:31,995
die ID des jeweiligen Gerichts.

245
00:18:31,995 --> 00:18:39,385
Dann werden wir die Eingabeelemente des Formulars identifizieren,

246
00:18:39,385 --> 00:18:42,990
und dann werden wir automatisch Informationen in

247
00:18:42,990 --> 00:18:47,425
diese Eingabeelemente eingeben und dann versuchen, das Formular zu senden und zu sehen, was passiert.

248
00:18:47,425 --> 00:18:49,975
Also, um diesen Test durchzuführen, wieder,

249
00:18:49,975 --> 00:18:52,830
gehen Sie hinein und verwenden Sie die Jasmin-Syntax,

250
00:18:52,830 --> 00:18:59,595
ich werde hier ein es einführen und dann werde ich identifizieren, was dieser Test zu tun versucht.

251
00:18:59,595 --> 00:19:07,904
Ich würde sagen, „Es sollte einen neuen Kommentar für das erste

252
00:19:07,904 --> 00:19:15,470
Gericht eingeben“ und Pfeilfunktion

253
00:19:15,470 --> 00:19:20,450
und Sie sehen, dass in dieser Pfeilfunktion,

254
00:19:20,450 --> 00:19:27,985
wir gehen, um unsere erste Seite navigateTo,

255
00:19:27,985 --> 00:19:35,660
wir werden zu der dishdetail Null navigieren.

256
00:19:35,660 --> 00:19:39,235
Also, dies ist das erste Gericht in unserer Speisekarte.

257
00:19:39,235 --> 00:19:43,060
Nun, sobald wir auf die dishdetail Seite navigieren, werden wir sagen:

258
00:19:43,060 --> 00:19:52,030
„Lassen Sie NewAuthor ist gleich Seite getElement.“

259
00:19:52,030 --> 00:19:56,860
Also, wir werden das Element finden, das

260
00:19:56,860 --> 00:20:03,990
Eingabe ist und Text hier eingeben,

261
00:20:03,990 --> 00:20:10,010
so dass dies mir helfen wird, das Eingabeelement zu identifizieren, wo der Name des Autors

262
00:20:10,010 --> 00:20:17,115
in der Form eingegeben wird, die wir auf unserer dishdetail Seite erstellt haben.

263
00:20:17,115 --> 00:20:19,885
Wenn Sie neugierig sind,

264
00:20:19,885 --> 00:20:21,380
schauen Sie sich dieses Formular an,

265
00:20:21,380 --> 00:20:23,645
und dann werden Sie sehen, dass es tatsächlich

266
00:20:23,645 --> 00:20:27,730
dieses Eingabeelement in dieser dishdetail-Seite gibt. Wenn

267
00:20:27,730 --> 00:20:33,700
ich darauf zugreife, werde ich den Namen des Autors

268
00:20:33,700 --> 00:20:39,890
in dieses Eingabefeld eingeben.

269
00:20:39,890 --> 00:20:47,590
Hier kommt uns also die Methode der SendKeys, die auf unserem Element unterstützt wird, zu Hilfe,

270
00:20:47,590 --> 00:20:50,170
die von Winkelmesser unterstützte Methode der SendKeys.

271
00:20:50,170 --> 00:20:56,805
Also, hier werde ich den Namen des Autors als Testautor eingeben.

272
00:20:56,805 --> 00:21:01,750
Am Ende dieser beiden Schritte

273
00:21:01,750 --> 00:21:07,105
sollte der Testautor in das Eingabeelement in meinem Formular eingegeben werden.

274
00:21:07,105 --> 00:21:11,475
Jetzt muss ich auch den Kommentar für dieses Formular eingeben.

275
00:21:11,475 --> 00:21:14,660
Wir können auch den Bewertungswert einrichten,

276
00:21:14,660 --> 00:21:16,770
aber ich werde das in diesem speziellen Test nicht tun,

277
00:21:16,770 --> 00:21:21,530
ich werde nur den Kommentarwert mit einem ähnlichen Ansatz eingeben.

278
00:21:21,530 --> 00:21:26,250
Also, ich werde sagen, „let newComment“,

279
00:21:26,250 --> 00:21:29,650
wieder, wird Seite,

280
00:21:29,660 --> 00:21:34,690
getElement, und dann ist dies, wo ich nach

281
00:21:34,690 --> 00:21:42,080
dem Textbereich und newComment,

282
00:21:43,170 --> 00:21:52,340
SendKeys suchen und „Test Comment“ eingeben.

283
00:21:52,650 --> 00:21:59,990
Dies wird also die Wörter Testkommentar in den Textbereich ausfüllen

284
00:21:59,990 --> 00:22:02,380
, der die Kommentare enthält,

285
00:22:02,380 --> 00:22:07,130
die der Autor für dieses bestimmte Gericht einreichen soll.

286
00:22:07,130 --> 00:22:12,530
Danach finden wir den SubmitButton.

287
00:22:12,990 --> 00:22:15,430
Also, um das zu tun, werden wir sagen,

288
00:22:15,430 --> 00:22:33,050
page.getElement Button Typ senden,

289
00:22:33,570 --> 00:22:44,390
und dann, sobald wir halten die Schaltfläche, die wir nur sagen, newSubmitButton.click.

290
00:22:44,390 --> 00:22:46,330
Also, sobald wir auf die Schaltfläche klicken,

291
00:22:46,330 --> 00:22:48,610
wird der Kommentar es erneut einreichen.

292
00:22:48,610 --> 00:22:55,930
Jetzt werde ich eine andere Methode verwenden, die Winkelmesser unterstützt.

293
00:22:55,930 --> 00:23:00,200
Ich werde den Test zu diesem Zeitpunkt pausieren.

294
00:23:00,200 --> 00:23:06,170
Dies wird es mir ermöglichen, den Test zu bestehen und dann den Test oder die Anlage durchzuführen,

295
00:23:06,170 --> 00:23:09,160
so dass dies sagt, der Browser ist undefiniert,

296
00:23:09,160 --> 00:23:14,210
also muss ich hier wieder nach oben gehen und dann den

297
00:23:18,930 --> 00:23:32,155
Browser aus der Protractor Bibliothek dort importieren,

298
00:23:32,155 --> 00:23:35,840
und dann sehen Sie, dass die rote zerquetschige Linie verschwunden ist,

299
00:23:35,840 --> 00:23:39,175
also sollte mein Test alle dort richtig eingerichtet werden.

300
00:23:39,175 --> 00:23:40,935
Also, lassen Sie mich die Änderungen speichern,

301
00:23:40,935 --> 00:23:44,320
wir werden diesen dritten Test auch ausführen,

302
00:23:44,320 --> 00:23:48,505
zusammen mit den verbleibenden zwei Tests, die wir bereits eingegeben haben.

303
00:23:48,505 --> 00:23:54,375
Gehen Sie zum Browser, lassen Sie mich erneut den End-to-End-Test ausführen,

304
00:23:54,375 --> 00:23:57,765
wenn der Browser öffnet, da gehen wir,

305
00:23:57,765 --> 00:24:02,810
der erste Test wurde durchgeführt und das sollte erfolgreich sein,

306
00:24:02,810 --> 00:24:08,780
der zweite Test wurde durchgeführt und der dritte Test, wo wir Gericht Detail navigiert,

307
00:24:08,780 --> 00:24:18,145
und Sie sehen, dass der Testkommentar korrekt von unserem Test eingereicht.

308
00:24:18,145 --> 00:24:21,195
Damit schließen wir diese Übung ab.

309
00:24:21,195 --> 00:24:27,730
In dieser Übung haben Sie drei verschiedene Tests mit Hilfe der Unterstützung von

310
00:24:27,730 --> 00:24:35,430
Winkelmesser durchgeführt und festgestellt, dass unsere Anwendung alle diese drei End-to-End-Tests bestanden hat.

311
00:24:35,430 --> 00:24:39,075
Dies ist ein guter Zeitpunkt für Sie, die Änderungen in

312
00:24:39,075 --> 00:24:46,420
Ihrem Git-Repository mit dem Message-End-to-End-Test zu speichern.