|

Playwright, Chromatic und Co: Die Newcomer am (Testing) Horizont

State of Testing 2020

Beim Überfliegen des neuen State of JS 2020 Reports sind mir im Bereich Testing einige Newcomer aufgefallen, von denen ich bis dato noch nicht gehört habe.

Um einen aktualisieren Überblick zu erhalten habe ich mal einige (für mich) neuen Testing-Tools vorgestellt

Playwright 🎭

Playwright ist für viele Fans von Puppeteer gewissermaßen der neue Star im Bereich des automatischen Testings.

Doch was macht dieses node-basierte Testing-Framework so besonders?
Auf den ersten Blick sieht es sehr nach Puppeteer aus (entsprechend leicht lässt es sich auch von Puppeteer migrieren).
Playwright kann also durchaus als Nachfolger von Puppeteer verstanden werden. Das Entwicklungsteam hat damals Pupeteer für Chrome entwickelt und nun arbeitet dasselbe Team für Microsoft an Playwright.

Allerdings gibt es zwischen den Beiden einen entscheidenden Unterschied:
Playwright ist Crossbrowser kompatibel; sprich das Framework unterstützt neben Chrome, auch Firefox und Webkit (Safari) und stellt damit einen massiven Vorteil gegenüber dem (inoffiziellen) Vorgänger dar.

Persönliche Einschätzung

Für Fans von Puppeteer ist Playwright absolut unumgänglich. Aber auch für Newcomer sollte das Tool durchaus interessant sein, da es auf dem gelernten Wissen des Vorgängers aufbaut und diesen in vielen Bereichen deutlich an Usabilty übersteigt. Wer Puppeteer nutzen will, sollte also zukünftig eher auf Playwright setzen.

Headless Recorder 📹⏺️

Diese Browserextension für Chrome ermöglicht es, die aktuelle Interaktionen mit einer Website aufzuzeichnen und generiert dabei Code für Puppeteer/Playwright Test, den man einfach in eine entsprechende JS-Testfile kopieren kann und schon kann dieser ausgeführt werden (sofern die benötigten Dependencies im Projekt gegeben sind, versteht sich).

Gerade für Neuankömmlinge aber auch Veteranen die schnell einfache Aktionsinputs schreiben wollen, ist das Tool eine gute Hilfe um den Basiscode für die eigentliche Testlogik zu generieren.

Eines meiner größten Bedenken bei solchen Tools war und ist, dass automatische Code-Generierungstools normalerweise nicht unbedingt die Art Selektoren generieren, die man manuell verwenden würde. Meistens stehen hier Lesbarkeit und Wartbarkeit im Vordergrund.
Best Practice ist mMn. vorallem die Verwendung von data- Attributen wie etwa 'data-cy-*' oder Ähnlichem.
Theoretisch unterstützt die Extension auch die bevorzugte Nutzung dieser data-attribute, allerdings hat das in meinen Tests nicht funktioniert, sodass die manuelle Anpassung der Selektoren unter Umständen mehr Zeit frisst, als den Code händisch zu schreiben.

Persönliche Einschätzung

Aktuell ist das Tool für mich mehr Spielerei als wirklicher Timesaver, zumindest solange das mit den verkürzen Selektoren noch nicht richtig funktioniert.

Ich denke aber, wer Playright bzw. Puppeteer nutzt, sollte das Tool dennoch im Auge behalten: Mit etwas mehr Entwicklungszeit könnte das ein ziemlich guter Time-Saver werden. Das Potenzial ist auf jeden Fall bereits vorhanden.

Testing Library 🐙🧪

Diese DOM Testing Library versucht eines der Hauptprobleme von Testing zu lösen: Anders als etliche E2E-Testing Frameworks verzichtet Testing Library nahezu gänzlich auf Implementierungsdetails.

Soll heißen: Anstatt eine Komponente mit Daten aus der echten Anwendung zu nutzen, bestücken wir sie für die Tests mit gemockten Daten.
Dies hat einen entscheidenden Vorteil: Unsere Tests funktionieren auch, wenn sich unsere Texte, Daten etc. ändern.
Dadurch können unter anderem Komponenten gefactored werden, ohne dass die Tests angepasst werden müssen.

Entstanden ist das Tool aus React Testing Library und bietet mittlerweile Support für sämtliche Frameworks wie Angular, Vue und Svelte und integriert dabei auch mit diversen Testing Libraries wie Cypress, Jest, Puppeteer oder Nightwatch.

Persönliche Einschätzung

Da sich Testing Library wie eben erwähnt ergänzend zu solchen Testing-Frameworks einsetzen lässt, denke ich, dass man das Tool durchaus mal ausprobieren kann. Ob das Konzept funktioniert hängt aber vermutlich viel mit dem Projektaufbau zusammen.
Die JS-Community scheint schließlich sehr begeistert davon zu sein! 😉

Chromatic (Storybook) 📸📕

Das letzte Testing Tool ist gewissermaßen ein Bonus, da es nur indirekt als Teil von Storybook in der Statistik vorkommt.

Chromatic ist dabei ein klassisches Visual Regression Testing Tool, wie etwa auch Percy oder BackstopJS.
Allerdings mit einer großen Besonderheit: Chromatic integriert sich direkt mit einem vorhandenen Storybook Projekt und hat damit automatisch den perfekten Use-Case für Visual Regression Testing: Ein (Storybook) UI-Patternlab als Basis der Visual Regression Tests.

Dies hat immense Vorteile gegenüber dem Testen der echten Applikation, allem voran, dass die Daten out-of-the-box gemockt sind, sprich deren Content sich nicht regelmäßig ändern sollte, was man von einer Live-Applikation oft nicht behaupten kann.

Persönliche Einschätzung

Chromatic und Storybook scheinen das perfekte Team zu sein. Da Chromatic (wie auch Percy) 5000 Snapshots pro Monat kostenlos anbietet, gibt es wenig Gründe es nicht mal auszuprobieren. Und je nach Applikationsgröße kann ein Abo der SaaS-Lösung die Qualitätssicherung deutlich verbessern, zumal das Tool sich in die CI-Pipelines integrieren lässt, so dass es problemlos ein fester Bestandteil des Workflows werden kann. Also: Wer Storybook verwendet sollte das unbedingt mal ausprobieren!

Fazit 🧐

Auch in diesem bzw. im letzten Jahr tut sich viel am Testing Horizont. Dieses Mal passt das Wort „Horizont“ wirklich sehr, denn viele Tools tauchen zum ersten Mal im JS-Jahresbericht auf und erzielen direkt hohe Beliebtheit.
Ich finde die neuesten Entwicklungen im Bereich Qualitätssicherung wahnsinnig spannend und auch wenn viele der neuen Tools gefühlt noch in den Kinderschuhen stecken, finde ich, dass sich ein Blick darauf durchaus lohnt.
Denn wie immer gilt: Einfach ausprobieren! Wofür haben wir denn sonst 'git'? 😉😋 ^^

Quellen

Playwright.dev

Introduction to Playwright | QA Camp - YouTube

Headless Recorder - Chrome Web Store

checklyhq.com - headless recorder docs

Introduction | Testing Library

What Is React Testing Library? | LevelUpTuts - YouTube

Chromatic demo - YouTube