Monthly Archives: October 2013

Front-end / visual (regression) testing

Auch wenn Fehler in Änderungen am CSS, aufgrund ihrer visuellen Sichtbarkeit, häufig schnell auffallen, halte ich gerade in komplexen und umfangreichen Projekten Regressionstest für sehr sinnvoll.

Regressionstest verfolgen den Zweck, bereits getestetes, nach Änderungen im Gesamtprodukt*, erneut zu testen und so deren Fehlerfreiheit weiterhin zu gewährleisten.

Im Fall des Testens der Visualität einer WebApp, geschieht dies häufig und am einfachsten über einen Screenshotvergleich. Das (automatisierte) Vergleichen von Screenshots hat den Vorteil, dass nicht die Cascading Style Sheets (CSS) direkt getestet werden, sondern deren Auswirkung auf die Visualität. Was wiederum bedeutet, dass auch alle anderen Systemteile, die die Visualität verändern, mitgetestet werden. Dank der großartigen Community gibt es für diesen Zweck bereits viele einsetzbare Tools. Folgend eine Liste der mir bekannten:

Screenshot by Huddle for PhantomCSS

Screenshot by Huddle for PhantomCSS

Screenshot-Vergleich:

Sonstiges:

Ich konnte bisher noch keine Erfahrung mit diesen Tools sammeln, im Überblick sind aber Wraith, PhotoBox und PhantomCSS meine Favoriten. Mehr zum Thema CSS Testing findet sich (in Englisch) im Entwickler-Blog von Huddle, von denen auch eines der oben genannten Produkte kommt (PhantomCSS).

Du kennst noch weitere Libraries, Frameworks und Tools, zum Testen von CSS? Dann schreibs bitte in die Kommentare, ich werde die Liste entsprechend erweitern.

* Soll heissen, dass die Änderungen, weshalb regressionsgetestet wird, nicht zwangsweise (oder offensichtlich) das zu Testende betreffen.

Quick-Hints #8

Statistik Besucher Wochenrekord

Statistik Besucher Wochenrekord

Lange hab’ ich nichts mehr veröffentlicht, komme leider nicht wirklich dazu. Trotzdem konnte ich letzte Woche einen neuen Visits-Wochenrekord für ben.nyben.net aufstellen. Damit es nicht langsam aussieht, als sei mein Blog tot, hier ein neuer, kleiner Quick-Hints Eintrag.

Ein extrem nützliches, aber noch nicht so beachtetes Objekt in JavaScript ist der MutationObserver. Dieser Nachfolger der MutationEvents bietet weniger Fehlerpotential und findet bereits jetzt eine breite Unterstützung seitens der Browser. Sehr nützlich bei der Implementierung eines eigenes Frameworks, bietet dir der MutationObserver die Möglichkeit, auf DOM-Änderungen zu reagieren. Im Opera (ja, der Browser) Blog ist ein sehr nettes Tutorial zu finden. Weiterführend dazu, hat Addy Osmani auf der JSConfEU13 einen sehr sehenswerten Talk gehalten. In diesem geht es um Object.observe aus der ECMAScript Harmony Spec. Object.observe bietet quasi den Mitspieler der MutationObserver. Hiermit können Änderungen an JS-Objekten (zum Beispiel) im DOM wiedergespiegelt werden: Everthing you want to know about Object.observe

Hier ein Post, der sich als sehr nützlich erweisen kann, wenn man mal wieder das Aussehen der Scrollbars im Browser anpassen soll… Warum auch immer man das möchte.

Ein kurzer Ausflug in die Welt des Marketings: Wie schaffe ich es, vier Millionen Leute für meine Sache zu begeistern.

Promises sind extrem schön um in JavaScript einen asynchronen Aufruf / Ablauf zu entwickeln. Für Promises gibt es in JS viele Implementierungen, unter anderem von jQuery. Ein schönes CheatSheet, basierend auf der promises/A+ Implementierung, kann dabei sicher gut unterstützen. Eine nette (englische) Beschreibung von Promises findet sich im Blog von parse.com.

Auf den Seiten der FH Wedel findest du eine nette Kurzbeschreibung zu den wichtigsten Technologien, die bei nodejs zum Einsatz kommen. Nichts Weltbewegendes, aber falls du noch nicht weisst, was hinter non-blocking I/O steckt, findest du dort eine kompakte, gute Antwort.