Facebook
Twitter
Google+
Kommentare
5
Willkommen bei "the web hates me". Mittlerweile hat unser Team ein tolles neues Monitoringtool für Agenturen gelauncht. Unter dem Namen koality.io haben wir einen Service geschaffen, der er Agenturen ermöglicht mit sehr geringen Kosten alle Ihre Webseiten zu überwachen.

Visuelle Regressionstests mit VisualCeption

Testen macht keinen Spaß. Zumindest macht es den meisten Leuten keinen Spaß. Außer mir, aber ich bin eh komisch. Aus dem Grund möchte ich heute mal ein Tool vorstellen, mit dem Testen ein wenig einfacher ist.

Das Werkzeug, welches ich heute dabei habe ist VisualCeption. Ein Aufsatz auf Codeception, mit dem ihr visuelle Regressionstests laufen lassen könnt. Ganz einfach und in einer Sprache die ihr beherrscht: PHP. Ok, jetzt habt ihr schon zwei mal den Begriff visuelle Regressionstests gelesen, ohne dass euch jemand erklärt hat, was das eigentlich ist. Eigentlich ist es ganz einfach. Ihr nehmt eine eurer Webseiten und sagt, dass sie sie wie sie gerade aussieht aussehen soll. Dann macht ihr einen Screenshot. Nach Änderungen im Code macht ihr genau das gleiche Bild und wenn sich etwas verändert hat, dann wird euch der „Fehler“ angezeigt. Klingt einfach und ist es auch.

Jetzt werden viele von euch aufschreien und bekannte Probleme von solchen Ansätzen hochwerfen. Wir denken aber, dass wir die meisten davon gelöst haben:

  • Veränderter Content. Viele Webseiten haben Werbung oder Sidebars, die sich permanent verändert. Jetzt wäre es doof, wenn unser System jedes mal abkacken würde, wenn ein neuer Werbebanner auf der Seite erscheint. Aus dem Grund gibt es die Möglichkeit bestimmte Elemente vor dem Screenshot von der Seite zu entfernen. Werbung zum Beispiel. Hier kann man alles einfach entfernen, was man über einen jQuery-Locator adressieren kann. Das Problem wäre also gelöst.
  • Manchmal ist aber eine Seite so instabil, dass man alles ausblenden müsste, um einen kleinen Bestandteil der Seite zu testen. Auch kein Problem. Wenn wir überprüfen, ob Änderungen aufgetreten sind, kann der Nutzer ein bestimmtes DIV auswählen, welches er fotografieren möchte. Hier kann man auch wieder auf alle jQuery-Selektoren zurückgreifen.
  • Interaktion mit der Webseite. Manchmal will man prüfen, ob ein Element bei Mouse Over oder anderen Interaktionen reagiert. Wenn man jetzt einfach einen Screenshot macht von der URL, dann wird da nichts passieren. Aus diesem Grund haben wir auf Codeception aufgesetzt, was uns eine vollständige Webdriver-Integration (Selenium) zur Verfügung stellt. Wir können also auf Knöpfe drücken, durch die Seite surfen, uns an und wieder abmelden. Eigentlich alles, was ein echter User machen kann.

Ich würde VisualCeption jedem empfehlen, der eine Software zu warten hat, die keine Unit Tests oder Integrationstests besitzt. Nutz man dieses Tool, kann man relativ schnell die wichtigsten Features abtesten. Was in einer Zeit des „Lean Testing“ wahrscheinlich der richtige Ansatz ist. Und da ich gar nicht mehr wirklich ein Freund von Unit Tests bin, finde ich das Tool doppelt toll.

Wer Schwachstellen in der Idee findet, der kann sie gerne hier posten. Das Tools wurde von zwei Kollegen und mir entwickelt und befindet sie, so wie es sich gehört auf GitHub. Falls euch also etwas fehlt, könnt ihr es auch selber hinzufügen.

PS: Soll ich eigentlich mal einen Artikel schreiben, warum ich Unit Tests eigentlich gar nicht mehr so mag?

Über den Autor

Nils Langner

Nils Langner ist der Gründer von "the web hates me" und auch der Hauptautor. Im wahren Leben leitet er das Qualitätsmanagementteam im Gruner+Jahr-Digitalbereich und ist somit für Seiten wie stern.de, eltern.de und gala.de aus Qualitätssicht verantwortlich. Nils schreibt seit den Anfängen von phphatesme, welches er ebenfalls gegründet hat, nicht nur für diverse Blogs, sondern auch für Fachmagazine, wie das PHP Magazin, die t3n, die c't oder die iX. Nebenbei ist er noch ein gern gesehener Sprecher auf Konferenzen. Herr Langner schreibt die Texte über sich gerne in der dritten Form.
Kommentare

5 Comments

  1. Ich kann Nils nur beipflichten – visuelle Regressionstests (in unserem Fall PhantomCSS) haben uns schon unzählige Male den A… gerettet.

    (Bei Unittests fällt mir gerade nicht ein, ob überhaupt schon einmal, aber die haben ja auch nicht unbedingt den selben Zweck)

    Reply
  2. Ich habe mir ganz oberflächlich schon ein paar solche Tools angesehen, aber keins davon basierte auf PHP und integrierte sich ins vorhandene Testsetup. Jetzt habe ich hier ein Projekt, das bereits Codeception für die Tests nutzt, da werde ich eure Erweiterung doch glatt mal ausprobieren. Allerdings muss ich erstmal ein paar Cases finden, die sich nicht so gut mit „normalen“ Acceptance Tests testen lassen, sondern für die eine visuelle Darstellung besser geeignet ist. Außerdem muss ich auf WebDriver umstellen und kann die codecept.phar nicht mehr benutzen, die bisher aus Faulheit einfach mit im Projekt liegt 😉

    Reply

Leave a Comment.

Link erfolgreich vorgeschlagen.

Vielen Dank, dass du einen Link vorgeschlagen hast. Wir werden ihn sobald wie möglich prüfen. Schließen