CSS-Regressionstests mit Resemble.js
Kommentare

Das Tool Resemble.js macht einfache Front-End CSS-Regressionstests anhand einer automatisierten Bildanalyse möglich. Das Grundprinzip ist dabei denkbar einfach: Resemble.js vergleicht die zwei zu testenden

Das Tool Resemble.js macht einfache Front-End CSS-Regressionstests anhand einer automatisierten Bildanalyse möglich. Das Grundprinzip ist dabei denkbar einfach: Resemble.js vergleicht die zwei zu testenden Bilder und generiert in der Folge ein drittes, welches die Unterschiede zwischen den beiden visualisiert, d.h. markiert und farblich hervorhebt. So fallen selbst subtile Unterschiede zwischen den beiden Quellen, wie z.B. eine mit bloßem Auge kaum zu bemerkende Änderung der Schriftart, sofort auf. Resemble.js ist allerdings nicht perfekt, so können große, komplette Screenshots einer Seite zu falschen Positiven führen; es eignet sich daher eher für einen groben Überblick im Testprozess.

Für feinere Testergebnisse empfiehlt Blake Hall, Senior Developer bei Lullabot in einem Post deshalb das Tool Phantom CSS, welches die Auswahl und den Vergleich bestimmter Bereiche einer Seite mithilfe eines CSS-Selectors erlaubt. Im selben Post findet sich ebenfalls ein von Blake in node.js geschriebenes, gerade einmal 130 Zeilen Code umfassendes Kommandozeilen-Tool, mitdessen Hilfe man Resemble.js auf einfachem Wege in den Testprozess eigener Projekte integrieren kann.

Aufmacherbild: <a href="http://www.shutterstock.com/pic.mhtml?id=99929453&src=id" title="Businessman looks for the malicious code of a virus von Shutterstock / Uhrheberrecht: alphaspirit “ class=“elf-external elf-icon elf-external elf-icon“ rel=“nofollow nofollow“>Businessman looks for the malicious code of a virus von Shutterstock / Urheberrecht: alphaspirit

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -