UI-Tests für Ionic 3 mit Protractor und Appium

Ionic ist ein beliebtes Frontend-Framework zum Bauen hybrider Apps. Diese Apps können, genauso wie native Apps, auf verschiedene Komponenten des Endgerätes zugreifen und sind wie Web-Apps gleichzeitig plattformübergreifend einsetzbar. Leider vernachlässigt das Framework die Einbindung automatisierter Tests. Im Kapitel Testing your app der Dokumentation wird lediglich beschrieben, wie die App im Browser oder in Emulatoren ausgeführt werden kann, um ihre Funktionalität anschließend manuell zu testen. Zum Glück gibt es aber andere Frameworks, die diese Lücke füllen. Dieser Beitrag beschreibt, wie diese für Ionic aufgesetzt und im Browser sowie auf dem Endgerät zum Laufen gebracht werden.

Hinweis: Im Folgenden wird von einem bestehenden Ionic 3 Projekt ausgegangen. Alle Konsolenbefehle werden in dessen Wurzelverzeichnis ausgeführt.

Protractor aufsetzen

Da Ionic auf Angular basiert, bietet sich als E2E-Test-Framework Protractor an. Protractor wiederum basiert auf WebDriverJS und ergänzt es um Funktionen für die Integration mit Angular. Protractor selbst dient als Test-Runner, welcher mit verschiedenen Test-Frameworks verwendet werden kann. Im Folgenden wird Jasmine verwendet, zur Auswahl stehen aber unter anderem auch Mocha und Cucumber.

Dieser Befehl installiert die Test-Frameworks Protractor und Jasmine sowie einige Abhängigkeiten im Projekt und speichert sie als Dev-Dependencies.

  • jasmine-spec-reporter: Gibt in Echtzeit Testberichte auf der Konsole aus.
  • ts-node: Wird zum Ausführen der in TypeScript verfassten Testspezifikationen benötigt.
  • connect: Middleware-Framework. Wird benötigt, um die Tests im Browser auszuführen. Sollen die Tests ausschließlich auf dem Endgerät ausgeführt werden, kann connect ausgelassen werden.
  • @types: Typendefinitionen für Jasmine und Node.js.

Zur Installation der benötigten Treiber hat Protractor den Webdriver-Manager an Bord. Das Update wird wie folgt ausgeführt:

Mit diesem Setup können UI-Tests im Browser ausgeführt werden. Neben den Testfällen werden dafür lediglich noch zwei Konfigurationsdateien benötigt.

  1. protractor.conf.js (bzw. protractor.browser.conf.js zur späteren Unterscheidung) im Wurzelverzeichnis:
  2. tsconfig.e2e.json im Ordner e2e:
    Diese Einstellungen erweitern die im Wurzelverzeichnis vorhandene tsconfig.json. Wichtig sind hier vor allem die Typendefinitionen mit ihrem Wurzelverzeichnis.

Appium aufsetzen

Natürlich wollen wir unsere App aber nicht vorrangig im Browser testen, sondern auf einem Endgerät. Zur Verbindung zwischen Protractor und dem Betriebssystem des Gerätes dient Appium.

Es wird wie gehabt als Dev-Dependency im Projekt installiert. Damit Appium läuft, muss das System einige Voraussetzungen, wie z. B. korrekt gesetzte Pfadvariablen, erfüllen. Um diese zu überprüfen, kann Appium-Doctor installiert und ausgeführt werden.

Appium-Doctor prüft das System und gibt Hinweise zur Behebung, falls irgendetwas noch nicht passt.

Damit Protractor und Appium zusammenarbeiten, brauchen wir eine entsprechende Konfigurationsdatei. Diese liegt als protractor.android.conf.js im Wurzelverzeichnis.

Damit sich Appium mit dem Android Gerät verbinden kann, müssen hier die Entwickleroptionen freigeschaltet und USB-Debugging aktiviert werden. Ob das Gerät vom Rechner erkannt wird, kann getestet werden, indem es per USB verbunden und in der Konsole folgender Befehl ausgeführt wird:

Bei der erstmaligen Verbindung öffnet sich nun auf dem Gerät ein Popup, das bestätigt werden muss, um den Zugriff des Rechners zu autorisieren. Anschließend sollte es bei der Ausführung des o.g. Befehls in der „List of devices attached“ mit ID und „device“ erscheinen.

Tests ausführen

Als Beispiel soll mit dieser einfachen Spezifikation getestet werden:

Es wird getestet, ob sich die korrekte Anzahl von Ion-Card-Elementen auf der Startseite unserer App befindet und ob der Titel des ersten Elements dem erwarteten Titel entspricht. Referenzen zur Syntax sind bei Jasmine und Protractor nachzulesen.

Zum Ausführen der Tests müssen nun noch folgende Schritte durchgeführt werden:

Im Browser

  1. App bauen, z.B. mit
  2. Protractor mit der Browser-Konfiguration ausführen

Auf dem Gerät

  1. App deployen, z. B. auf das angeschlossene Gerät mit
  2. Appium starten
  3. Protractor mit der Konfiguration für das Gerät starten

Nun öffnet sich entweder ein neues Browserfenster oder die App auf dem Gerät und die Tests werden automatisch durchgeführt. Auf der Testkonsole gibt es folgende Ausgabe:

Geschafft!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.