{"id":3001,"date":"2022-07-04T10:44:01","date_gmt":"2022-07-04T10:44:01","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?p=3001"},"modified":"2022-07-19T11:51:15","modified_gmt":"2022-07-19T11:51:15","slug":"testautomatisierung-in-angular-webprojekten-was-kommt-nach-protractor","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/testautomatisierung-in-angular-webprojekten-was-kommt-nach-protractor\/","title":{"rendered":"Testautomatisierung in Angular-Webprojekten \u2013 Was kommt nach Protractor?"},"content":{"rendered":"\n

Der K\u00f6nig ist tot, es lebe der K\u00f6nig! Aber welcher? Nachdem das Team von Angular im April angek\u00fcndigt hat, die Entwicklung seines e2e-Testing-Frameworks Protractor<\/em> Ende 2022 einzustellen<\/a>, stellt sich f\u00fcr viele Entwicklerinnen und Entwickler nun die Frage, wie es weiter geht. Welches Tool zur Testautomatisierung sollte man verwenden? Der Markt h\u00e4lt hierf\u00fcr zahlreiche Alternativen bereit, von denen einige in diesem Beitrag beleuchtet werden sollen.<\/p>\n\n\n\n

\"Symbolic<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Die Testkandidaten<\/strong><\/h2>\n\n\n\n

Cypress<\/strong><\/h3>\n\n\n\n

Bei Cypress handelt es sich wohl um den bekanntesten Kandidaten im Testfeld. Laut einer Umfrage in der Angular Community vom Januar 2021 handelt es sich mit \u00fcber 60% der Stimmen um das am weitesten verbreitete Tool f\u00fcr automatisierte UI-Tests. Das erste Stable-Release erschien bereits 2017, gegenw\u00e4rtig befindet sich die Anwendung in Version 10. Cypress beschreibt sich selbst als schnell, einfach und verl\u00e4sslich und setzt dabei auf ein eigenes \u00d6kosystem an Tools, das im Gegensatz zu Protractor <\/em>unabh\u00e4ngig von Selenium und WebDriver ist. Unterst\u00fctzt werden derzeit Chrome, Firefox und Edge, jedoch (noch) nicht Safari. Die M\u00f6glichkeit, die Tests gegen verschiedene Browser-Versionen auszuf\u00fchren, kann durch die Anbindung von BrowserStack oder durch das Austauschen der Binaries f\u00fcr die lokale Ausf\u00fchrung erreicht werden.<\/p>\n\n\n\n

Pro<\/td>Contra<\/td><\/tr>
+ schnell
+ stabil
+ gro\u00dfe Community
+ umfangreiche, verst\u00e4ndliche Dokumentation<\/td>		–        Noch kein Support f\u00fcr Safari<\/td><\/tr><\/tbody><\/table>
Tabelle 1: Vor- und Nachteile des Tools Cypress<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Playwright<\/strong><\/h3>\n\n\n\n

Das seit 2020 von Microsoft entwickelte Playwright stellt den j\u00fcngsten Kandidaten im Feld der Automatisierungstools dar. Laut eigener Beschreibung soll die Bibliothek aktuell, schnell, zuverl\u00e4ssig und leistungsf\u00e4hig sein, um g\u00e4ngige Probleme des UI-Testens wie Flakiness und langsame Ausf\u00fchrungsgeschwindigkeiten zu beseitigen. Mit dieser Zielsetzung im Hintergrund verwundert es nicht, dass Playwright im Gegensatz zu den anderen Testing-Tools nicht auf Selenium Webdriver aufsetzt, sondern \u00fcber eine eigene Implementierung zur Browser-Steuerung verf\u00fcgt. Unterst\u00fctzt werden dabei die aktuellen Browser Engines von Chromium, Firefox und WebKit, jeweils auf Windows, Linux und MacOS. \u00c4ltere Versionen k\u00f6nnen unter Verwendung \u00e4lterer Playwright-Versionen eingebunden werden, seit Kurzem k\u00f6nnen auch generische Chromium-Builds (Edge und Chrome) verwendet werden. Support f\u00fcr Mobilger\u00e4te ist aktuell nur per Emulation bestimmter Ger\u00e4tekonfigurationen wie Aufl\u00f6sung und User-Agent m\u00f6glich, ein Testen auf echten Ger\u00e4ten ist derzeit nicht m\u00f6glich.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Das Feature Set umfasst neben Standardoperationen auch Funktionen, die in anderen Frameworks fehlen oder nur per Workaround realisiert werden k\u00f6nnen. So stehen neben Clicks, Scrolling, Selections usw. auch Drag-and-Drop, Interaktionen im Shadow-Dom und Synchronisierung mit Animationen zur Verf\u00fcgung.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Im Hinblick auf Performance und Ausf\u00fchrungsgeschwindigkeit verh\u00e4lt sich Playwright wesentlich schneller als Protractor und andere seleniumbasierte Testframeworks. In unseren Tests konnten wir auch bei mehreren Testinstanzen im Parallelbetrieb keine Probleme in Hinblick auf Flakiness oder unerwartete Abbr\u00fcche feststellen. Abschlie\u00dfend l\u00e4sst sich sagen, dass Microsoft mit Playwright ein modernes und auf die Anforderungen modernen UI-Testings ausgerichtetes Framework vorgelegt hat, das trotz seiner kurzen Zeit am Markt bereits viele F\u00fcrsprecher gewonnen hat und wohl auch in Zukunft noch an Bedeutung gewinnen wird.<\/p>\n\n\n\n

Pro<\/td>Contra<\/td><\/tr>
+ schnell
+ stabil
+ gro\u00dfes Featureset<\/td>		–        Aktuell nur eingeschr\u00e4nkter Support f\u00fcr BrowserStack
–        Kein Support f\u00fcr echte Mobilger\u00e4te<\/td><\/tr><\/tbody><\/table>
Tabelle 2: Vor- und Nachteile des Tools Playwright<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Webdriver.io<\/strong><\/h3>\n\n\n\n

Webdriver.io ist mit \u00fcber sieben Jahren am Markt eines der langlebigsten Automatisierungstools im Testfeld. Die Macher beschreiben das Design ihres Testframeworks als erweiterbar, kompatibel und reich an Features, was sich bei genauer Begutachtung auch bewahrheitet:<\/p>\n\n\n\n

Bei Webdriver.io handelt es sich um ein Selenium-basiertes Testframework, welches die darauf beruhende WebDriver API des W3C implementiert. Dadurch wird die Kompatibilit\u00e4t mit allen modernen Browsern (und IE) gew\u00e4hrleistet, die eine eigene Treiberimplementierung bereitstellen. Dar\u00fcber hinaus wird auch das Testen von Webanwendungen auf mobilen Ger\u00e4ten sowie nativen Apps erm\u00f6glicht.<\/p>\n\n\n\n

Im tagt\u00e4glichen Einsatz zeigen sich weitere St\u00e4rken des Frameworks: Ein gro\u00dfer Fundus an Hilfsmethoden und syntactic sugar<\/em> macht das Formulieren von Testschritten und Erwartungen deutlich einfacher und lesbarer, als man es von Protractor gew\u00f6hnt war. Hervorzuheben sind dabei u. a. der Zugriff auf ShadowRoot-Komponenten via shadow$, die vielseitigen Einstellungsm\u00f6glichkeiten der Konfiguration (u. a. automatische Testwiederholungen im Fehlerfall) und das Warten auf erscheinende bzw. verschwindende DOM-Elemente. Sollte dennoch mal eine Funktion nicht verf\u00fcgbar sein, l\u00e4sst sich diese als custom command implementieren und anschlie\u00dfend genauso wie die mitgelieferten Funktionen verwenden.<\/p>\n\n\n\n

Bei aller Lobpreisung gibt es dennoch einen Wermutstropfen: Im Vergleich zu anderen Frameworks ist die Testausf\u00fchrung aufgrund der Selenium-basierten Implementierung recht langsam, jedoch kann die Ausf\u00fchrung auch parallelisiert werden.<\/p>\n\n\n\n

Pro<\/td>Contra<\/td><\/tr>
+ Vielseitige Kompatibilit\u00e4t
+ Ausgezeichnete Dokumentation
+ Zahlreiche Hilfsmethoden und syntactic sugar<\/em><\/td>		–        Testausf\u00fchrung langsamer als in andere Frameworks<\/td><\/tr><\/tbody><\/table>
Tabelle 3: Vor- und Nachteile des Tools Webdriver.io<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

TestCaf\u00e9<\/strong><\/h3>\n\n\n\n

Bei TestCaf\u00e9 handelt es sich um einen weniger verbreiteten Kandidaten im Testfeld. Die bereits erw\u00e4hnte Umfrage in der Angular Community ergab einen Nutzungsanteil von unter 1%. Das erste Stable-Release erschien 2018, gegenw\u00e4rtig befindet sich die Anwendung in Version 1.19. Das Versprechen eines einfachen Setups und die Unabh\u00e4ngigkeit von WebDriver war f\u00fcr uns ein Grund, etwas genauer unter die Haube zu schauen. Stattdessen verwendet TestCaf\u00e9 einen umgeschriebenen URL-Proxy namens Hammerhead, der Befehle mithilfe der DOM-API emuliert und JavaScript in den Browser injiziert.<\/p>\n\n\n\n

Unterst\u00fctzt werden derzeit alle g\u00e4ngigen Browser und die mobilen Versionen von Chrome und Safari. Hervorzuheben ist dabei die M\u00f6glichkeit, Tests auf echten Mobilger\u00e4ten im gleichen Netzwerk auszuf\u00fchren zu k\u00f6nnen. Die Testausf\u00fchrung mit BrowserStack ist ebenfalls m\u00f6glich. Zu erw\u00e4hnen ist an dieser Stelle auch, dass zus\u00e4tzlich eine dezidierte Entwicklungsumgebung (TestCaf\u00e9 Studio) existiert, in der es auch m\u00f6glich ist, mit wenig Programmierkenntnis Testf\u00e4lle zu erstellen und aufzunehmen.<\/p>\n\n\n\n

Pro<\/td>Contra<\/td><\/tr>
+ schnell
+ Vielseitige Kompatibilit\u00e4t (auch f\u00fcr mobile Browser und Endger\u00e4te)
+ gro\u00dfes Featureset<\/td>		–        Geringe Verbreitung
–        Testrecorder-Tool nur kostenpflichtig<\/td><\/tr><\/tbody><\/table>
Tabelle 4: Vor- und Nachteile des Tools TestCafe<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Gegen\u00fcberstellung<\/strong><\/h2>\n\n\n\n

Bei der Wahl eines Testframeworks ist es zun\u00e4chst wichtig, die eigenen Projektanforderungen zu kennen. Hierbei k\u00f6nnen folgende Fragestellungen n\u00fctzlich sein:<\/p>\n\n\n\n