Automatisierung von CSS-Regressionstests

Der folgende Beitrag stammt von einem Gastautor, Garris Shipon. Wir haben uns hier bereits mit den vier Arten von CSS-Tests beschäftigt. Regressionstests sind die schwierigsten. Dabei versucht man zu testen, ob eine Änderung, die man am CSS vorgenommen hat, zu unerwarteten visuellen Problemen geführt hat. Dies wird durch responsive Designs noch erschwert. Garris hat ein Tool dafür entwickelt, als er mit einem neuen responsiven Design für eine große Website begann. Hier führt er Sie durch den gesamten Prozess.

Dieser Artikel wurde ursprünglich im Dezember 2014 veröffentlicht. Er wurde neu geschrieben, aktualisiert und im April 2016 erneut veröffentlicht, da BackstopJS, das hier vorgestellte Haupttool, aktualisiert wurde.

Ein Anwendungsfall für visuelle Regressionstests

Machen Sie eine Suche nach „CSS Regression Testing“ und ein gemeinsames Thema wird deutlich: CSS zu brechen ist einfach, es zu testen ist schwer.

Das war der Fall zu Beginn eines responsiven CSS-Refactoring-Projekts, das ich für einen großen Online-Händler konzipiert habe. Wie viele andere Webunternehmen zu dieser Zeit, waren wir dabei, einem massiven E-Commerce-Web-App, die ursprünglich für 1024px-Desktop-Bildschirme konzipiert war, responsive Verhaltensweisen hinzuzufügen.

Ich erkannte, dass dies ein regresionsanfälliger Job sein würde. Die Nachrüstung mehrerer Breakpoint-Verhaltensweisen bedeutete, dass wir wahrscheinlich viele schwer zu findende Anzeigefehler haben würden. Ich brauchte eine Möglichkeit für unsere Ingenieure, Fehler zu automatisieren, bevor wir unser QA-Team mit Hunderten von kleinen, kniffligen Layout-Problemen überhäuften.

Wo BackstopJS ins Spiel kommt

Die Lösung, die ich wollte, musste mit Webentwicklern gut funktionieren. Das heißt, einfach lokal zu installieren, vertraute Webentwicklungs-Paradigmen zu verwenden und ein angemessenes Maß an Vertrauen zu geben, dass eine für Mobilgeräte vorgenommene Selektoraänderung nicht zu einem schwer zu findenden Fehler im Desktop-Layout führt.

Zu dieser Zeit gab es nichts, was sofort passte. Das war der Grund für die Entwicklung von BackstopJS.

BackstopJS ist eine visuelle Regressionstest-App, die CasperJS, PhantomJS und ResembleJS in einer einfach zu konfigurierenden Testmatrix über mehrere App-Zustände (URLs), DOM-Elemente und Bildschirmgrößen hinweg kapselt.

Das Folgende ist eine 15-minütige Walkthrough einer Installation und einer ersten Konfiguration von BackstopJS.

Ein Tutorial zu visuellen Regressionstests

Dieses Tutorial basiert auf einem einfachen Demo-Projekt (ZIP hier herunterladen). Es stammt direkt von der Bootstrap Beispielseite.

Erweitern Sie die einfache Demo

Entpacken Sie den Projekt-Download. Wir werden das Test-Framework direkt in dieses Beispielprojekt installieren

Hier sehen Sie, was passiert, wenn Sie myCoolProject/index.html in einem Webbrowser öffnen… Denken Sie daran, es ist responsiv. Verkleinern Sie also unbedingt das Browserfenster, um das schmalste Layout zu sehen!

BackstopJS mit NPM installieren

Gehen Sie nun in Ihr Projekt-Root (`/myCoolProject/`) und führen Sie aus

$ cd ~/path-to-myProjects/myCoolProject
$ npm install backstopjs

Ihr Verzeichnis sollte jetzt so aussehen

Installation abgeschlossen! Nun kommen wir zu einigen grundlegenden Tests...

Erstellung einer BackstopJS-Konfigurationsvorlage

Der grundlegende Konfigurationsprozess ist von hier aus unkompliziert. Zur Vereinfachung kann BackstopJS eine Konfigurationsdatei generieren, die Sie für Ihr Projekt ändern können. Führen Sie im Verzeichnis `myCoolProject/node_modules/backstopjs/` aus

$ cd ~/path-to-myProjects/myCoolProject/node_modules/backstopjs/
$ npm run genConfig

Dadurch werden Dateien in Ihrem Projekt-Root hinzugefügt: Ordner für BackstopJS-Screenshots, `backstop_data`, und eine Boilerplate-Konfigurationsdatei `backstop.json`.

In der Konfigurationsdatei legen Sie Ihre Testregeln fest. Sehen wir uns diese Datei an.

{
  "viewports": [
    {
      "name": "phone",
      "width": 320,
      "height": 480
    }, {
      "name": "tablet_v",
      "width": 568,
      "height": 1024
    }, {
      "name": "tablet_h",
      "width": 1024,
      "height": 768
    }
  ],
  "scenarios": [
    {
      "label": "My Homepage",
      "url": "http://getbootstrap.com",
      "hideSelectors": [],
      "removeSelectors": [
        "#carbonads-container"
      ],
      "selectors": [
        "header",
        "main",
        "body .bs-docs-featurette:nth-of-type(1)",
        "body .bs-docs-featurette:nth-of-type(2)",
        "footer",
        "body"
      ],
      "readyEvent": null,
      "delay": 500,
      "onReadyScript": null,
      "onBeforeScript": null
    }
  ],
  "paths": {
    "bitmaps_reference": "../../backstop_data/bitmaps_reference",
    "bitmaps_test": "../../backstop_data/bitmaps_test",
    "compare_data": "../../backstop_data/bitmaps_test/compare.json",
    "casper_scripts": "../../backstop_data/casper_scripts"
  },
  "engine": "phantomjs",
  "report": ["browser", "CLI"],
  "cliExitOnFail": false,
  "debug": false,
  "port": 3001
}

In dieser Konfiguration sehen Sie drei `viewports`-Objekte. Eines für Telefon, vertikales Tablet und horizontales Tablet, jeweils mit den Eigenschaften `name` und `dimensions`. Sie können beliebig viele `viewports`-Objekte hinzufügen. BackstopJS benötigt mindestens eines.

Dann haben wir `scenarios`, die die URLs und Elementselektoren enthalten, die BackstopJS testen wird. Es ist sinnvoll, jedes Szenario-Objekt als Test für eine bestimmte statische Seite oder einen globalen App-Zustand zu betrachten. Fügen Sie beliebig viele `scenarios` hinzu. BackstopJS benötigt mindestens eines.

Innerhalb jedes Szenarios befindet sich eine Liste von Selektoren. Selektoren akzeptieren Standard-CSS-Notation. Für jeden von Ihnen angegebenen Selektor macht BackstopJS einen Screenshot und testet diesen Bereich Ihres Layouts. Ihr Selektorbereich kann so klein wie ein button oder so groß wie der body Ihrer Seite sein – lesen Sie die Dokumentation für weitere Informationen zur Verwendung dieser Funktion mit dynamischen Webanwendungen.

Bearbeiten der Konfigurationsvorlage

Für unsere Demo, nehmen Sie die folgende Änderung vor und ersetzen Sie den `scenarios`-Knoten in `myCoolProject/backstop.json`.

"scenarios": [
  {
    "label": "My Local Test",
    "url": "../../index.html",
    "hideSelectors": [],
    "removeSelectors": [
    ],
    "selectors": [
      "nav",
      ".jumbotron",
      "body .col-md-4:nth-of-type(1)",
      "body .col-md-4:nth-of-type(2)",
      "body .col-md-4:nth-of-type(3)",
      "footer"
    ],
    "readyEvent": null,
    "delay": 0,
    "onReadyScript": null,
    "onBeforeScript": null
  }
],

Referenz-Screenshots erstellen

Führen Sie im Verzeichnis `myCoolProject/node_modules/backstopjs/` aus...

$ npm run reference

Diese Aufgabe erstellt (oder aktualisiert eine bestehende) Bildschirmaufnahme, die alle angegebenen Selektoren bei jedem Breakpoint darstellt. Wenn der Prozess abgeschlossen ist, schauen Sie unter `/myCoolProject/backstop_data/bitmaps_reference/` nach

Bisher alles gut. Wir haben unseren Referenzsatz. Jetzt lassen Sie uns einen Test durchführen!

Unseren ersten Test ausführen

Wir sind dabei, unseren ersten Test auszuführen. Bedenken Sie jedoch, dass wir an unserer CSS noch nichts geändert haben, daher sollten unsere Tests bestanden werden!

Führen Sie im Verzeichnis `myCoolProject/node_modules/backstopjs/` aus

$ npm run test

Diese Aufgabe erstellt ein neues, zeitgestempeltes Verzeichnis mit Testbildern unter `/myCoolProject/backstop_data/bitmaps_test/<timestamp>`.

Sobald die Testbilder generiert sind, öffnet BackstopJS Ihren Webbrowser und zeigt einen Bericht an, der die neuesten Test-Bitmaps mit den aktuellen Referenzbildern vergleicht. Wesentliche Unterschiede (falls vorhanden) werden erkannt und angezeigt.

In diesem Fall, da wir keine Änderungen an unserer Testseite vorgenommen haben, sollte BackstopJS alle unsere Tests als bestanden anzeigen. Versuchen wir nun, unser CSS zu ändern und zu sehen, was passiert.

Aktualisieren unserer Index-Datei und Ausführen unseres zweiten Tests

Hier sehen Sie, was passiert, wenn Sie unsere (unveränderte) `myCoolProject/index.html` in einem Webbrowser öffnen. Achten Sie auf den Rand um den Text

Lassen Sie uns das vermasseln! Öffnen Sie `myCoolProject/index.html` und fügen Sie den folgenden Code direkt vor dem schließenden `</head>`-Tag ein

<style>
  .jumbotron {
    padding: 0px;
  }
</style>

So sieht die Seite jetzt aus

Das ist genau die Art von Dingen, die bei der Webentwicklung ständig passieren. Einige nicht abgekapselte Codes geraten hinein und vermasseln Ihr Layout gerade so sehr, dass Sie es vielleicht nicht bemerken :(

Führen Sie nun im Verzeichnis `myCoolProject/node_modules/backstopjs/` aus

$ npm run test

Unser Test sollte erneut ausgeführt werden und Fehler sollten gefunden werden. Scrollen Sie den Bericht nach unten, um eine visuelle Differenz der von uns gerade erstellten Probleme zu sehen...

Unsere visuelle Differenz enthält die Referenzaufnahme, die neueste Testaufnahme und die visuelle Differenzdatei.

Da haben Sie es: Regression gefunden!

Das ist ein sehr einfaches Beispiel. Im wirklichen Leben können Designer und Ingenieure an sehr großen oder komplexen CSS-Projekten arbeiten. Dann verbessert ein System wie dieses wirklich die Qualität und Konsistenz unserer Arbeit. Durch die Automatisierung repetitiver visueller Aufgaben können wir uns zuversichtlich kreativeren zuwenden.

Über den Workflow

Es gibt viele Möglichkeiten, diese Art von Tests in Ihren Workflow zu integrieren. Sie könnten Tests jedes Mal auslösen, wenn Sie bauen, oder Sie könnten Tests manuell ausführen (während Sie arbeiten oder kurz vor dem Push in die nächste Stufe). Sie könnten BackstopJS sogar in Ihre CI-Pipeline integrieren, wenn das Ihr Ding ist. All diese Themen liegen außerhalb des Umfangs dieses Artikels. Lesen Sie die Dokumentation für weitere Informationen.

Nächste Schritte

Seit der ersten Veröffentlichung im Jahr 2014 hat sich BackstopJS erheblich weiterentwickelt. Es wurden zahlreiche neue Funktionen von der Community entwickelt

• Unterstützung für SPA-Tests – Verwenden Sie Casper-Skripte und explizite Web-App-Trigger, um sicherzustellen, dass Screenshots zur richtigen Zeit innerhalb Ihrer Web-App aufgenommen werden (z. B. nach API-Antworten, nach Abschluss von CSS-Animationen oder warten Sie auf andere beobachtbare asynchrone Prozesse).
• Simulation von Benutzerinteraktionen – Verwenden Sie Casper-Skripte innerhalb Ihrer Szenarien, um Interaktionen mit Ihren On-Screen-Komponenten zu simulieren.
• Integration in die CI-Pipeline – Die CLI-Funktionen von BackstopJS haben fortgeschrittenen Benutzern die Möglichkeit gegeben, visuelle Regressionstests zu einem Teil ihres Continuous-Integration-Prozesses zu machen.
• Aktive Konfigurationsdateien – Ermöglicht aktive (node module) Logik innerhalb Ihrer Konfigurationsdateien, die Sie verwenden können, um das Testverhalten basierend auf der Umgebung oder anderen Bedingungen zu ändern, auf unterschiedliche Konfigurationsdateien verweisen, um Ihre BackstopJS-Instanz als zentralen Testserver für mehrere Umgebungen, Verticals, Profile, Projekte oder was auch immer zu nutzen.

Mehr über BackstopJS

• BackstopJS.org
• Finden Sie Dokumentation, melden Sie Fehler, erhalten Sie Hilfe zur Fehlerbehebung, lernen Sie fortgeschrittene Funktionen kennen und tragen Sie bei auf GitHub!