Im vorherigen Artikel habe ich über Unit -Tests von NG gesprochen. Heute werde ich über E2E (End-to-End) -Tests sprechen.
Wenn wir einen einzelnen Funktionspunkt eines bestimmten Moduls testen, ist die Einheitenprüfung am besten geeignet. Wenn jedoch ein Fehler auftritt, wenn ein Benutzer mit mehreren Seiten interagiert, funktioniert Unit -Tests nicht. Zu diesem Zeitpunkt muss E2E verwendet werden, um Benutzeroperationen zu simulieren und die Problemstelle wiederherzustellen. Die Verwendung des E2E -Tests kann natürlich auch die Robustheit des Programms testen. Viele Dinge, die Unit -Tests nicht durch E2E -Tests durchgeführt werden können.
Zuvor verwendete NG Angular -Szenario -Läufer, um E2E -Tests durchzuführen, und jetzt wurde es durch den Provractor ersetzt, um E2E zu betreiben.
Winkelmesser
Der Prognraktor ist ein Gerüst, das in AngularJs verwendet wird, um E2E zu testen. Es selbst ist ein NPM -Modul und basiert auf WebdriverJs. Der Prospraktor kann es Ihren Testfällen wirklich ermöglichen, im Browser auszuführen und das eigentliche Verhalten der Benutzer vollständig zu simulieren.
Hier sind einige seiner Ressourcenadressen:
1. Test -API, die durch Prospraktor zur Verfügung gestellt wird
2. Einfaches Gebrauchsbeispiel für den Prospraktor
3. Die Webdriverjs-Handbuch ist der Kern der Prognaktorabhängigkeit. Das NPM-Modul wird als Selenium-WebDriver bezeichnet
Prinzip des Proteraktorbetriebs
Der Provractor hängt von den folgenden Dingen ab, um E2E -Tests durchzuführen:
1. Webdriver APIs, die oben erwähnte WebdriverJs sind, sind verwandte JS-APIs, die von Selenium mit Front-End-Tests bereitgestellt werden.
2. Selenium Server, ein Backend -JAR -Paket, wird verwendet, um mit dem Browser -Treiber zu kommunizieren
3. Webdriver -Browser -Treiber werden verwendet, um echte Website -Inhalte anzuzeigen und mit Selenium Server zu kommunizieren. Dies ist der Ort, an dem echte Browseroperationen weitergegeben werden können.
Der gesamte Betriebsprozess ist wie folgt
Wenn Sie mehr über die vorherigen Interaktionen dieser Komponenten erfahren möchten, klicken Sie bitte hier
Verwenden Sie das NG Seed Project, um E2E zu erklären
Wir verwenden das von NG bereitgestellte Saatgutprojekt, um ein echtes E2E -Beispiel zu erklären. Verwenden Sie zunächst den folgenden Befehl, um das Saatgutprojekt zu erhalten
Die Codekopie lautet wie folgt:
Git Clone https://github.com/angular/angular-seed.git
Dann rennen
Die Codekopie lautet wie folgt:
NPM Installation
Installieren Sie alle Abhängigkeiten im Zusammenhang mit
Hier sprechen wir zuerst über die Konfigurationsdatei, die zum Ausführen des E2E -Tests erforderlich ist. Sie können sehen, dass die Datei Test/Proteractor-conf.js zum Konfigurieren der damit verbundenen Funktionen verwendet wird. Konzentrieren wir uns auf mehrere Attribute
1.Specs repräsentiert den Pfad der zu ausgeführten Testdatei, und der hier geschriebene ist e2e/*. Js
2.Baseurl repräsentiert die Stammadresse des Seitensprung zwischen Browsern in der Testdatei
3. Die Funktionen stellen dar
Die Codekopie lautet wie folgt:
Funktionen: {{
'BrowSername': 'Chrome'
}
Framework stellt dar
Wenn Sie mehr über diese Konfigurationsdatei erfahren möchten, klicken Sie hier, um sie anzuzeigen.
Nachdem wir über die Konfigurationsdatei gesprochen haben, schauen wir uns den Weg zum Schreiben von Testfällen an und veröffentlichen zuerst ein Beispiel auf der offiziellen Website.
Die Codekopie lautet wie folgt:
"Strikte";
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md *//////
beschreiben ('my App', function () {
Browser.get ('index.html');
IT ("sollte automatisch nach /view1, wenn der Standort -Hash /Fragment leer ist", function () {
erwarten (browser.getLocationAbsurl ()). Tomatch ("/view1");
});
beschreiben ('view1', function () {
voran (function () {
browser.get ('index.html#/view1');
});
IT ('sollte Ansicht 1 rendern, wenn der Benutzer zu /view1', function () {navigiert
erwarten (element.all (by.css ('[ng-view] p')). first (). getText ()).
Tomatch (/partiell für Ansicht 1/);
});
});
beschreiben ('view2', function () {
voran (function () {
Browser.get ('index.html#/view2');
});
IT ('sollte Ansicht 2 rendern, wenn der Benutzer zu /view2', function () {navigiert
erwarten (element.all (by.css ('[ng-view] p')). first (). getText ()).
Tomatch (/partiell für Ansicht 2/);
});
});
});
Erstens ist die obige Syntax die vom Jasmine -Framework unterstützte Schreibmethode. Wenn Sie die Verwendung nicht verstehen, können Sie hier klicken
Hier sprechen wir nur über einige gängige Methoden und Eigenschaften, die vom Prospraktor im obigen Beispiel bereitgestellt werden
1.Browser, ein globales Objekt, repräsentiert eine Instanz des aktuellen Browsers. Die häufig verwendete GET -Methode wird verwendet, um die Adressänderung des Browsers zu implementieren.
2. Element, globales Objekt, bietet Funktionen wie JQuery, die für die Suche nach Dokumentenelementen verantwortlich sind, und werden häufig bei der gemeinsamen Verwendung durch Objekte verwendet.
3.By, Global Object, bietet einen Auswahltyp. Beispielsweise finden Sie ein Element über CSS, Modell, Bindung und andere Merkmale.
Für die Methode des Elements und nach finden Sie in der oben genannten Dokumentation der API -Dokumentation des Proteractors
Trotzdem ist es Zeit, die obigen Testfälle auszuführen, der Befehl ist relativ einfach
Die Codekopie lautet wie folgt:
NPM Run Update-WebDriver ausführen
Dies ist verantwortlich für das Herunterladen der entsprechenden Browser-Treiber und der lokalen JAR-Pakete von Selen-Server. Im Allgemeinen schlägt dies fehl, da beide Ressourcen auf dem Google -Server enthalten sind und mit dem Browser die Wand zum separaten herunterladen können. Die Adresse lautet wie folgt:
1. Chrome -Treiberadresse, im Allgemeinen die Chromedriver_2.9.zip -Datei herunterladen.
2. Laden Sie das lokale JAR-Paket von Selenium-Server herunter und laden Sie die Selenium-Server-Standalone-2.40.0.jar-Datei im Allgemeinen herunter.
Kopieren Sie dann den Selen-Server in den Selen-Ordner im Prospractor-Paket. Wenn der obige Befehl zeitlich abgerechnet wird, wird die Datei hier angezeigt, aber sie ist leer, ersetzen Sie sie einfach direkt. Sie müssen die Datei auch nach Dekompression von chromedriver_2.9zip auf hier kopieren.
Führen Sie schließlich den folgenden Befehl aus, um die Testergebnisse anzuzeigen
Die Codekopie lautet wie folgt:
NPM Run Prospractor
Wenn Sie mehr über die Befehlszeile im NG Seed -Projekt erfahren möchten, können Sie hier klicken, um sie anzuzeigen
Zusammenfassen
Der NG E2E -Test ist viel komplizierter als die Einheitstestkonfiguration, kann jedoch viele Dinge tun. Wenn Sie es sehr wert sind, können Sie es auch versuchen. Wenn Sie Fragen haben, können Sie auf die Kommentare antworten.