Simon Madine ist Vorreiter im vernachlässigten Bereich des CSS-Testings. Hier ist der aktuelle Stand, so wie ich ihn verstehe.
Arten von Tests
Es gibt vier verschiedene Kategorien von CSS-Tests
Syntax
Haben Sie buchstäblich Fehler in Ihrem CSS gemacht?
Projekt
Entspricht dieses CSS den von Ihnen gesetzten Standards?
Referenz
Sieht die gerenderte Seite so aus, wie Sie es erwarten? Auch Browser-übergreifend.
Regression
Nachdem Aktionen ausgeführt wurden, sieht die Seite so aus, wie Sie es erwarten?
Ich persönlich bin am meisten an Regressionstests interessiert. Beispiel: Ich habe Produktionscode hochgeladen, bei dem ich den z-index eines Headers geändert habe. Ich habe manuell ein paar Dinge getestet und es schien in Ordnung zu sein. Aber es gab eine Art von Benachrichtigungsnachricht, die erscheinen konnte und die ich vergessen hatte zu testen, die letztendlich einen niedrigeren z-index hatte und vom Header komplett verdeckt wurde. Es wurde viel nachgedacht, um herauszufinden, warum die Nachricht nicht angezeigt wurde. Durch Regressionstests ist es möglicherweise möglich, Aktionen zu deklarieren, die auf einer Seite ausgeführt werden sollen, und dann zu testen, ob die Dinge wie gewünscht angezeigt werden.
Ressourcen
Simon ist der Mann, also erfahren Sie mehr und finden Sie heraus, welche Werkzeuge es gibt, die Ihnen bei den verschiedenen Arten von seiner Arbeit helfen können.
- Artikel: 4 Werkzeuge für automatisiertes CSS-Testing
- Webseite: csste.st
- Präsentation: „Automatisierte Tests und die Geschichte von Orangered.“
Regressionstest-Tools und Infos
- Automatisierung von CSS-Regressionstests von Garris Shipon (über BackstopJS)
- PhantomCSS
- SUCCSS: „Einfach zu installierendes, einfach zu bedienendes Tool für CSS-Regressionstests.“
Simon hat diese Woche beim CSS Summit einen großartigen Vortrag über automatisiertes CSS-Testing gehalten (http://environmentsforhumans.com/2013/css-summit/). Er leistet dort definitiv großartige Arbeit!
Hallo Chris, danke für die Links. Ich wollte mich schon seit einiger Zeit mit automatisiertem CSS-Testing beschäftigen, habe aber noch keine gute Übersicht über Tools gefunden – bis jetzt! Haben Sie eines (oder mehrere) der Tools bereits ausprobiert? Ich denke, ich werde **PhantomCSS** (oder **GhostStory**) bei meinem nächsten Kundenprojekt ausprobieren. Vielleicht gibt es sogar eine Möglichkeit, das mit **Grunt** zu integrieren.
Benutzen Sie SaSS, dann haben Sie kostenlos CSS-Testing :D
Danke für die Links, es wäre eine gute Idee, wenn einige Editoren wie Sublime Text 2 und 3 diese Tools integrieren könnten. Dasselbe gilt für Codekit…
@cvb : Ich benutze Sass und Compass, ist das kein CSS-Testing? Wenn man Fehler im scss macht, sind sie dann nicht in der scss-Datei?
Die BBC hat gerade diesen Beitrag veröffentlicht, in dem sie über ihr eigenes Tool für CSS-Testing sprechen: Wraith. Es verwendet standardmäßig PhantomJS zum Erfassen von Bildern und Imagemagick zum Vergleichen von zwei Versionen durch Generieren von Diffs.
Der Link zum Artikel „4 Werkzeuge für automatisiertes CSS-Testing“ ist alt. Hier ist der neue: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777
Ich habe einen Artikel darüber geschrieben, wie man PhantomCSS-Regressionstests in seinen täglichen Git-Workflow integriert. Wir verwenden JIRA-Stories als Quelle für Test-URLs, aber es könnte alles mit einer API sein. Git Hooks werden verwendet, um Tests auszuführen und sofortiges Feedback zu Commits zu geben.
http://chris.gunawardena.id.au/software-development/automated-regression-testing-of-jira-stories/