Haupt / Wie Man

4 Tools für automatische CSS-Tests

Dieser Artikel erschien erstmals in Ausgabe 240 des .net-Magazins - dem weltweit meistverkauften Magazin für Webdesigner und -entwickler.

Wenn Sie eine kleine, statische, einseitige Website haben, denken Sie, dass Sie mit dem Layout oder dem Design ziemlich leicht Fehler feststellen können. Vielleicht wäre eine zweiseitige Microsite noch in Ordnung. Fügen Sie in ein paar Schwebezuständen hinzu, und das ist wahrscheinlich auch in Ordnung. Fügen Sie weitere Dinge hinzu, bauen Sie weiter und bevor Sie es wissen, haben Sie eine mehrseitige Website mit einem glänzenden, reaktionsschnellen Design, subtilen Schwebezuständen und einem großartigen vertikalen Rhythmus. Es ist perfekt. Sie sind sich immer noch sicher, dass Sie nichts falsches erkennen können? Auf irgendeiner Seite?

Da die von uns entwickelten Websites immer größer und komplexer werden, müssen wir uns immer mehr auf Tests verlassen. Automatisierte Tests sind genau das, was Sie anhand des Namens erraten würden. Anstatt dass der Entwickler oder die Qualitätssicherung eine Liste vordefinierter Aktionen auf der Website überprüft, um sicherzustellen, dass alles wie erwartet funktioniert, lassen Sie stattdessen die Tests von einem automatisierten System ausführen.

Alle Aspekte der Webentwicklung können von automatisierten Tests profitieren, und die schiere Anzahl der für JavaScript allein verfügbaren Testframeworks reicht aus, um zu zeigen, wie wichtig dies ist. Im Gegensatz zu JavaScript ist die Anzahl der CSS-Testtools leider begrenzt. Der Grund dafür ist, dass CSS grundsätzlich schwer zu testen ist, da es nicht wie JavaScript oder PHP anweisungsgesteuert ist. Verzweifle nicht, ich habe nicht gesagt, dass es unmöglich ist. Im Folgenden werde ich einige Bereiche durchgehen, die getestet werden können, einige zu verwendende Tools erwähnen und einige Beispiele in Aktion nennen.

Syntaxprüfung

Es scheint so trivial zu sein, aber wenn Sie von einem Fall von Codeblindheit betroffen sind, ist es praktisch, etwas zu haben, das darauf hinweist Displat: Block ist keine echte CSS-Regel, auch wenn es sein sollte. Die meisten Code-Editoren bieten eine Inline-Syntaxprüfung (entweder integriert oder über ein installierbares Plug-In). Wenn Sie dies jedoch wirklich automatisieren möchten, müssen Sie sie in der Befehlszeile ausführen können. Zu diesem Zweck wenden wir uns dem wahrscheinlich bekanntesten CSS-Testtool, CSS Lint, zu, da es neben allem anderen auch eine Überprüfung der Befehlszeilensyntax bietet.

Dies zeigt die Wahrscheinlichkeit, dass mit den Stylesheets Ihres Projekts etwas Unerwartetes passiert, gemessen an der Anzahl der Entwickler im Projekt

CSS Lint

Der einfachste Weg, es zu installieren, ist als globales Node.js-Modul. Wenn Sie Node.js und Node Package Manager (NPM) auf Ihrem System haben, führen Sie dies einfach in Ihrer Befehlszeile aus:

$ npm install -g csslint

Um Ihr CSS zu überprüfen, müssen Sie CSS Lint lediglich mitteilen, wo es suchen soll:

$ csslint [site folder]/styles/*.css

Hier ist eine Beispieldatei und die Ausgabe von CSS Lint:

body { color: #red; background:white; } 1: error at line 2, col 9 Expected a hex color but found '#red' at line 2, col 9. color:#red;

CSS Lint ist ein ziemlich polarisierendes Werkzeug. Sie lieben es oder hassen es, abhängig von Ihrer Meinung zu objektorientiertem CSS. Es ist jedoch wichtig zu beachten, dass es vollständig konfigurierbar ist. Auch wenn Sie niemals eine der darin enthaltenen Flusenregeln verwenden möchten, können Sie dennoch von der Syntaxprüfung profitieren. Lesen Sie die detaillierten Anweisungen Hier .

Wenn Sie sich Zeit nehmen und Ihre Konfiguration sorgfältig auswählen, wird CSSLint Ihre Gefühle nicht unbedingt verletzen, aber Ihr CSS wird dadurch stabiler

Bildunterschiede

Die meisten CSS-Testtools haben sich auf eine von zwei verfügbaren Haupttechniken konzentriert. Die erste davon ist der Bilddifferenzvergleich. Bilddifferenztests wiederholen im Wesentlichen genau das, was der Entwickler tun würde, wenn er Änderungen auf einer Website überprüft, indem er sie betrachtet. Wenn Sie Ihre Seite zum ersten Mal fertig erstellt haben, machen Sie einen Screenshot davon.

Nach jeder Änderung, egal ob auf dieser oder einer anderen Seite, machen Sie einen weiteren Screenshot und vergleichen die beiden. Wenn sie gleich sind, ist alles gut. Wenn es einen Unterschied gibt, überprüfen Sie genauer, ob dies erwartet wird oder ob ein Schurkenstil aus der Reihe geraten ist. Diese Tools automatisieren diesen Prozess, indem sie die Screenshots verwalten, Versionsvergleichsbits erstellen und Ihnen nur Daumen hoch oder Daumen runter geben.

Ein erfolgreicher Testlauf. Wenn Sie den Mauszeiger über das Testergebnis bewegen, wird das aktuelle Referenzbild angezeigt

PhantomCSS

Ein weiteres CSS-Testwerkzeug stammt von James Cryer, das auf dem äußerst leistungsstarken PhantomJS-Projekt aufbaut. Was PhantomJS bietet, ist eine Version von WebKit, die über die Befehlszeile ausgeführt und über JavaScript gesteuert werden kann - nicht nur das übliche In-Page-JavaScript wie 'Popup einer Warnbox', sondern auch eine Steuerung auf Browserebene wie 'Öffnen Sie einen neuen Tab, los' Klicken Sie auf www.netmagazine.com auf den Link des Tutorials. PhantomCSS nutzt dies, um Bilddifferenztests durchzuführen. Zwischen PhantomCSS und PhantomJS gibt es tatsächlich eine weitere Ebene, die die Dinge je nach Ihrer Sichtweise entweder vereinfachen oder komplizieren soll. Diese Schicht ist CasperJS, eine Abstraktionsschicht und ein Testwerkzeug, das auf PhantomJS aufbaut. Glücklicherweise wird dies mit PhantomCSS gebündelt.

Einstieg

Wir werden einen einfachen Bilddifferenztest schreiben, der überprüft, ob die Seite so aussieht, wie wir es erwarten, wenn wir mit ihr interagieren. Laden Sie zunächst die Tutorial-Dateien oder herunter Holen Sie sich die neueste Version von PhantomCSS von GitHub . Sobald Sie PhantomJS installiert und PhantomCSS heruntergeladen haben, wird die PhantomCSS / demo / testsuite.js Datei ist ein guter Anfang.

Die Standard-Demo-Datei zeigt die wichtigsten Funktionen:

casper.start('http://localhost:8080/')   .then( function (){ css.screenshot('body'); } )   .then( function (){ casper.page.sendEvent('click', 10, 10); } )   .then( function (){ css.screenshot('body'); } )   .then( function (){ css.compareAll(); } )   .run( function (){ phantom.exit(css.getExitStatus()); });

Zuerst laden wir die Seite, die wir testen möchten, laden dann einen Screenshot, interagieren dann mit der Seite (z. B. durch Klicken auf einen Link), machen dann einen weiteren Screenshot, vergleichen die Screenshots mit denen, die in früheren Testläufen aufgenommen wurden, und beenden sie schließlich .

Bei der ersten Ausführung erhalten wir die Meldung, dass es keine vorherigen Beispiele zum Vergleich gibt. Führen Sie in der Befehlszeile Folgendes aus:

$ phantomjs demo/testsuite.js Must be your first time? Some screenshots have been generated in the directory ./screenshots

Öffne das PhantomCSS / Screenshots / Verzeichnis, um gespeicherte Screenshots zu sehen. Führen Sie den gleichen Test erneut aus, und da wir Referenzbilder haben, besteht alles:

$ phantomjs demo/testsuite.js PhantomCSS found: 2 tests. None of them failed. Which is good right?

Jetzt können wir jedes Mal, wenn wir die Stile des Projekts ändern, dieselben Tests durchführen und sicher sein, dass alles gleich aussieht, solange sie bestehen. Wenn sie fehlschlagen, können wir überprüfen, ob der einzige Unterschied darin besteht, was wir gerade geändert haben - ein vorhersehbarer Unterschied. In diesem Fall löschen wir die alten Testfälle, generieren neue und fahren wie bisher fort.

Christoph Burgmer hat einen Screencast aufgenommen, um die Einführung von Bilddifferenztests mit CSSCritic zu unterstützen

Aber was passiert, wenn unser Kollege versehentlich alle Instanzen des Wortes 'pink' in unserem Projekt durch das Wort 'plank' ersetzt?

Ändern Sie die Stile in PhantomCSS / demo / testpage.html um dies aufzunehmen:

border: 2px solid hotplank; color: hotplank;

Führen Sie nun denselben Test erneut aus:

$ phantomjs demo/testsuite.js PhantomCSS found: 2 tests. 2 of them failed.

In den alten Tagen, bevor wir all diese coolen automatisierten CSS-Tests hatten, haben wir dies möglicherweise verpasst. Gott sei Dank für die Technologie. Wir werden die versehentlichen „Bretter“ los und der Tag ist gerettet.

Es ist auch wichtig zu beachten, dass wir uns nicht auf das Testen lokaler Dateien beschränken. Wenn wir den Beginn des Tests so ändern, dass er von einer vollständigen URL geladen wird, können wir sicherstellen, dass sich auch unser Produktionscode selbst verhält. Versuchen Sie, den Test zu ändern, um den generierten Screenshot zu sehen.

casper.start('http://csste.st/')

Mehr Werkzeuge

Es gibt einige andere Tools im Bilddifferenzbereich, aber ich werde hier nur eines erwähnen. CSSCritic von Christoph Burgmer ist etwas einfacher zu verstehen als PhantomCSS, wenn Sie mit automatisierten Tests noch nicht vertraut sind, insbesondere wenn Sie an lokalen Vorlagen arbeiten. Dieses Projekt hat keine zusätzlichen Abhängigkeiten. Es ist einfach eine HTML-Datei, die Sie im Firefox-Webbrowser öffnen. (Hinweis: CSSCritic funktioniert derzeit nur in Firefox.)

Die Standarddatei CSSCritic RegressionRunner.html. Die Seite, die Sie testen, wurde gerendert und Sie können sie als Referenzbild speichern

Öffne die Datei CSSCritic / example / RegressionRunner.html um einen Standardtestfall zu sehen.

window.onload = function() { csscritic.addReporter(csscritic.BasicHTMLReporter()); csscritic.compare('pageUnderTest.html'); };

Dadurch werden wie bei PhantomCSS beim ersten Ausführen Referenzbilder erstellt, indem Sie sie im Browser öffnen. Führen Sie es jetzt erneut aus und den pageUnderTest. Der HTML-Test wird automatisch bestanden. Wenn jedoch das Unerwartete eintritt und sich eine geringfügige Änderung einschleicht, werden Sie durch den Test mit einem leuchtend roten Hintergrund und einem Bild, das den Fehler zeigt, informiert.

In diesem Fall wird die Hintergrundfarbe geändert und das generierte Bild zeigt den genauen Pixeldifferenz zwischen der vorherigen und der aktuellen Version.

CSSCritic hat die Einschränkung, dass es in derselben Domäne wie die zu testenden Dateien ausgeführt werden muss, aber es ist sehr klar, was es tut und welche Probleme es gibt.

CSSCritic macht deutlich, wenn sich ein Stil unerwartet ändert und die gerenderte Seite nicht mit der Referenz übereinstimmt

Gefrorenes DOM und berechnete Stile

Die zweite für CSS-Tests verfügbare Haupttechnik ist ein Frozen DOM-Vergleich. Nach wie vor erstellen Sie Ihre Seite oder Vorlage und lassen sie genau so aussehen, wie Sie es möchten. Dieses Mal verwenden Sie jedoch JavaScript, um zu messen, welche Stile auf die zu testenden Elemente angewendet werden, anstatt einen Screenshot als zukünftigen Referenzpunkt zu erstellen. Dieses JavaScript-Objekt wird zu Ihrem Testfall. Wenn Sie eine Änderung am CSS vornehmen, messen Sie erneut die Stile, die auf dieses Element angewendet werden, und vergleichen sie mit den erwarteten.

Für diese Art von Tests stehen weniger Tools zur Verfügung, es gibt jedoch noch einige Optionen.

Geistergeschichte

Das Ghost Story-Projekt soll Entwicklern das Erstellen von Story-Dateien im Gurkenstil zum Testen des CSS erleichtern. Gurke ist eine Technologie, mit der Sie Testfälle als einfache Nur-Text-Dateien schreiben können, die von allen Projektbeteiligten - Entwicklern, Designern und Produktbesitzern - gemeinsam genutzt werden können. Alle sind sich also einig, was gemacht wird. GhostStory kombiniert Node.js, PhantomJS, CasperJS und SpookyJS, um eine Schnittstelle zwischen diesen Testdateien und Frozen DOM-Tests bereitzustellen.

Die einfachste Möglichkeit, GhostStory zu installieren, besteht darin, diese Version von SpookyJS zu installieren, in die GhostStory über Git über die Befehlszeile integriert ist:

$ git clone --recursive https://github.com/thingsinjars/SpookyJS

Dadurch werden nicht nur SpookyJS installiert, sondern auch die GhostStory-Schritte und PhantomCSS (oben erwähnt). PhantomCSS ist enthalten, da es auch möglich ist, GhostStory zu verwenden, um Ihre Bilddifferenztests zu überprüfen.

Sobald dies abgeschlossen ist, müssen Sie die Knotenmodulabhängigkeiten aktualisieren:

$ cd SpookyJS/ $ npm install

Das Beispielprojekt ist verfügbar, indem Sie Folgendes ausführen:

$ make ghost

Wie bei PhantomCSS ist es am einfachsten, den Beispieltest zu ändern, um sich vertraut zu machen. Öffnen Sie den GhostStory-Ordner und sehen Sie sich die Datei css.feature an. Der Inhalt ist derselbe, den Sie nach dem Ausführen des vorherigen in der Befehlszeile gesehen hätten Geist machen Befehl:

Scenario: Frozen DOM test Given I go to '/index.html' Then the 'Main title' should have 'font size' of '32px' And the 'Main title' should have 'color' of 'rgb(0, 0, 0)' And run Scenario: Image Diff Test Given I go to '/1.html' Then the 'Page body' should look the same And run

Zuerst geben wir die zu testende Seite an ( Gegeben, ich gehe zu ). Diese Seite kann eine lokale Vorlage oder eine Remote-URL sein. SpookyJS verfügt über einen integrierten Server, der das Testen lokaler Dateien erleichtert, sodass sich die hier getestete index.html in befindet SpookyJS / tests / fixtures / index.html .

Nach der angegebenen Zeile listen wir die CSS-Eigenschaften auf, die wir in unserer ursprünglichen, vollständigen Vorlage gemessen haben, die wir voraussichtlich in unserer neu aktualisierten Vorlage finden werden. Wenn nichts mit der Seite falsch ist, werden wir nicht darüber informiert und unser automatisiertes Build-System fährt einfach mit der nächsten Stufe fort.

PhantomJS ist eine kopflose Version von WebKit und die Basis für viele automatisierte CSS-Testtools. Es ist eine leistungsstarke Brücke zwischen der Befehlszeile und dem Browser

Wenn Sie das CSS des ändern index.html Datei können Sie das Ergebnis eines fehlgeschlagenen Tests sehen:

(::) failed steps (::) Failed: Main title should have color of 'rgb(0, 0, 0)' (measured: rgb(255, 0, 0))

Um die Stile zu testen, die auf eine Live-Remote-Website angewendet werden, können wir die ändern Gegeben Zeile zu:

Given I go to 'http://csste.st/'

Warum überhaupt Tests automatisieren?

Sofern Sie nicht bei jeder Änderung jeden Aspekt jeder Seite überprüfen, ist garantiert, dass irgendwann jemand einen Stil schreibt, der etwas auf der Website überschreibt. Dies ist genau die Situation, für die automatisierte Tests ideal sind. Sie können ein System einrichten, mit dem Sie Ihre Tests für Sie ausführen können. Dies geschieht jedes Mal und ohne Langeweile. Wenn Sie Ihre Projekte testen, können Sie Fehler machen. Wenn Sie jedoch Ihre Tests automatisieren, haben Sie mehr Zeit, um diese Fehler zu machen - und mehr Zeit, um sie zu beheben.

Simon Madine ist ein leitender Webentwickler und Evangelist.