© Teguh Jati Prasetyo/Shutterstock.com
Teil 2: Testautomation am Beispiel Angular-spezifischer Direktiven

Testautomation mit Protractor


Die komplexen Funktionen und die asynchrone Verarbeitung von AngularJS-Anwendungen sind schwer mit traditionellen Methoden wie Unit- und Integrationstests zu testen. Hier kommen End-to-End-Tests ins Spiel, die Tests über das GUI ausführen. Für AngularJS 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 mit dem Testframework Protractor.

Protractor ist eine Node.js-Anwendung und wird mit dem Node Package Manager über den Befehl npm in­stall -g protractor installiert. Um eine AngularJS-Anwendung wie ein Anwender aus Fleisch und Blut steuern zu können, verwendet Protractor unter anderem Selenium-Server und WebDriverJS. In der Protractor-Installation ist das Tool webdriver-manager enthalten, mit dem der Selenium-Server administriert werden kann. webdriver-manager update installiert alle notwendigen Selenium-Komponenten (Server, WebDriverJS, Chromedriver ...) bzw. führt ein Upgrade auf die aktuellste Version durch, wenn bereits eine Selenium-Installation am System vorhanden ist. Gestartet wird der Selenium-Server mit dem Befehl webdriver-manager start im Terminalfenster.

Automatisierte Tests für Protractor werden im BDD-Format in Test-Suites spezifiziert, wobei eine Testsuite einen oder mehrere Tests enthält. Jede Testsuite wird in einer sogenannten Testspecification (Testspec) gespeichert und von einem BDD-Framework wie zum Beispiel Jasmin ausgeführt. Protractor orientiert sich bei der Durchführung an einer Konfigurationsdatei, die standardmäßig den Namen config.js trägt. In der Minimalvariante sieht die Datei wie folgt aus:

exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['checkHTMLTitle-spec.js'], };

Mit seleniumAddress wird die Adresse des Selenium-Servers definiert. Der Server muss zum Zeitpunkt der Testdurchführung bereits gestartet sein. specs gibt den Namen der Specs an, die gestartet werden sollen. Es kann auch ein Muster verwendet werden (z. B. spec/*_spec.js). Das Muster bezieht sich immer relativ zum Speicherort der Konfigurationsdatei. Gestartet werden die Tests im Terminalfenster durch den Befehl protractor config.js.

So, genug Rückblick. Starten wir Teil 2 und beantworten als Erstes die wichtigste Frage bei der Testautomation von GUI-Anwendungen: Wie findet Protractor die HTML-Elemente am Bildschirm?

Locators

Im Mittelpunkt jedes automatisierten GUI-Tests steht das Finden der jeweiligen Bildschirmelemente, um diese ansteuern zu können. Bei Tests von Weboberflächen bedeutet das, dass das jeweilige Testautomationstool die HTML-Elemente der Website im DOM finden muss. Selenium verwendet dazu sogenannte Locators, um mit den HTML-Elementen im DOM umgehen zu können. Umgehen bedeutet in diesem Fall: Finden anhand von HTML Properties, Eingeben von Daten, Auswählen von Werten in Checkboxen und Wertelisten, Auslösen von Ereignissen via Click oder Ähnliches.

Die wichtigsten Locators sind ID, Name, Link, XPath und CSS. Nachfolgend zeigen wir am Beispiel eines typischen Log-in-Dialogs die Verwendung (Listing 1). Die Log-in-Maske besteht aus zwei Eingabefeldern (Username und Passwort) und einem Log-in-Button. Wir beschränken uns auf die Erklärung der HTML Properties id und name, da sie die gebräuchlichsten sind.

Listing 1: HTML-Code der Log-in-Maske

<html> <body> <form id="loginForm"> <input id="username" type="text"/> <input id="password" type="password"/> <input name="loginButton" type="submit" value="log in"/> </form> </body> </html>

Die bevorzugte Variante ist es, die HTML-Elemente über die HTML Property id zu ermitteln. Das ist auch die performanteste Variante. Das HTML-Element userName wird wie folgt definiert und verwendet:

// Definition WebElement userName = driver.findElement(By.id("username")); // Verwendung userName.sendKeys("maxMustermann")

In manchen Fällen kann die ID nicht verwendet werden, da sie zum Beispiel dynamisch von einem JavaScript-Framework bei jedem Seitenaufruf neu generiert wird. Als Alternative wird die HTML Property Name verwendet, um ein HTML-Element zu finden. Das HTML-Element für den Log-in-Button wird wie folgt definiert und verwendet:

// Definition WebElement login= driver.findElement(By.name("loginButton")); // Verwendung login.click();

Soweit eine Einführung in Locators und deren Verwendung in Selenium. Schauen wir nun, wie Protractor die HTML-Elemente am Bildschirm findet und verwendet.

Locators mit Protractor

Nachdem der Leser dieser Artikelserie bereits weiß, dass Protractor für seine Arbeit Selenium verwendet, liegt es auf der Hand, dass für Protractor auch die Selenium Locators verwendet werden können. Protractor kann aber mehr – viel mehr. Und genau dieses „viel mehr“ macht Protractor so mächtig im Zusammenspiel mit AngularJS. Protractor kann Angular-spezifische Direktiven wie zum Beispiel ng-model, ng-bind und ng-repeat verwenden, um die HTML-Elemente im DOM zu finden. Auf die Besonderheit dieser Direktiven gehen wir nicht weiter ein, da dieses den Umfang des Artikels sprengen würde.

Die „element“-Funktion

Aufgrund der asynchronen Arbeitsweise von AngularJS bedarf es einer anderen Vorgehensweise als bei Selenium. Protractor berücksichtigt, dass jede Interaktion asynchron verarbeitet wird und Promises zurückgeliefert werden. Es stellt eine globale Funktion mit dem Namen element zur Verfügung, an die ein Locator übergeben wird und die das gesuchte HTML-Element zurückliefert. In weiterer Folge sind nun auf dieses HTML-Element bestimmte Methoden wie click(), getText() und sendKeys() anwendbar. Diese Methoden ermöglichen die Interaktion mit dem HTML-Element. Listing 2 zeigt wieder am Beispiel eines in AngularJS geschriebenen Log-in-Dialogs die Verwendung.

Listing 2: Log-in-Maske in AngularJS

<div ng-show="!loggedIn"> <h1>Angler Tagebuch / Melden Sie sich bitte an!</...

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