Jetzt haben wir ein schnelles Verständnis von
End-to-End-Tests und welche Rolle
End-to-End-Tests in der Gesamtstrategie zum Testen von Winkelanwendungen spielen.
Auch eine kurze Einführung in Winkelmesser.
Fahren wir mit der nächsten Übung fort, in der wir
Winkelmesser einsetzen und unsere End-to-End-Tests entwerfen könnten.
Es ist glücklich, dass die eckige CLI automatisch
alles einrichtet, was wir für die Durchführung von End-to-End-Tests benötigen,
wie wir sehen werden, wenn wir mit der Übung fortfahren.
Es geht also darum, die verschiedenen Tests durchzuführen und
dann den Test mit Winkelmesser in dieser Übung durchzuführen. Wenn Sie
zu unserer eckigen Anwendung in Visual Studio gehen,
wenn Sie sich das Paket unserer JSON-Datei ansehen,
werden Sie sehen, dass wir bereits feststellen, dass
die eckige CLI alles eingerichtet hat, was wir für die Durchführung der End-to-End-Tests benötigen.
Wenn Sie also nach unten scrollen,
würden Sie sehen, dass Winkelmesser bereits auf
unserem Computer innerhalb des Winkelprojekts installiert wurde.
Außerdem stellen wir fest, dass es hier einen separaten Ordner
namens e2e gibt, der einige Dateien enthält
, die bereits für die Durchführung von End-to-End-Test eingerichtet wurden.
Wenn Sie nun umfangreiche End-to-End-Tests durchführen müssen,
empfiehlt es sich,
eine separate Datei für jeden Satz von End-to-End-Tests zu erstellen, die Sie durchführen möchten.
In dieser speziellen Übung
illustriere ich Ihnen nur, wie Sie End-to-End-Tests durchführen können.
Also werde ich bei dem bleiben, was bereits durch eckige CLI eingerichtet wurde.
Wir arbeiten mit den Dateien, die wir direkt dort zur Verfügung haben.
Also, werfen wir einen kurzen Blick auf diese beiden Dateien hier, die app.e2e-spec.ts,
und Sie werden sehen, dass einige Code bereits durch eckig in diese Datei gerüstert wurde.
Auch diese andere Datei namens app.po.ts,
dies ist nichts anderes als eine Standard-JavaScript-Klasse
, die hier mit ein paar Methoden eingerichtet wurde.
Nun, was wir tun werden, ist, ein paar weitere Methoden zu
dieser JavaScript-Klasse hinzuzufügen und auch einige dieser Methoden zu aktualisieren, die hier angegeben sind.
Wir richten unsere Tests in der Datei app.e2e-spec.ts ein.
Also, um vorwärts fortzufahren,
gehen wir zur App.
PO.ts Datei, und dann innerhalb dieser Datei, lassen Sie uns dies aktualisieren.
Hier sehen Sie also, dass wir zwei Methoden haben, die hier bereits eingerichtet wurden.
Ich werde diese Methoden aktualisieren, damit sie hier einen Parameter verwenden können.
Also, ich werde sagen, NavigateTo mit einem Link
, der als String zur Verfügung gestellt wird,
und dann werde ich diesen Browser aktualisieren, um
den Link zu verwenden, der der Parameter für diese Methode ist.
Also, was macht das?
Also, wie Sie sehen können,
verwenden wir hier die Winkelmesser Syntax.
Also, das sagt Rückgabe-Browser get link.
Also, dieser spezielle Aufruf dieses Browser-Get-Methode wird es
unserer Anwendung ermöglichen, zu diesem speziellen Link zu navigieren, der hier als Parameter bereitgestellt wird.
Also, vor diesem Update
haben Sie gesehen, dass der hier bereitgestellte Link Schrägstrich war,
was bedeutet, dass die Wurzel unserer Winkelanwendung.
Jetzt habe ich dies aktualisiert, um einen Parameter hier zu nehmen.
Ebenso wird die zweite Methode, die Sie sehen, GetParagraphText genannt.
Nun wird diese Methode verwendet, um den inneren Inhalt eines HTML-Elements hier zu erhalten.
Also, dafür
werde ich auch einen Parameter namens Selektor einrichten, der
ein CSS-Selektor ist, den ich hier bereitstellen werde.
Also, Sie sehen, dass
ich das hier ändern werde, um den Selektor als Parameter zu nehmen.
Nun, aus der vorherigen Erfahrung mit dem Komponententest,
sehen Sie, was durch and.css steht.
Das ist das gleiche, was wir auch hier verwenden.
Dieses hier verwendete Verfahren wird nun aus der Winkelmesser Bibliothek importiert.
Die Elementmethode wird auch aus der Winkelmesser Bibliothek importiert.
Diese Elementmethode ermöglicht es Ihnen, Zugriff auf ein HTML-Element zu erhalten
, indem Sie diese Auswahl für das HTML-Element als Parameter hier bereitstellen.
Sie können also mit CSS, ById
und vielen anderen solchen Methoden sagen, die für die nach Klasse hier verfügbar sind.
Dann
erhält die getText-Methode, wie wir den sichtbaren inneren Text dieses bestimmten Elements sehen.
Dies ist also eine Möglichkeit, Informationen aus
dem bestimmten HTML-Element innerhalb unseres Browserfensters abzurufen
und dann zu prüfen, ob es einem Muster entspricht, das wir hier angeben.
Also, mit diesem Update auf die app.po.ts,
gehen wir zur Datei app.e2e-spec.ts.
In dieser Datei
werden Sie feststellen, dass wir die Jasmine-Syntax verwenden.
Also, hier sehen Sie mich mit beschreiben und dann, was sagt, lassen Sie Seite AppPage.
Also, hier ist die Seite, wo wir diese neue Klasse namens AppPage erstellen,
die wir in der app.po.ts Datei als JavaScript-Klasse hier deklariert haben.
Nun, dies ist nur eine bequeme Möglichkeit, alle Dinge an einem Ort einzurichten
und sie dann in meinem Testcode selbst zu verwenden.
Also, hier deklariere ich die Seite, um auf diese AppPage zu verweisen,
und so kann ich auf
die Methoden zugreifen, die ich hier in dieser Klasse erstellt habe.
Also, der erste Test, den ich tun werde, ist,
zum Wurzel meiner Winkelanwendung zu navigieren
und dann zu überprüfen, ob es ein bestimmtes Muster darin gibt.
Sie werden feststellen, dass
Sie auf meiner Homepage die Zeichenfolge
Ristorante Con Fusion
in einem H1-Element auf meiner Seite haben werden.
Also, was ich tun werde, ist, zum Stamm meines HTML-Elements zu navigieren.
Dann werde ich mich dort nach
der App-Route umsehen und dann nach dem H1-Tag in der App-Route suchen.
Dann sollte dies dieser bestimmten Zeichenfolge hier entsprechen.
Also, ich werde nur
die Ristorante Con Fusion-Zeichenfolge dort kopieren und dann als Parameter hier bereitstellen.
Also, ich aktualisiere nur den Test, um
genau zu überprüfen, was wir in unserer aktualisierten Winkelanwendung haben.
Also, mit diesem Setup
werde ich jetzt meinen ersten Test meiner Winkelanwendung durchführen.
Also, speichern wir alle Änderungen und gehen Sie dann zurück zu unserem Terminal.
Innerhalb des Terminals, in meinem Projektordner,
werde ich an der Eingabeaufforderung ng e2e eingeben.
Sie werden feststellen, dass dadurch ein Browser gestartet wird.
In meinem Fall startet es ein Chrome-Fenster und führt dann den Test in diesem Fenster durch.
Also, lassen Sie uns den ersten Test durchführen.
Sie werden sehen, dass, wenn der Test nach dem Kompilieren meiner Winkelanwendung ausgeführt wird,
wenn der Test ausgeführt
wird, sichergestellt wird, dass der Test erfolgreich ist.
Sie sehen, dass auf der Rückseite
mein Browser von der ng e2e geöffnet wird,
und dann wurde der Test in diesem Browserfenster durchgeführt.
Es besagt, dass der Test hier erfolgreich durchgeführt wurde.
Sie bemerken also, dass
es selbst in diesem Fall den Browser starten muss,
meine Winkelanwendung in den Browser laden muss,
die gesamte Winkelanwendung in den Browser.
Führen Sie dann den Test aus meiner Winkelanwendung durch. Stellen
Sie an diesem Punkt sicher, dass Ihr Server,
der JSON-Server einsatzbereit ist.
Andernfalls schlägt der Test fehl,
da der Test
auch versucht wird, auf den JSON-Server zuzugreifen.
Also, das ist etwas, das Sie sicherstellen müssen.
Weiter mit unseren Tests.
Im zweiten Schritt
werden wir ein paar weitere Methoden in diese APPage hinzufügen.
Klasse hier. Also würde ich eine neue Methode
namens GetElement verwenden und dann einen Parameter eines Selektors aufnehmen.
Diese Methode ermöglicht es mir, Zugriff auf das Element zu erhalten,
das mit demselben vom CSS-Selektor ausgewählt wird.
Also, ich werde das nur kopieren.
Also, in diesem Fall, anstatt nur den Text zu erhalten,
wird es tatsächlich den Verweis auf das Element selbst zurückgeben,
und dann, so dass Sie zusätzliche Möglichkeiten hinzufügen können,
auf Informationen innerhalb dieses Elements zuzugreifen, wie wir es benötigen.
In diesem Fall wird der get-Text nur verwendet, um den spezifischen Text zu holen.
Wir könnten andere Methoden für
dieses Element verwenden, um zusätzliche Informationen von diesen Elementen zu holen.
Also, das ist der Grund, warum ich diese Methode hier erstelle.
In ähnlicher Weise werde ich eine andere Methode namens get all elements implementieren.
Nun verwendet dies auch einen Parameter namens Selektor wie zuvor.
Was die getAll-Methode tut, ist,
alle Elemente auszuwählen und sie dann an den Kragen zurückzugeben
, so dass zum Beispiel,
wenn Ihre Seite viele h1-Elemente in
Bezug auf alle enthält, an meinen Kragen zurückgegeben werden.
Also, dass ich dort dann entscheiden kann,
einen Aufruf zu einem bestimmten in dieser Liste von Elementen zu machen.
Also, um dies zu tun,
werden wir die gleiche Rückkehr verwenden, aber hier,
anstatt Elementselektor zu sagen,
lassen Sie mich das einfach kopieren und dann haben wir eine andere Methode namens
element.all, die uns erlaubt,
auf alle Elemente zuzugreifen, die diesem speziellen Selektor entsprechen.
Der erste wird das erste Element zurückgeben, das diesem Selektor entspricht.
Nach diesen Updates werden wir nun zu unserer Testdatei wechseln und hier einen neuen Test hinzufügen.
Also, auch hier verwende ich die Jasmine-Syntax, um hier den neuen Test hinzuzufügen.
Also, ich werde es sagen und dann eine Beschreibung für diesen Test geben.
Wird sagen, Es sollte zu über
uns Seite navigieren, indem Sie auf den Link klicken.
Wenn Sie nun auf Ihre Angular-Anwendung zurückblicken,
würden Sie feststellen, dass
Sie in Ihrer Angular-Anwendung die Navigationslinks oben auf der Seite haben.
Also, was wir in diesem Test tun werden, ist, automatisch zu
gehen und auf einen dieser Navigationslinks zugreifen und darauf klicken.
Nun, natürlich, wie Sie erwarten, wird dies programmgesteuert durchgeführt werden,
anstatt manuell auf den Link zu klicken.
Also, um das zu tun,
was ich tun werde, ist, zum Stamm meiner Angular-Anwendung
zu navigieren und dann werde ich auf
die Links in meiner Navigationsleiste oben zugreifen.
Indem wir Seite sagen, GetAllElements und
dann bekomme ich alle Elemente, die das a-Tag dort haben.
Nun offensichtlich, Sie werden viele dieser ein Tags auf unserer Seite haben, aber die oberen vier,
sind die vier Links in
der Navigationsleiste oben auf unserer Seite gibt es in der Header-Komponente.
Also, Zugriff auf diese
eine Notiz, die ich verwende, erhalten Sie alle Elemente, so dass ich eine Reihe von Elementen erhalten werde.
In diesem speziellen Fall
stellt sich heraus, dass es etwa 16 verschiedene Tags sein wird, die in dieser Seite dort tragen.
Also, ich gehe und wähle aus.
Also, hier verwende ich diese Methode namens get und dann kann ich
einen Index für das spezifische Element angeben, das ich möchte.
Also, ich habe überprüft, ob Sie sich die Header-Komponenten-Vorlagendatei ansehen,
werden Sie feststellen, dass sich in der Sekunde ein Tag in
der HTML-Seite der Header-Komponente auf den Link „Über uns“ bezieht.
Also, das ist, worauf ich Zugriff bekomme, indem ich sage, dass du eins bekommst.
Null bezieht sich natürlich auf den Home-Link in
der Header-Komponente, wo wir unsere Symbolleiste oben dort erstellt haben.
Also, ich bekomme Zugriff auf die zweite, also ist dies der über Link dort.
Jetzt, sobald Sie diesen Link erhalten,
gibt es eine Methode, die Winkelmesser
auf einem Element mit einem Link dort unterstützt, der als Klick bezeichnet wird.
Dies
verursacht also, wie Sie programmgesteuert sehen, einen Klick auf dieses bestimmte Element in meinem Browserfenster dort.
Also, programmgesteuert, führen wir das aus, was Sie normalerweise
manuell durchführen würden, indem Sie physisch zu diesem Link gehen und mit der Maus darauf klicken.
Sobald wir nun auf den Link klicken,
navigieren Sie natürlich zur Seite Über uns.
Wenn Sie nun auf der Seite „Über uns“ die Vorlage der Seite „Über uns“ betrachten,
werden Sie feststellen, dass es ein h3-Element gibt, das den Namen dieser Seite enthält.
Innerhalb dieses h3-Elements
sehen Sie dort einen Text namens Über Raum Uns.
Das ist es, was ich jetzt überprüfen werde.
Der Grund, warum ich das überprüfen werde, besteht darin, sicherzustellen, dass ich wirklich zur
Seite Über uns navigiert habe, indem ich diese Schritte in meiner Angular-Anwendung mache.
Also, hier werde ich die Erwartung nutzen.
Wir haben bereits die Verwendung von erwarten und erwarten Seite gesehen.
GetParagraphText und ich werde den Absatztext von
h3 erhalten und das erwarte ich toBe.
Beachten Sie die Verwendung der Jasmin-Syntax hier und dies sollte über uns sein.
Also, indem wir diesen zweiten Test in unsere Testdatei hier einführen,
speichern wir die Änderungen, die wir vorgenommen haben, und dann gehen Sie und führen Sie diesen Test.
Ich gehe zum Terminal.
Lassen Sie mich den Test erneut ausführen, indem Sie ng e2e sagen,
und Sie werden feststellen, dass dies wieder die gleichen Schritte durchlaufen wird,
und dann beide Tests durchführen, die ich jetzt in der Testdatei habe.
Es ist interessant zu beobachten, wie der Test im Browser durchgeführt wird.
So, Sie sehen, dass wir auf der Homepage sind,
navigieren Sie jetzt auf die Info Seite und dann Erfolg.
So haben wir erfolgreich von
der Homepage zur About Seite navigiert und dann haben wir überprüft, dass Sie
zur About Seite navigiert haben, indem wir
den spezifischen Test durchgeführt haben, bei dem wir überprüft haben, um sicherzustellen, dass sich
das Über uns in einem h3-Tag innerhalb der Über uns Seite befindet.
Also, das ist ein weiterer End-to-End-Test, den wir durchführen können,
und Sie haben tatsächlich gesehen, dass der Test direkt vor
Ihren Augen ohne Ihr manuelles Eingreifen durchgeführt wurde.
Ich hoffe, Sie genießen die Durchführung dieser End-to-End-Tests.
Lasst uns etwas ehrgeiziger werden.
Nun, was wir tun werden, ist zu einem bestimmten Gericht zu navigieren
und dann versuchen, einen Kommentar in dieses Gericht einzufügen.
Nun, hier werde ich die Hilfe von Winkelmesser Unterstützung nehmen,
und Sie werden sehen, wie ich einige weitere Methoden von
Winkelmesser verwenden, um zur Teller Seite zu
navigieren, werden wir zum allerersten Gericht in unserem Menü navigieren, indem Sie
den Link zur Schale Detailseite mit dem Parameter bestimmten Gericht,
die ID des jeweiligen Gerichts.
Dann werden wir die Eingabeelemente des Formulars identifizieren,
und dann werden wir automatisch Informationen in
diese Eingabeelemente eingeben und dann versuchen, das Formular zu senden und zu sehen, was passiert.
Also, um diesen Test durchzuführen, wieder,
gehen Sie hinein und verwenden Sie die Jasmin-Syntax,
ich werde hier ein es einführen und dann werde ich identifizieren, was dieser Test zu tun versucht.
Ich würde sagen, „Es sollte einen neuen Kommentar für das erste
Gericht eingeben“ und Pfeilfunktion
und Sie sehen, dass in dieser Pfeilfunktion,
wir gehen, um unsere erste Seite navigateTo,
wir werden zu der dishdetail Null navigieren.
Also, dies ist das erste Gericht in unserer Speisekarte.
Nun, sobald wir auf die dishdetail Seite navigieren, werden wir sagen:
„Lassen Sie NewAuthor ist gleich Seite getElement.“
Also, wir werden das Element finden, das
Eingabe ist und Text hier eingeben,
so dass dies mir helfen wird, das Eingabeelement zu identifizieren, wo der Name des Autors
in der Form eingegeben wird, die wir auf unserer dishdetail Seite erstellt haben.
Wenn Sie neugierig sind,
schauen Sie sich dieses Formular an,
und dann werden Sie sehen, dass es tatsächlich
dieses Eingabeelement in dieser dishdetail-Seite gibt. Wenn
ich darauf zugreife, werde ich den Namen des Autors
in dieses Eingabefeld eingeben.
Hier kommt uns also die Methode der SendKeys, die auf unserem Element unterstützt wird, zu Hilfe,
die von Winkelmesser unterstützte Methode der SendKeys.
Also, hier werde ich den Namen des Autors als Testautor eingeben.
Am Ende dieser beiden Schritte
sollte der Testautor in das Eingabeelement in meinem Formular eingegeben werden.
Jetzt muss ich auch den Kommentar für dieses Formular eingeben.
Wir können auch den Bewertungswert einrichten,
aber ich werde das in diesem speziellen Test nicht tun,
ich werde nur den Kommentarwert mit einem ähnlichen Ansatz eingeben.
Also, ich werde sagen, „let newComment“,
wieder, wird Seite,
getElement, und dann ist dies, wo ich nach
dem Textbereich und newComment,
SendKeys suchen und „Test Comment“ eingeben.
Dies wird also die Wörter Testkommentar in den Textbereich ausfüllen
, der die Kommentare enthält,
die der Autor für dieses bestimmte Gericht einreichen soll.
Danach finden wir den SubmitButton.
Also, um das zu tun, werden wir sagen,
page.getElement Button Typ senden,
und dann, sobald wir halten die Schaltfläche, die wir nur sagen, newSubmitButton.click.
Also, sobald wir auf die Schaltfläche klicken,
wird der Kommentar es erneut einreichen.
Jetzt werde ich eine andere Methode verwenden, die Winkelmesser unterstützt.
Ich werde den Test zu diesem Zeitpunkt pausieren.
Dies wird es mir ermöglichen, den Test zu bestehen und dann den Test oder die Anlage durchzuführen,
so dass dies sagt, der Browser ist undefiniert,
also muss ich hier wieder nach oben gehen und dann den
Browser aus der Protractor Bibliothek dort importieren,
und dann sehen Sie, dass die rote zerquetschige Linie verschwunden ist,
also sollte mein Test alle dort richtig eingerichtet werden.
Also, lassen Sie mich die Änderungen speichern,
wir werden diesen dritten Test auch ausführen,
zusammen mit den verbleibenden zwei Tests, die wir bereits eingegeben haben.
Gehen Sie zum Browser, lassen Sie mich erneut den End-to-End-Test ausführen,
wenn der Browser öffnet, da gehen wir,
der erste Test wurde durchgeführt und das sollte erfolgreich sein,
der zweite Test wurde durchgeführt und der dritte Test, wo wir Gericht Detail navigiert,
und Sie sehen, dass der Testkommentar korrekt von unserem Test eingereicht.
Damit schließen wir diese Übung ab.
In dieser Übung haben Sie drei verschiedene Tests mit Hilfe der Unterstützung von
Winkelmesser durchgeführt und festgestellt, dass unsere Anwendung alle diese drei End-to-End-Tests bestanden hat.
Dies ist ein guter Zeitpunkt für Sie, die Änderungen in
Ihrem Git-Repository mit dem Message-End-to-End-Test zu speichern.