Advertisement
  1. Code
  2. Angular

Erste Schritte mit End-to-End-Tests in Angular mit Protractor

by
Read Time:17 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Protractor ist ein beliebtes End-to-End-Testframework, mit dem Sie Ihre Angular-Anwendung in einem echten Browser testen können, indem Sie die Browserinteraktionen so simulieren, wie ein echter Benutzer damit interagieren würde. End-to-End-Tests sollen sicherstellen, dass sich die Anwendung aus Anwendersicht wie erwartet verhält. Darüber hinaus sind die Tests nicht über die tatsächliche Code-Implementierung besorgt.

Protractor läuft auf dem beliebten Selenium WebDriver, einer API für die Automatisierung und das Testen von Browsern. Zusätzlich zu den Funktionen von Selenium WebDriver bietet Protractor Locators und Methoden zum Erfassen der UI-Komponenten der Angular-Anwendung.

In diesem Tutorial erfahren Sie mehr über:

  • Einrichten, Konfigurieren und Ausführen von Protractor
  • Schreiben grundlegender Tests für Protractor
  • Seitenobjekte und warum Sie sie verwenden sollten
  • Richtlinien, die beim Schreiben von Tests zu beachten sind
  • Schreiben von E2E-Tests für eine Anwendung von Anfang bis Ende

Klingt das nicht aufregend? Das Wichtigste zuerst.

Muss ich Protractor verwenden?

Wenn Sie Angular-CLI verwendet haben, wissen Sie möglicherweise, dass es standardmäßig mit zwei Frameworks zum Testen geliefert wird. Sie sind:

  • Unit-Tests mit Jasmine und Karma
  • End-to-End-Tests mit Protractor

Der offensichtliche Unterschied zwischen den beiden besteht darin, dass ersteres zum Testen der Logik der Komponenten und Dienste verwendet wird, während letzteres verwendet wird, um sicherzustellen, dass die Funktionalität auf hoher Ebene (die die UI-Elemente umfasst) der Anwendung wie erwartet funktioniert.

Wenn Sie mit dem Testen in Angular noch nicht vertraut sind, empfehlen wir Ihnen, Testing Components in Angular Using Jasmine zu lesen, um eine bessere Vorstellung davon zu erhalten, wo die Linie gezogen werden soll. 

Im ersteren Fall können Sie die Leistung der Angular-Testdienstprogramme und von Jasmine nutzen, um nicht nur Komponententests für Komponenten und Dienste, sondern auch grundlegende UI-Tests zu schreiben. Wenn Sie jedoch die Front-End-Funktionalität Ihrer Anwendung von Anfang bis Ende testen müssen, ist Protractor der richtige Weg. Die Protractor-API in Kombination mit Entwurfsmustern wie Seitenobjekten erleichtert das Schreiben besser lesbarer Tests. Hier ist ein Beispiel, um die Dinge ins Rollen zu bringen.

Protractor konfigurieren

Das Einrichten von Protractor ist einfach, wenn Sie Angular-CLI zum Generieren Ihres Projekts verwenden. Die von ng new erstellte Verzeichnisstruktur lautet wie folgt.

Die von Protractor erstellte Standardprojektvorlage hängt von zwei Dateien ab, um die Tests auszuführen: den Spezifikationsdateien, die sich im e2e-Verzeichnis befinden, und der Konfigurationsdatei (protractor.conf.js). Schauen wir uns an, wie konfigurierbar protractor.conf.js ist:

Wenn Sie mit dem Ausführen des Tests in einem Chrome-Webbrowser einverstanden sind, können Sie diesen unverändert lassen und den Rest dieses Abschnitts überspringen.

Einrichten von Protractor mit Selenium Standalone Server

Mit directConnect: true kann Protractor eine direkte Verbindung zu den Browsertreibern herstellen. Zum Zeitpunkt des Schreibens dieses Tutorials ist Chrome jedoch der einzige unterstützte Browser. Wenn Sie Unterstützung für mehrere Browser benötigen oder einen anderen Browser als Chrome ausführen, müssen Sie einen eigenständigen Selenium-Server einrichten. Die Schritte sind wie folgt.

Installieren Sie Protractor global mit npm:

Dadurch wird das Befehlszeilentool für den Webdriver-Manager zusammen mit dem Protractor installiert. Aktualisieren Sie nun den Webdriver-Manager, um die neuesten Binärdateien zu verwenden, und starten Sie dann den eigenständigen Selenium-Server.

Setzen Sie abschließend directConnect: false und fügen Sie die Eigenschaft seleniumAddress wie folgt hinzu:

Die Konfigurationsdatei auf GitHub enthält weitere Informationen zu den in Protractor verfügbaren Konfigurationsoptionen. Ich werde die Standardoptionen für dieses Tutorial verwenden.

Ausführen der Tests

ng e2e ist der einzige Befehl, den Sie benötigen, um die Tests auszuführen, wenn Sie Angular-CLI verwenden. Wenn die Tests langsam erscheinen, liegt das daran, dass Angular den Code jedes Mal kompilieren muss, wenn Sie ng e2e ausführen. Wenn Sie es etwas beschleunigen möchten, sollten Sie Folgendes tun. Liefern Sie die Anwendung mit ng serve aus.

Starten Sie dann eine neue Konsolenregisterkarte und führen Sie Folgendes aus:

Die Tests sollten jetzt schneller geladen werden.

Unser Ziel

Wir werden E2E-Tests für eine grundlegende Pastebin-Anwendung schreiben. Klonen Sie das Projekt aus dem GitHub-Repo.

Beide Versionen, die Ausgangsversion (die ohne die Tests) als auch die endgültige Version (die mit den Tests) sind in separaten Zweigen verfügbar. Klonen Sie vorerst den Starterzweig. Optional können Sie das Projekt ausliefern und den Code durchgehen, um sich mit der vorliegenden Anwendung vertraut zu machen.

Beschreiben wir kurz unsere Pastebin-Anwendung. Die Anwendung lädt zunächst eine Liste von Einfügungen (von einem Mock-Server abgerufen) in eine Tabelle. Jede Zeile in der Tabelle verfügt über eine Schaltfläche zum Einfügen von Ansichten, die beim Klicken ein modales Bootstrap-Fenster öffnet. Das modale Fenster zeigt die Einfügedaten mit Optionen zum Bearbeiten und Löschen der Einfügung an. Am Ende der Tabelle befindet sich eine Schaltfläche "Create Paste" (Einfügen erstellen), mit der Sie neue Einfügungen hinzufügen können.

End-to-End testing using protractor Sample pastebin applicationEnd-to-End testing using protractor Sample pastebin applicationEnd-to-End testing using protractor Sample pastebin application
Die Beispielanwendung.

Der Rest des Tutorials ist dem Schreiben von Protractor-Tests in Angular gewidmet.

Protractor-Grundlagen

Die Spezifikationsdatei, die mit .e2e-spec.ts endet, enthält die eigentlichen Tests für unsere Anwendung. Wir werden alle Testspezifikationen im e2e-Verzeichnis ablegen, da wir Protractor so konfiguriert haben, dass er dort nach den Spezifikationen sucht.

Es gibt zwei Dinge, die Sie beim Schreiben von Protractor-Tests berücksichtigen müssen:

  • Jasmine-Syntax
  • Protractor-API

Jasmine-Syntax

Erstellen Sie zunächst eine neue Datei mit dem Namen test.e2e-spec.ts mit dem folgenden Code.

Dies zeigt, wie unsere Tests mithilfe der Jasmine-Syntax in der Spezifikationsdatei organisiert werden. description(), beforeEach() und it() sind globale Jasminfunktionen.

Jasmine hat eine großartige Syntax zum Schreiben von Tests und funktioniert genauso gut mit Protractor. Wenn Sie Jasmine noch nicht kennen, würde ich empfehlen, zuerst die GitHub-Seite von Jasmine zu lesen.

Der Beschreibung-Block wird verwendet, um die Tests in logische Testsuiten zu unterteilen. Jeder Beschreibung-Block (oder jede Testsuite) kann mehrere IT-Blöcke (oder Testspezifikationen) enthalten. Die tatsächlichen Tests sind in den Testspezifikationen definiert.

"Warum sollte ich meine Tests so strukturieren?" Könnten Sie fragen. Eine Testsuite kann verwendet werden, um eine bestimmte Funktion Ihrer Anwendung logisch zu beschreiben. Zum Beispiel sollten alle Spezifikationen, die sich mit der Pastebin-Komponente befassen, idealerweise in einem Beschreibungsblock mit dem Titel Pastebin-Seite behandelt werden. Obwohl dies zu redundanten Tests führen kann, sind Ihre Tests besser lesbar und wartbar.

Ein Beschreibungsblock kann eine beforeEach()-Methode haben, die vor jeder Spezifikation in diesem Block einmal ausgeführt wird. Wenn der Browser also vor jedem Test zu einer URL navigieren muss, ist es richtig, den Code für die Navigation innerhalb des beforeEach()-Blocks zu platzieren.

Expect-Anweisungen, die einen Wert akzeptieren, sind mit einigen Matcher-Funktionen verkettet. Sowohl der reale als auch der erwartete Wert werden verglichen und ein Boolescher Wert zurückgegeben, der bestimmt, ob der Test fehlschlägt oder nicht.

Protractor-API

Lassen Sie uns jetzt etwas Fleisch darauf legen.

browser.get('/') und element(by.css('. pastebin')).getText() sind Teil der Protractor-API. Lassen Sie uns die Hände schmutzig machen und direkt in das springen, was Protractor zu bieten hat.

Die wichtigsten Komponenten, die von der Protractor API exportiert werden, sind unten aufgeführt.

  1. browser(): Sie sollten browser() für alle Operationen auf Browserebene wie Navigation, Debugging usw. aufrufen.
  2. element(): Dies wird verwendet, um ein Element im DOM basierend auf einer Suchbedingung oder einer Kette von Bedingungen nachzuschlagen. Es gibt ein ElementFinder-Objekt zurück, und Sie können Aktionen wie getText() oder click() darauf ausführen.
  3. element.all(): Hiermit wird nach einem Array von Elementen gesucht, die einer bestimmten Bedingungskette entsprechen. Es gibt ein ElementArrayFinder-Objekt zurück. Alle Aktionen, die in ElementFinder ausgeführt werden können, können auch in ElementArrayFinder ausgeführt werden.
  4. Locators: Locators bieten Methoden zum Suchen eines Elements in einer Angular-Anwendung.

Da wir sehr oft Locators verwenden, sind hier einige der am häufigsten verwendeten Locators aufgeführt.

  • by.css('selector-name'): Dies ist bei weitem der am häufigsten verwendete Locator zum Suchen eines Elements basierend auf dem Namen des CSS-Selektors.
  • by.name('name-value'): Findet ein Element mit einem übereinstimmenden Wert für das Namensattribut.
  • by.buttonText('button-value'): Findet ein Schaltflächenelement oder ein Array von Schaltflächenelementen basierend auf dem inneren Text.

Hinweis: Die Locators by.model, by.binding und by.repeater funktionieren zum Zeitpunkt des Schreibens dieses Tutorials nicht mit Angular 2+-Anwendungen. Verwenden Sie stattdessen die CSS-basierten Locators.

Lassen Sie uns weitere Tests für unsere Pastebin-Anwendung schreiben.

Der obige Code funktioniert und Sie können dies selbst überprüfen. Aber würden Sie sich nicht wohler fühlen, wenn Sie Tests ohne das Protractor-spezifische Vokabular in Ihrer Spezifikationsdatei schreiben würden? Dies ist, worüber ich spreche:

Die technischen Daten erscheinen ohne das zusätzliche Protractor-Gepäck einfacher. Wie habe ich das gemacht? Lassen Sie mich Ihnen Seitenobjekte vorstellen.

Seitenobjekte

Das Seitenobjekt ist ein Entwurfsmuster, das in den Kreisen der Testautomatisierung beliebt ist. Ein Seitenobjekt modelliert eine Seite oder einen Teil einer Anwendung mithilfe einer objektorientierten Klasse. Alle Objekte (die für unsere Tests relevant sind) wie Text, Überschriften, Tabellen, Schaltflächen und Links können in einem Seitenobjekt erfasst werden. Wir können diese Seitenobjekte dann in die Spezifikationsdatei importieren und ihre Methoden aufrufen. Dies reduziert die Codeduplizierung und erleichtert die Wartung des Codes.

Erstellen Sie ein Verzeichnis mit dem Namen page-objects und fügen Sie eine neue Datei mit dem Namen pastebin.po.ts hinzu. Alle Objekte, die mit der Pastebin-Komponente befasst sind, werden hier erfasst. Wie bereits erwähnt, haben wir die gesamte App in drei verschiedene Komponenten unterteilt, und jeder Komponente ist ein Seitenobjekt zugeordnet. Das Namensschema .po.ts ist rein konventionell und Sie können es beliebig benennen.

Hier ist eine Blaupause der Seite, die wir testen.

End-to-End Testing in Angular Blueprint for the Pastebin componentEnd-to-End Testing in Angular Blueprint for the Pastebin componentEnd-to-End Testing in Angular Blueprint for the Pastebin component

Hier ist der Code.

pastebin.po.ts

Lassen Sie uns über das, was wir bisher gelernt haben, gehen. Die API von Protractor gibt Objekte zurück, und wir haben bisher drei Arten von Objekten gefunden. Sie sind:

  • promise.Promise
  • ElementFinder
  • ElementArrayFinder

Kurz gesagt, element() gibt einen ElementFinder zurück und element().all gibt einen ElementArrayFinder zurück. Sie können die Locators (by.css, by.tagName usw.) verwenden, um die Position des Elements im DOM zu ermitteln und an element() oder element.all() zu übergeben.

ElementFinder und ElementArrayFinder können dann mit Aktionen wie isPresent(), getText(), click() usw. verkettet werden. Diese Methoden geben ein Versprechen zurück, das nach Abschluss dieser bestimmten Aktion aufgelöst wird.

Der Grund, warum wir in unserem Test keine Kette von then() s haben, ist, dass Protractor sich intern darum kümmert. Die Tests scheinen synchron zu sein, obwohl dies nicht der Fall ist. Daher ist das Endergebnis eine lineare Codierungserfahrung. Ich empfehle jedoch die Verwendung der async/await-Syntax, um sicherzustellen, dass der Code zukunftssicher ist.

Sie können mehrere ElementFinder-Objekte wie unten gezeigt verketten. Dies ist besonders hilfreich, wenn das DOM mehrere Selektoren mit demselben Namen hat und wir den richtigen erfassen müssen.

Nachdem wir den Code für das Seitenobjekt bereit haben, importieren wir ihn in unsere Spezifikation. Hier ist der Code für unsere ersten Tests.

Organisation von Tests und Refactoring

Tests sollten so organisiert sein, dass die Gesamtstruktur aussagekräftig und unkompliziert erscheint. Hier sind einige Richtlinien, die Sie bei der Organisation von E2E-Tests beachten sollten.

  • Trennen Sie E2E-Tests von Unit-Tests.
  • Gruppieren Sie Ihre E2E-Tests sinnvoll. Organisieren Sie Ihre Tests so, dass sie der Struktur Ihres Projekts entsprechen.
  • Wenn mehrere Seiten vorhanden sind, sollten Seitenobjekte ein eigenes Verzeichnis haben.
  • Wenn die Seitenobjekte einige Methoden gemeinsam haben (z. B. navigierenToHome()), erstellen Sie ein Basisseitenobjekt. Andere Seitenmodelle können vom Basisseitenmodell erben.
  • Machen Sie Ihre Tests unabhängig voneinander. Sie möchten nicht, dass alle Ihre Tests aufgrund einer geringfügigen Änderung der Benutzeroberfläche fehlschlagen, oder?
  • Halten Sie die Seitenobjektdefinitionen frei von Aussagen / Erwartungen. Aussagen sollten innerhalb der Spezifikationsdatei gemacht werden.

Befolgen Sie die obigen Richtlinien, um herauszufinden, wie die Seitenobjekthierarchie und die Dateiorganisation aussehen sollten.

Page object hierarchy and e2e test structure in ProtractorPage object hierarchy and e2e test structure in ProtractorPage object hierarchy and e2e test structure in Protractor

Wir haben bereits pastebin.po.ts und mainPage.e2e-spec.ts behandelt. Hier sind die restlichen Dateien.

Basisseitenobjekt

Seitenobjekt einfügen hinzufügen

End-to-End Testing in Angular Blueprint for the AddPaste componentEnd-to-End Testing in Angular Blueprint for the AddPaste componentEnd-to-End Testing in Angular Blueprint for the AddPaste component
Entwurf für die AddPaste-Komponente

Fügen Sie eine Einfügungsspezifikationsdatei hinzu

Übungen

Es fehlen jedoch einige Dinge: die Tests für die Schaltfläche Ansicht einfügen und das modale Fenster, das nach dem Klicken auf die Schaltfläche angezeigt wird. Ich werde dies als Übung für Sie belassen. Ich werde Ihnen jedoch einen Hinweis geben.

Die Struktur der Seitenobjekte und die Spezifikationen für die ViewPastePage ähneln der der AddPastePage.

End-to-End Testing in Angular Blueprint for ViewPaste componentEnd-to-End Testing in Angular Blueprint for ViewPaste componentEnd-to-End Testing in Angular Blueprint for ViewPaste component
Entwurf für die ViewPaste-Komponente

Hier sind die Szenarien, die Sie testen müssen:

  1. Die ViewPaste-Seite sollte eine Schaltfläche haben und beim Klicken sollte ein modales Fenster geöffnet werden.
  2. Das modale Fenster sollte die Einfügedaten der kürzlich hinzugefügten Einfügung anzeigen.
  3. Im modalen Fenster sollten Sie Werte aktualisieren können.
  4. Die Schaltfläche Löschen sollte funktionieren.

Versuchen Sie, wo immer möglich, die Richtlinien einzuhalten. Wenn Sie Zweifel haben, wechseln Sie zum letzten Zweig, um den endgültigen Entwurf des Codes zu sehen.

Zusammenfassung

Da haben Sie es also. In diesem Artikel haben wir das Schreiben von End-to-End-Tests für unsere Angular-Anwendung mit Protractor behandelt. Wir begannen mit einer Diskussion über Unit-Tests im Vergleich zu e2e-Tests und lernten dann das Einrichten, Konfigurieren und Ausführen von Protractor. Der Rest des Tutorials konzentrierte sich darauf, aktuelle Tests für die Demo-Pastebin-Anwendung zu schreiben.

Bitte teilen Sie mir Ihre Gedanken und Erfahrungen zum Schreiben von Tests mit Protractor oder zum Schreiben von Tests für Angular im Allgemeinen mit. Ich würde sie gerne hören. Danke fürs Lesen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.