Screenshot-Tests sind eine sehr effektive Möglichkeit, die Benutzeroberfläche Ihrer App zu überprüfen. Screenshottests können in Komponenten-, Funktions- und Anwendungstests vorhanden sein.
Mit Tools von Drittanbietern können Sie sowohl instrumentierte als auch lokale Screenshot-Tests erstellen. Wenn Sie Compose verwenden, können Sie das offizielle Tool zum Testen von Compose-Vorschau-Screenshots verwenden.
Definition
Bei Screenshot-Tests wird ein Screenshot einer Benutzeroberfläche aufgenommen und mit einem zuvor genehmigten Bild verglichen, das als „Referenz“ oder „Golden“ bezeichnet wird:
Wenn die Bilder identisch sind, besteht der Test. Falls Unterschiede vorliegen, wird ein Bericht erstellt:
Sie haben zwei Möglichkeiten, auf den Bericht zu reagieren:
- Sie stellen fest, dass der neue Code einen Fehler enthält, und beheben ihn.
- Genehmigen Sie den neuen Screenshot und ersetzen Sie das Referenzbild durch das neue.
Screenshot-Tests haben einen anderen Workflow als reguläre Tests, da ein fehlgeschlagener Test nicht immer bedeutet, dass ein Fehler vorliegt.
Vorteile
Die Vorteile von Screenshot-Tests:
- Bei einem Screenshot-Test werden mehrere Behauptungen pro Test ausgeführt. Beispielsweise können mit einem einzigen Test Farben, Ränder, Größen und Schriftarten überprüft werden.
- Ein Screenshot-Test ist viel einfacher zu schreiben, zu verstehen und zu verwalten als ein gleichwertiger Verhaltenstest.
- Sie sind besonders nützlich, wenn Sie Regressionen bei verschiedenen Bildschirmgrößen überprüfen und erkennen möchten.
Nachteile
Screenshot-Tests haben jedoch auch Nachteile:
- Der Umgang mit den Referenzbildern kann mühsam sein, da bei einem großen Projekt Tausende von PNGs entstehen können.
- Auf verschiedenen Plattformen (Linux, macOS und Windows) werden leicht unterschiedliche Screenshots erstellt.
- Sie sind langsamer als gleichwertige Verhaltenstests.
- Eine große Anzahl von Screenshot-Tests kann zu Problemen führen, z. B. wenn eine einzelne Änderung Tausende von Screenshots betrifft.
In den folgenden Abschnitten finden Sie Empfehlungen zur Behebung dieser Probleme.
Screenshottests auf ein Minimum beschränken
Sie sollten die Anzahl der Screenshottests minimieren und gleichzeitig das Feedback und die Abdeckung für Regressionen maximieren.
Durch die Kombination von verschiedenen UI-Zuständen kann die Anzahl der Tests sehr schnell steigen. So können Sie einen Teil der Benutzeroberfläche Ihrer App überprüfen:
- Zu verschiedenen Themen
- Unterschiedliche Schriftgrößen verwenden
- Für unterschiedliche Bildschirmgrößen oder -ränder
Wenn Sie dies für jede Komponente, jedes Layout und jeden Bildschirm Ihrer App tun, haben Sie am Ende Tausende von Screenshotdateien, von denen die meisten Ihnen kein zusätzliches Feedback geben.
Wenn Sie beispielsweise eine benutzerdefinierte Schaltfläche mit hellem und dunklem Design und drei Schriftgrößen testen möchten, müssen Sie nicht alle Kombinationen erstellen. Stattdessen können Sie nur eines der Themen auswählen. Das liegt daran, dass die Art und Weise, wie die Schaltfläche auf lange Wörter reagiert, keine Auswirkungen auf das Design hat.
Referenzbilder speichern
Referenzbilder (oder goldene Bilder) sind normalerweise PNG-Dateien, die Sie in die Versionsverwaltung aufnehmen können. Git und die meisten Versionskontroll-Manager sind jedoch für Textdateien und nicht für große Binärdateien optimiert.
Sie haben drei Möglichkeiten, diese Dateien zu verwalten:
- Sie möchten Git weiterhin verwenden, aber die Speichernutzung minimieren.
- Verwenden Sie Git LFS.
- Verwenden Sie einen Cloud-Dienst, um die Screenshots zu verwalten.
Plattformunterschiede
Screenshottests nutzen Low-Level-Plattform-APIs, um bestimmte Funktionen wie Text oder Schatten zu zeichnen. Plattformen können diese auf unterschiedliche Weise implementieren. Wenn Sie auf einem Mac entwickeln und neue, lokal aufgenommene Screenshots speichern, werden auf einem Linux CI-Computer möglicherweise fehlerhafte Tests angezeigt.
Es gibt zwei Möglichkeiten, das Problem zu umgehen:
- Kleine Änderungen tolerieren
- Screenshots auf einem Server erstellen
Kleine Änderungen tolerieren
Sie können die meisten Screenshot-Testbibliotheken so konfigurieren, dass kleine Unterschiede beim Vergleichen von zwei Screenshots berücksichtigt werden.
Hierfür gibt es zwei Möglichkeiten:
- Konfigurieren Sie eine Toleranz basierend auf einem Prozentsatz der geänderten Pixel oder einem Prozentsatz der Gesamtdifferenz der Pixelwerte.
- Verwenden Sie einen intelligenten Differenzalgorithmus, um die strukturelle und semantische Ähnlichkeit anstelle der Pixel zu überprüfen.
Der Nachteil dieses Ansatzes besteht darin, dass es zu falsch positiven Ergebnissen kommen kann und Fehler nicht erkannt werden, die entweder unter dem Schwellenwert liegen oder fälschlicherweise als ähnlich genug eingestuft werden.
Screenshots auf einem Server erstellen
Wenn Sie einen pixelgenauen Vergleichsoperator für Screenshots verwenden möchten, müssen Sie dafür sorgen, dass Ihre Tests Screenshots unter denselben Bedingungen erstellen. Dazu können Sie Ihr Continuous Integration-System (CI) verwenden oder einen Cloud-Dienst nutzen.
Sie können beispielsweise einen Schritt in Ihrem CI-Workflow erstellen, der Folgendes tut:
- Führt die Screenshot-Tests aus (nur erforderlich, wenn keine pixelgenaue Übereinstimmung verwendet wird).
- Erfasst neue Screenshots, wenn der vorherige Schritt fehlgeschlagen ist.
- Die neuen Dateien werden in den Branch committet.
Bei diesem Ansatz schlagen die Screenshottests in der CI nie fehl, die Änderung wird jedoch für Sie geändert. So können Sie und die Prüfer der Änderungen die neuen Screenshots akzeptieren, indem Sie die Änderung zusammenführen.
Tools zum Testen von Screenshots
Beachten Sie die folgenden wichtigen Unterschiede zwischen den verfügbaren Tools und Bibliotheken für Screenshot-Tests:
- Umgebung: Lokale Tests, die auf dem Host ausgeführt werden, oder instrumentierte Tests, die auf einem Emulator oder Gerät ausgeführt werden.
- Rendering-Modul: Bei Lösungen für Screenshots auf Hostseite kann Layoutlib – das Rendering-Modul von Android Studio für Vorschauen – oder Robolectric Native Graphics (RNG) verwendet werden.
- Layoutlib-basierte Frameworks konzentrieren sich auf das Rendern statischer Komponenten, die verschiedene Status verwenden, um unterschiedliches Verhalten darzustellen. Sie sind in der Regel einfacher zu verwenden.
- Frameworks, die mit RNG integriert sind, können alle Funktionen von Robolectric nutzen, was Tests mit größerem Umfang ermöglicht.