Kapitel 14. Red Hat Testing
Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: translation-feedback@oreilly.com
Visuelle Regression in Aktion
PhantomCSS ist seit ein paar Jahren mein bevorzugtes Tool, weil es einen komponentenbasierten Vergleich mit einem Headless Browser und einer Skripting-Bibliothek bietet, die in meine aktuellen Build-Tools integriert werden kann. Ich möchte dir die Einrichtung von PhantomCSS erläutern und dir zeigen, wie wir es derzeit bei Red Hat einsetzen.
Die Prüfwerkzeuge
PhantomCSS ist eine leistungsstarke Kombination aus drei verschiedenen Tools:
- PhantomJS ist ein Headless WebKit Browser, mit dem du Webseiten schnell rendern und vor allem Screenshots davon machen kannst.
- CasperJS ist ein Navigations- und Skripting-Tool, mit dem du mit der von PhantomJS gerenderten Seite interagieren kannst. Wir können die Maus bewegen, Klicks ausführen, Text in Felder eingeben und sogar JavaScript-Funktionen direkt im DOM ausführen.
- ResembleJS ist eine Vergleichsmaschine, die zwei Bilder vergleichen und feststellen kann, ob es Pixelunterschiede zwischen ihnen gibt.
Außerdem wollten wir den gesamten Prozess automatisieren, also haben wir PhantomCSS in Grunt eingebunden und ein paar benutzerdefinierte Grunt-Befehle eingerichtet, um alle oder nur einen Teil unserer Testsuite zu testen.
Grunt einrichten
Bevor du jetzt losrennst und das erste Grunt PhantomCSS herunterlädst, das du bei Google findest, muss ich dich ...
Get Frontend-Architektur für Designsysteme now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
