SAPUI5 Visual Regression Tests

Brandeis Consulting & Cadao

Visual Regression Tests

Was sind Visual Regression Tests?

  • Automatisierte Tests zum Vergleich visueller Änderungen in der UI
  • Erkennen unbeabsichtigter Änderungen im Layout oder Design
  • Ergänzung zu funktionalen Tests wie OPA5

Framework

Wichtig

  • funktioniert zur Zeit nur lokal im VisualCode Editor. Da hierfür eine Chromium-basierte Browser-Engine benötigt wird, die im BAS nicht zur Verfügung steht
Brandeis Consulting & Cadao

Ablauf eines Visual Regression Tests

  • Baseline erstellen
    • Aufnahme des initialen, korrekten Zustands der UI
  • Testdurchführung
    • Automatisierte Aufnahme neuer Screenshots
  • Vergleich
    • Automatischer Vergleich mit der Baseline
  • Analyse
    • Überprüfung der Unterschiede
Brandeis Consulting & Cadao

BackstopJs installieren / konfigurieren

  • Wir installieren BackstopJs as DevDependency indem im Terminal folgendes``
    eingeben:
npm i –-save-dev backstopjs
  • Nach der Installation geben wir im Terminal folgendes ein:
npx backstop init
  • Darauf hin wird eine backstop.json angelegt. Diese öffnen wir und ändern den Code wie folgt:
  • Wir ändern den Inhalt des viewports Arrays in:
"viewports": [
  {
    "label": "desktop",
    "width": 1280,
    "height": 1024
  }
],
Brandeis Consulting & Cadao

BackstopJs konfigurieren

  • Wir ändern den Inhalt des scenarios Arrays in:
  "scenarios": [
    {
      "label": "Walkthrough Invoices",
      "cookiePath": "backstop_data/engine_scripts/cookies.json",
      "url": "http://localhost:8080/test/mockServer.html",
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 5000,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold": 0.01,
      "requireSameDimensions": true
    }
  ],
Brandeis Consulting & Cadao

BackstopJs Erläuterungen

Parameter Erläuterungen

  • label
    Name für das Test-Szenario
  • url
    Die URL die getestet werden soll
  • delay
    Bei großen Anwendungen sollte er erhöht werden. Abhängig davon, wie schnell die Seite gerendert wird. Ansonsten wird nur ein Screenshot des weißen Hintergrunds erzeugt.
  • misMatchThreshold
    Schwellwert für die prozentuale Pixelabweichung von der Baseline.
    Bei sehr kleinen Abweichungen sollte der Wert nach unten angepasst werden.
Brandeis Consulting & Cadao

Baseline erstellen

Definition

  • Die Baseline ist der "Referenzzustand" einer Anwendung
  • Dient als Vergleichsbasis für zukünftige Tests
  • Repräsentiert den korrekten, erwarteten Zustand der UI
  • Wird zu einem bestimmten Zeitpunkt erstellt und gespeichert (hier als PNG)

Baseline erstellen

  • Wir führen folgende Befehle im Terminal aus.
    • Der erste Test schlägt fehl. Der Grund dafür ist, dass es keine Bilder gibt, die für den Vergleich verwendet werden können. Das Verhalten ist aber normal
npx backstop test
  • Nun definieren wir die Baseline mit:
    • Dies fügt die Bilder zur Baseline hinzu. Sie werden als normale Bilder im Verzeichnis bitmaps_reference gespeichert
npx backstop approve
Brandeis Consulting & Cadao

Asuführen der Visual Tests

  • Nun, da die Baseline definiert ist, können wir gegen sie testen.
npx backstop test
  • Das Ergebnis wird im Browser angezeigt (oder auch in den Ordnern bitmaps_test und html_report)
    • Da wir noch keine Änderungen vorgenommen haben ist der Test grün

Brandeis Consulting & Cadao

Fehler provozieren bei Visual Tests

  • Wir provizieren einen Fehler, indem wir einige Änderungen in der webapp\localService\mockdata\Invoices.json druchführen.
  • z.B. ändern wird den ProductName von Milk zu Banana
  • Wir lassen den Test nun nochmal laufen
npx backstop test
  • Alle Änderungen sind jetzt magenta markiert.

Brandeis Consulting & Cadao

Ergebnis

Brandeis Consulting & Cadao

Best Practices für Visual Regression Tests

  • Konsistente Testumgebung
    • Gleiche Bildschirmgrößen und Auflösungen verwenden
  • Dynamische Inhalte berücksichtigen
    • Strategien für den Umgang mit sich ändernden Daten
  • Selektive Tests
    • Fokus auf kritische UI-Komponenten
  • Regelmäßige Baseline-Updates
    • Nach geplanten UI-Änderungen
  • Integration in CI/CD-Pipeline
    • Automatisierte visuelle Tests bei jedem Build
Brandeis Consulting & Cadao