Automatisierte UI-Tests sind mittlerweile ein wesentlicher Bestandteil des Softwareentwicklungsprozesses. Sie dienen als Regressionstests und helfen somit Entwicklern sicherzustellen, dass ihre Anwendungen stabil und zuverlässig sind bzw. die erwartete Leistung erbringen. Mit der zunehmenden Komplexität von Webanwendungen steigt auch der Bedarf an leistungsfähigen und effizienten Testautomatisierungs(TA)-Frameworks für das zu testende System (SUT). Seit Jahren ist Selenium der Player Nummer 1, wenn es um TA-Frameworks im Web geht. Viele weitere bekannte TA-Frameworks und Tools wie Tosca und Katalon benutzen oder benutzten unter der Haube den Selenium WebDriver zur Browser-Automatisierung. Doch seit einigen Jahren gibt es neue Mitspieler auf dem Markt, die zuletzt sehr stark an Aufmerksamkeit gewinnen und zunehmend immer öfter eingesetzt werden.
In diesem Blogbeitrag vergleichen wir drei beliebte Open-Source-Frameworks zur Testautomatisierung: Playwright, Cypress und Selenium. Wir gehen auf Stärken und Schwächen ein, auf ihre Kompatibilität sowie auf die Frage, in welchen Anwendungsbereichen sie am sinnvollsten sind.
Aber gehen wir doch zuerst zurück an den Anfang.
Selenium
Die erste Version von Selenium wurde 2004 durch Jason Huggins veröffentlich. Damals lief es noch mit dem sogenannten Selenium RC. Das heutige Selenium ist da anders: Es läuft ausserhalb des Browsers und steuert diesen mit einer externen Schnittstelle (WebDriver) automatisiert.
Abseits vom Selenium-Framework gibt es auch ein Browserplugin namens Selenium IDE. Dieses läuft direkt im Browser; Tests können direkt aufgenommen und wieder abgespielt werden. Ein Export in das Selenium-Framework ist ebenfalls möglich.
Zurück zum Selenium-Framework.
Dieses wird in einer grossen Anzahl an Programmiersprachen angeboten:
Java, C#, Python, Ruby und einigen weiteren Sprachen
Genauso unterstützt Selenium durch diese Sprachenvielfalt ebenfalls etliche unterschiedliche Testframeworks. Hier ein Ausschnitt:
- JUnit (Java)
- TestNG (Java)
- Cucumber (BDD, Java)
- MSTest (C#)
- XUnit (C#)
- SpecFlow (BDD, C#)
- PyUnit (Python)
- UnitTest (Python)
- Behave (BDD, C#)
- RSpec (BDD, Ruby)
Diese weite Kompatibilität/Vielseitigkeit ist einer der Gründe, warum Selenium das führende Web-Automatisierungs-Framework ist. Selenium ist auch im Schweizer Markt auf Platz 1, wie unser diesjähriger “Trends & Benchmarks Report” zeigt.
Kommen wir zu den Schwächen:
Selenium kann gut für grosse und komplexe Projekte verwendet werden.
ABER: Die Architektur ist veraltet. Die Kommunikation mit Selenium läuft über HTTP-Requests. Zuerst direkt ein HTTP-Request von der Selenium-API zum Selenium Webdriver, dieser kommuniziert dann direkt mit dem jeweiligen Browser. Alle Driver können auch in einem Tool namens «Selenium Grid» implementiert werden wo ganz simpel die Driver gewechselt und Tests auf fremden Maschinen ausgeführt werden können. Durch diese unterschiedlichen Webdriver ist es ebenfalls möglich native Android/iOS Apps zu betesten (Appium). Für jede Driver-Aktion wird ein eigener HTTP-Request erstellt und am Ende wieder beendet. (Gut nochmals hier erklärt.) Das frisst sehr viel Zeit. Andere Frameworks wie z.B. Playwright lösen dies effizienter mit Websockets (siehe dazu Playwright).
In Gegensatz zu Cypress oder Playwright muss sich der Benutzer hier um viel mehr kümmern: das korrekte Starten und Beenden des Browsers etc., das stellt sich manchmal als schwierig heraus; meistens wird ein eigenes Wrapper-Framework herum gebaut.
Cypress
Das 2014 von Brian Mann entwickelte Framework namens Cypress war der erste nennenswerter Konkurrent zu Selenium. Dieses auf Chromium basierte Projekt läuft, im Gegensatz zu Selenium, direkt im Browser:
Es kreiert eine Sandbox, in der die Webseiten getestet werden. Testautomatisierer und Frontend-Entwickler können es benutzen, um automatisierte Tests in JavaScript oder TypeScript zu schreiben. Cypress ist unter der MIT-Lizenz, kann dementsprechend gratis benutzt werden, Cypress Cloud kann ebenfalls gratis benutzt werden, bei besserem Support und mehr Features hingegen ist es kostenpflichtig. Wie bereits im Kapitel Selenium angeteasert, muss sich der Benutzer bei Cypress nicht mit dem korrekten Starten oder Beenden des Browsers herumschlagen. Das und die Tatsache, dass alles im selben Browser stattfindet, sorgen für eine gewisse Schnelligkeit. Spezialisiert ist Cypress auf E2E- und Komponententesting. Es gibt ein Ökosystem von Frameworks, die perfekt aufeinander abgestimmt sind: Der Benutzer kann sehr rasch mit dem Automatisieren beginnen.
Cypress bietet ausserdem die Möglichkeit, Requests während der Testausführung zu manipulieren, sprich: Mocking und Stubbing.
Dafür kann man verschiedene Methoden wie "cy.intercept" oder "cy.request" verwenden. Mit diesen Funktionen kann man z.B. Mock-Daten einsetzen oder Testfälle für unterschiedliche Netzwerkbedingungen simulieren. Das Ganze wird Request Intercepting genannt. Des Weiteren inkludiert Cypress einen eigenen Trace-Viewer (Time Travel) mit fantastischen Funktionen zum Debuggen. Auf diese Art können jede Aktion, die im Browser getätigt wurde, wie auch jeder Request, der stattfand, noch einmal zurückverfolgt werden.
Ein weiterer grosser Vorteil sind die Dokumentation und der Community-Support von Cypress. Der ist stark gegeben.
Mit Cypress Cloud ist es sogar möglich Tests parallel auszuführen.
Damit sind wir auch schon bei den Nachteilen: Für eine Ausführung wird nur ein Tab unterstützt, d.h. Tests, die neue Tabs öffnen, sind nicht möglich. Nur eine gleichzeitige Browserinstanz pro Testausführung wird unterstützt. Daran wird sich auch nichts ändern. Das liegt daran, dass Cypress sich auf Applikationen fokussiert, bei denen alle Aktionen nur innerhalb desselben Tabs stattfinden (wie zum Beispiel SPAs). Ältere Applikationen, die eigene Tabs öffnen, können somit nicht mit Cypress getestet werden. Früher wurde nur Chrome unterstützt, mittlerweile laufen damit die gängigsten Browser (Chrome, Firefox, Edge, Safari Webkit).
Andere Programmiersprachen oder Testframeworks werden nicht unterstützt.
Aber da kommt ein neuer Player ins Spiel, der zumindest aktuell das Potential hat möglicherweise sogar Cypress abzulösen.
Playwright
Playwright ist der jüngste Player in der Runde. Entwickelt von Microsoft im Jahr 2019 verzeichnet es zurzeit ein starkes Wachstum. JavaScript-Frameworks wie z.B. Vue.js bieten eine Playwright-Einbindung out of the box an. Playwright ist spezialisiert auf Chrome, WebKit(Safari) und Firefox. Genau, richtig gelesen: Unter Windows können somit auch Safari Tests ausgeführt werden.
Playwright-Tests>Playwright-Tests lassen sich in diversen Programmiersprachen schreiben (TypeScript/JavaScript/Python/ C#/Java…) und es werden dadurch auch diverse Test-Frameworks unterstützt: z.B. Jest, Jasmine, Mocha, Vitest. Playwright unterstützt out of the box die parallele Ausführung von Tests auf der lokalen Maschine. Für CI muss die Testsuite auf mehrere CI-Runner aufgeteilt werden.
Wie Selenium läuft Playwright ausserhalb des Browsers. Im Gegensatz zu Selenium werden aber zur Kommunikation nicht http-Requests, sondern Websockets verwendet. Bei Websockets wird eine Verbindung hergestellt, diese bleibt dann geöffnet. In diesem geöffneten Stream können jederzeit Daten in beide Richtungen ausgetauscht werden. Nicht wie bei den HTTP-Requests, wo jedes Mal ein Auf- und Abbau der Verbindung stattfindet.
Playwright nutzt zur Kommunikation mit dem Browser die sogenannten ChromeDevTools für jeden Browser. Diese Technologie wird von den Browsern bereits selbst benutzt, wodurch Playwright keinen WebDriver benötigt. Mehrere Browser gleichzeitig werden ebenfalls unterstützt!
Playwright bietet somit das Beste aus den Welten Selenium und Cypress:
Die Schnelligkeit von Cypress und die Sprachunterstützung von Selenium.
Genau wie Cypress inkludiert Playwright ebenfalls einen eigenen Trace-Viewer mit fantastischen Funktionen zum Debuggen.
Unsere Kollegen von Qxperts haben dazu ein super Video veröffentlicht:
Jetzt zu den Schwächen:
Playwright ist noch sehr jung. Dementsprechend sind die Community und deren Unterstützung noch sehr begrenzt. In unserem Report über den Schweizer Markt konnte Playwright noch nicht die 5%-Marke knacken. Des Weiteren werden nur die gängigsten Browser unterstützt. Out of the box laufen Chromium basierte Browser. Tests auf WebKit und Firefox sind auch möglich. Im Gegensatz zu Cypress unterstützt Playwright mehrere unterschiedliche Browser-Instanzen (Browsercontext genannt) innerhalb eines Tests. Allerdings werden nur bedingt Tests auf nativen Mobiltelefonen unterstützt (da gibt es mehr Möglichkeiten mit Selenium).
Fazit
Wenn wir die unterschiedlichen Frameworks vergleichen, dann fällt auf, dass vor allem Cypress und Playwright immer beliebter werden. Der Unterschied zwischen Cypress und Playwright ist, dass Cypress als “Paket” kommt, sprich es gibt gewisse vorgegebenen Strukturen in einem präzise definierten Ökosystem (Testframework, Programmiersprache, Ordner-Struktur etc).
Playwright bietet da mehr Freiheiten an (unterschiedliche Testframeworks / Programmiersprachen). Cypress läuft mit Mocha als Testframework. Playwright unterstützt Mocha, aber auch Jest, Jasmine u.v.m.
Zwischen Cypress und Playwright sollte entschieden werden zwischen Struktur und Flexibilität für automatisierte Tests. Befindet wir uns in einem Javascript Technologie-Stack mit Mocha als Testframework; da wäre Cypress zum Beispiel eine gute Wahl. Wird zum Beispiel aber ein komplett anderer Technologie-Stack wie einer von Microsoft verwendet, macht Playwright mit seiner Technologie-Offenheit mehr Sinn. Es muss immer bedacht werden: was für Technologien sind bereits im Einsatz und gibt es im Unternehmen bereits definierte Framework-Standard?
Mittlerweile können alle 3 Frameworks bei kleineren bis zu grossen Projekten eingesetzt werden. Bei grösseren und komplexen Projekten (mehrere diverse Browser, mehrere Tabs, Anbindungen von externen APIs etc.) müsste man derzeit aber noch mit Selenium und Playwright arbeiten, wenn man diesbezüglich keine Einschränkungen möchte: Tests sollen möglichst in demselben Technologiestack bleiben, in dem sich das SUT befindet. Ein Programm in einem JavaScript-Stack sollte eher in JavaScript-Technologien getestet werden. Da bietet sich super Cypress oder Playwright an. Ein Programm in Microsoft-Stack eher in Microsoft-Technologien getestet werden etc. Da bietet sich Selenium oder Playwright an. Die Technologien sind dafür gebaut untereinander optimal zu funktionieren. Einzig der Support ist bei Selenium mehr gegeben als bei Playwright.
Ein grosser Unterschied zwischen Selenium und Cypress gegenüber Playwright ist, dass die ersten beiden eine sehr starke und grosse Community und Dokumentationssupport haben. Playwright ist dafür einfach noch zu jung und neu auf den Markt.
Apropos Einschränkungen: Sowohl Cypress als auch Playwright bringen laufend noch neue Features auf den Markt. Wir von SwissQ/Xebia denken, es ist wichtig sich mit beiden auseinander zu setzen. Vor allem, da die Nutzung beider Frameworks rasant steigt. Playwright besitzt eine einfache Architektur, ist schnell und zuverlässig und es gibt genau wie in Cypress laufend neue Features. Aus diesem Grund arbeiten wir auch mit beiden Frameworks und geben auch Playwright- und Cypress-Kurse in unserer Academy:
Für Kurse in den Niederlanden siehe hier.
Zusammenfassend lässt sich sagen, dass es ein spannendes Kopf-an-Kopf-Rennen ist. Wie unsere Benchmarkanalyse zeigt, ist Selenium immer noch der big Player one.
Neben Selenium holt Cypress sehr stark auf und Playwright ebenso. Cypress hat sich innerhalb eines Jahres verdoppelt. Playwright hat es dieses Jahr (noch) nicht über die 5% in unsere Kundenstatistik der Schweiz geschafft.
Wie geht es weiter?
Natürlich gibt es noch viele andere Aspekte, auf die man eingehen könnte, z.B. Pipeline-Support, aber die würden den Rahmen dieses Blogs sprengen. Wir sind auf jeden Fall selbst gespannt, wie sich die Zukunft weiterentwickeln wird, und bleiben dran.
Wenn Sie weitere Fragen haben, zögern Sie nicht, uns zu kontaktieren!