©blossomstar/Shutterstock.com
Teil 1: End-to-End-Testautomation von AngularJS-Applikationen

Testautomation mit Protractor


Für SPA, die auf AngularJS basieren, ist Protractor das Maß aller Dinge im Bereich Testautomation von End-to-End-Tests. Diese dreiteilige Artikelserie beschäftigt sich mit der Testautomation von AngularJS-Anwendungen mithilfe des Testframeworks Protractor.

Single Page Applications (SPA) sind die erste Wahl, wenn es darum geht, moderne und einfach zu bedienende Benutzeroberflächen zu erstellen. Dafür müssen SPA eine Vielzahl von Diensten integrieren. Ohne Anbindungen an externe und interne APIs und Datenbanksysteme sind heute benötigte Features nicht realisierbar. All diese komplexen Funktionen und asynchronen Verarbeitungen sind sehr schwer oder sogar völlig unmöglich mithilfe von traditionellen Methoden wie Unit- und Integrationstests zu testen. Hier kommen End-to-End-Tests ins Spiel. Damit wird unsere Anwendung als Ganzes getestet und dafür gesorgt, dass alles wie erwartet funktioniert. Die gesamte Applikation – von der Benutzeroberfläche bis hin zu den einzelnen Subsystemen – muss hier geprüft werden.

Single Page Applications (SPA)

Eine SPA ist im Grunde genommen eine einzelne Webseite, die auf clientseitigen Webtechnologien basiert. Hauptsächlich kommen dabei JavaScript, HTML und CSS zum Einsatz, die Verbindung zum Backend findet über asynchrone Aufrufe von APIs statt. Das Besondere an SPA ist die Tatsache, dass das clientseitige JavaScript das Handling des Browsers übernimmt und bei Bedarf weitere Seiten und Daten automatisch asynchron nachlädt (Abb. 1). Das bedeutet, dass das Verhalten des Browsers von der SPA selbst gesteuert wird.

groetz_protractor_1.tif_fmt1.jpgAbb. 1: Lifecycle von Single Page Applications (SPA)

SPA weisen eine gute Architektur auf, wenn sie Logik und Darstellung sauber trennen. Meistens kommt dafür das MVC-Pattern zum Einsatz. Durch die Trennung ergeben sich einige Vorteile, u. a. verringerte Komplexität und gesteigerte Testbarkeit. Google-Produkte wie Google Mail, Google Drive und Google Kalender sind „klassische“ Single Page Applications. Das ist auch der Grund, warum zum Beispiel beim Start von Google Mail ein Fortschrittsbalken angezeigt wird, da vorab die Daten vom Server geholt werden und das „Rendering“ clientseitig stattfindet (Abb. 2).

groetz_protractor_2.tif_fmt1.jpgAbb. 2: Google Mail – eine typische SPA

AngularJS vs. Angular 2 vs. Angular 4

Für die Entwicklung von SPA ist seit Längerem AngularJS [1] (oft auch als Angular.js oder AngularJS 1.x bezeichnet) das Maß aller Dinge. AngularJS ist ein Open-Source-JavaScript-Framework, das von Google­ entwickelt wurde und sich einer großen Community erfreut. Angular [2] (oft auch als Angular 2+ oder Angular 2 bezeichnet) ist im Gegensatz dazu ein Type­Script-basiertes Open-Source-JavaScript-Framework, das ebenfalls von Google entwickelt wurde. Angular 2 ist die komplett überarbeitete Version von AngularJS und hat zum größten Teil neue Konzept und Ansätze im Angebot.

Der offensichtlichste Unterschied liegt wohl in der Sprache, in der das Framework entwickelt wird. Das Google-Team hat sich entschieden, Angular 2 in Type­Script zu schreiben. Dies ermöglicht strikte Typisierung, was enorm zur Wartbarkeit von Projekten beiträgt. Neuerungen wie Decorators (ähnlich wie Annotations), Klassen und Interfaces werden viele Entwickler aus Programmiersprachen wie Java und C# viel leichter abholen. Angular verwendet semantische Versionierung, die erfordert, dass die Hauptversion erhöht wird, wenn Änderungen eingeführt wurden, die Features der vorherigen Version brechen. Mit Angular 4 gab es unter anderem einige Verbesserungen, die nicht rückwärtskompatibel sind. In dieser Artikelserie beschäftigen wir uns jedoch nur mit AngularJS.

Protractor meets AngularJS End-to-End-Test

Für das automatisierte Testen von AngularJS-Anwendungen stellt Google mit Protractor ein mächtiges End-to-End-Testframework zur Verfügung, das auf die Besonderheiten von AngularJS abgestimmt ist. Protractor ist in Node.js geschrieben und entwickelt seine vollen Fähigkeiten in Zusammenarbeit mit Selenium, WebDriver und diversen BBD-Frameworks wie Jasmine und Cucumber. Die Tests führt Protractor am echten Browser aus, wobei Selenium und WebdriverJS als Bindeglied dienen, um Chrome, Firefox und IE zu steuern. Hybride Apps können via Appium, der mobilen Variante von Selenium, auf Emulatoren und echten Geräten automatisiert getestet werden.

Protractor unterstützt AngularJS-spezifische Locators (Kasten: „Locators“) wie u. a. ng-model, ng-binding und ng-repeat. Es werden aber auch die bekannten WebDriver Locators unterstützt.

Waiting Game

Mit AngularJS kommt eine elegante Lösung, die es nicht mehr notwendig macht, explizite „Waits“ und „Sleeps“ in den Tests zu verwenden. Mit der Anweisung browser.waitForAngular() wird dem berüchtigten „Waiting Game“ [3] der Testautomation ein Ende gesetzt. waitForAngular ist in der offiziellen Doku wie folgt beschrieben: „[…] Instruct webdriver to wait until Angular has finished rendering and has no outstanding $http or $timeout calls before continuing. Note that Protractor automatically applies this command before every WebDriver action […]“ [4]. Verantwortlich dafür sind Event Handler in Angular, über die Protractor in beide Richtungen Informationen mit der Anwendung austauscht.

Protractor meets BDD-F...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang