Wenn die Komplexität und Größe einer Anwendung zunimmt, ist es unpraktisch, sich auf manuelle Tests der Zuverlässigkeits-, Fehleraufnahme- und Regressionstests neuer Merkmale zu stützen.
Um dieses Problem zu lösen, haben wir den Angular -Szenario -Läufer festgelegt, um die Benutzeroperationen nachzuahmen und uns dabei zu helfen, die Robustheit von Winkelanwendungen zu überprüfen.
1. Zusammenfassung
Wir können Szenario -Tests in JavaScript schreiben, um das Verhalten unserer Anwendung zu beschreiben und mit bestimmten Zuständen zu interagieren. Ein Szenario besteht aus einem oder mehreren "IT" -Sblöcken (wir können diese als Anforderungen für unsere Anwendung behandeln), die wiederum von Befehlen und Erwartungen bestehen. Der Befehl teilt dem Läufer an, etwas in der Bewerbung zu tun (z. B. zu einer Seite zu gehen oder auf eine Schaltfläche zu klicken), und die Erwartung sagt dem Läufer, etwas über den Zustand zu beurteilen (z. B. den Wert einer bestimmten Domäne oder der aktuellen URL). Wenn eine Erwartung fehlschlägt, markiert Runner dies "IT" als "falsch" und setzt dann mit dem nächsten "IT" fort. Das Szenario kann auch "Beforeach" und "Afterach" -Blockungen haben, die vor oder nach jedem "IT" -Block ausgeführt werden, unabhängig davon, ob es vergeht oder nicht.
Zusätzlich zu den oben genannten Elementen kann das Szenario auch Helferfunktionen enthalten, um einen doppelten Code im "IT" -Block zu vermeiden.
Hier ist ein einfaches Szenario -Beispiel:
beschreiben ('Buzz Client', function () {it ('sollte Ergebnisse filtern', function () {input ('user'). Enter ('JackSparrow'); Element (': button'). click (); erwartete (Repeater ('ul li'). count ()). Toqual (10); Eingabe ('Filtertext'. Enter ('ENTER (' ENTER ('BEES'); li '). count ()).Dieses Szenario beschreibt die Anforderungen des Netzwerk -Clients und sollte explizit die Möglichkeit haben, Benutzer zu filtern. Es beginnt mit der Eingabe eines Wertes in das Eingabefeld „Benutzer“, klickt auf die einzige Schaltfläche auf der Seite und überprüft, ob es eine Liste von 10 Elementen gibt. Anschließend werden "Bienen" in das Eingabefeld von "Filtertext" eingelegt und dann überprüft, ob die Liste auf nur ein Element reduziert wird.
Das folgende API -Kapitel listet den Befehl und die Erwartung in Läufer auf.
2. API
Quellcode: https://github.com/angular/angular.js/blob/master/src/ngscenario/dsl.js
Pause()
Pause die Ausführung des Tests, bis wir Lebensume () in der Konsole aufrufen (Sie können auch auf den Link zur Lebenslauf in der Läuferschnittstelle klicken).
Schlaf (Sekunden)
PAUSE TEST -Ausführung für n Sekunden.
Browser (). Navigateto (URL)
Laden Sie die angegebene URL im SetFrame.
Browser (). Navigateto (URL, FN)
Laden Sie die von FN zurückgegebene URL im Testrahmen. Der URL -Parameter hier wird einfach als Testausgabe verwendet. Diese API kann verwendet werden, wenn die Ziel -URL dynamisch ist (die Adresse ist beim Schreiben von Tests noch nicht bekannt).
Browser (). Reload ()
Aktualisieren Sie die aktuell geladene Seite im Testrahmen.
browser (). window (). href ()
Kehren Sie zum Window.location.href der aktuellen Seite des Testrahmens zurück.
browser (). window (). path ()
Gibt die Fenster zurück.
browser (). window (). suche ()
Kehren Sie zum Window.location.Search der aktuellen Seite des Testrahmens zurück.
browser (). window (). Hash ()
Gibt die aktuelle Seite des Testrahmens zurück.
Browser (). Ort (). url ()
Geben Sie das Ergebnis von $ location.url () der aktuellen Seite zurück (http://docs.angularjs.org/api/ng.$location)
Browser (). Ort (). Path ()
Geben Sie das Ergebnis von $ location.path () der aktuellen Seite (http://docs.angularjs.org/api/ng.$location) zurück.
Browser (). Ort (). Search ()
Geben Sie das Ergebnis von $ location der aktuellen Seite zurück. Search () (http://docs.angularjs.org/api/ng.$Location)
Browser (). Ort (). Hash ()
Geben Sie das Ergebnis von $ Standort zurück. Hash () der aktuellen Seite (http://docs.angularjs.org/api/ng.$location)
erwarten (Zukunft). {Match}
Bestimmt, ob der angegebene zukünftige Wert den Matcher erfüllt. Alle API -Erklärungen geben ein zukünftiges Objekt mit einem angegebenen Wert zurück, der nach ihrer Ausführung erhalten wurde. Der Matcher wird mit Angular.scenario.Matcher definiert und verwendet den Wert von Futures, um die Erwartung auszuführen. Zum Beispiel:
erwarten (browser () .location () .href ()) .toEqual ('http://www.google.com');
erwarten (future) .not (). {Match}
Bestimmt, ob der Wert einer bestimmten Zukunft das Gegenteil der erwarteten Erwartungen des angegebenen Matchers ist.
Verwenden Sie (Selektor, Etikett)
Scopes Die nächste Auswahl des DSL -Elements. (Vermutlich begrenzt der Umfang des Selektors, Etikettenschätzungen werden zum Testen der Ausgabe verwendet.)
Beispiel:
Verwenden Sie ('#foo', "'foo' Textfeld"). Input ('Bar')
Bindung (Name)
Gibt die erste Bindung zurück, die dem angegebenen Namen entspricht (möglicherweise in Bezug auf NG-Bind).
Eingabe (Name) .Enter (Wert)
Geben Sie den angegebenen Wert in das angegebene Formularfeld des Namens ein.
Eingabe (Name) .Check ()
Wählen Sie das Kontrollkästchen des angegebenen Namens aus oder deaktivieren Sie.
Eingabe (Name) .Select (Wert)
Wählen Sie input [type = ”radio”] mit dem angegebenen Radio -Medianwert des Namens.
Eingabe (Name) .val ()
Gibt den aktuellen Wert der Eingabe des angegebenen Namens zurück.
Repeater (Selector, Etikett) .count ()
Gibt die Anzahl der Zeilen des Repeaters zurück, der dem angegebenen Selektor (JQuery Selektor) entspricht. Etikett wird nur als Testausgabe verwendet.
Repeater ('#Produkttabelle', 'Produktliste'). count () // Anzahl der Zeilen
Repeater (Selector, Etikett) .Row (Index)
Gibt ein Array zurück, wobei die im Repeater angegebenen Zeilen mit dem angegebenen Index angegeben sind. Etikett wird nur zum Testen der Ausgabe verwendet.
Repeater ('#Produkttabelle', 'Produktliste'). Zeile (1) // Alle Bindungen in Zeile als Array
Repeater (Selector, Etikett) .Column (Bindung)
Gibt ein Array mit dem Wert der Spalte im Repeater zurück, der der angegebenen Bindung entspricht, die dem angegebenen Selektor (JQuery Selektor) entspricht. Etikett wird nur zum Testen der Ausgabe verwendet.
Repeater ('#Products Table', 'Produktliste'). Spalte ('product.name') // Alle Werte über alle Zeilen in einem Array hinweg
Select (Name) .Option (Wert)
Wählen Sie die Option aus, um den Wert in der Auswahl des angegebenen Namens auszuwählen.
select (name) .option (value1, value2)
Wählen Sie die Option (Multiple Choice) des angegebenen Wertes im ausgewählten Namen des angegebenen Namens aus.
Element (Selector, Etikett) .count ()
Gibt die Anzahl der Elemente zurück, die dem angegebenen Selektor entsprechen. Etikett wird nur als Testausgabe verwendet.
Element (Selector, Etikett) .click ()
Klicken Sie auf das Element, das mit dem angegebenen Selektor übereinstimmt. Etikett wird nur als Testausgabe verwendet.
Element (Selector, Etikett) .Query (FN)
Führen Sie das angegebene FN (SelectectedElementElements) aus, und ausgewählt ist der Satz von Elementen, die mit dem angegebenen Selektor übereinstimmen. Und erledigt ist eine Funktion, die nach der Ausführung der FN ausgeführt wird. Etikett wird nur als Testausgabe verwendet.
Element (Selector, Etikett). {Methode} ()
Gibt den Rückgabewert der Ausführung der Methode auf dem Element zurück, das dem angegebenen Selektor entspricht. Die Methode kann die folgenden JQuery -Methoden sein: Val, Text, HTML, Höhe, Innerheight, Außenhöhe, Breite, Innerbreite, Außenbreite, Position, Scrolllelft, Scrolltop, Offset. Etikett wird nur als Testausgabe verwendet.
Element (Selector, Etikett). {Methode} (Wert)
Führen Sie die angegebene Methode im Element aus, das dem angegebenen Selektor entspricht, und verwenden Sie den Schlüssel und den Wert als Parameter. Die Methode kann die folgenden JQuery -Methoden sein: Val, Text, HTML, Höhe, Innerheight, Außenhöhe, Breite, Innerbreite, Außenbreite, Position, Scrolllelft, Scrolltop, Offset. Etikett wird nur als Testausgabe verwendet.
Element (Selector, Etikett). {Methode} (Schlüssel)
Gibt das Ergebnis der Ausführung einer angegebenen Methode auf dem Element zurück, das dem angegebenen Selektor entspricht. Diese Methoden können die folgenden JQuery -Methoden sein: Attr, Prop, CSS. Etikett wird nur als Testausgabe verwendet.
Element (Selector, Etikett). {Methode} (Schlüssel, Wert)
Führen Sie die Methode im Element aus, das dem angegebenen Selektor entspricht, und nehmen Sie den Schlüssel und den Wert als Parameter. Diese Methoden können die folgenden JQuery -Methoden sein: Attr, Prop, CSS. Etikett wird nur als Testausgabe verwendet.
JavaScript ist eine dynamisch typisierte Sprache, die leistungsstarke Ausdrücke bringt, aber sie gibt uns auch wenig Hilfe vom Compiler. Daher sind wir der festen Überzeugung, dass jeder in JavaScript geschriebene Code viele und umfassende Tests erfordert. Angular verfügt über viele Funktionen, die es uns erleichtern, unsere Anwendungen zu testen. Wir haben also keine Entschuldigung, keine Tests zu schreiben. (-_- !!)
Das obige ist eine Sammlung von Informationen über AngularJS E2E -Tests. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!