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?