Golden Test — was ist das, wie Snapshot-Testing funktioniert und Anwendung

Was ist Golden Test und wie funktioniert es?

Golden Test ist eine automatisierte Überprüfung des visuellen Erscheinungsbilds einer Komponente durch pixelgenauen Vergleich mit einer Referenz. Der Prozess: (1) Der Entwickler oder Tester erstellt den ersten Snapshot der Komponente — dies ist das „Golden“ (Referenz). (2) Die Golden-Datei wird neben dem Test im Repository gespeichert. (3) Bei nachfolgenden Ausführungen rendert der Test die Komponente erneut und vergleicht sie mit dem gespeicherten Golden. (4) Wenn die Bilder übereinstimmen — der Test ist grün. Wenn sie abweichen — der Test ist rot mit einem Diff. Entscheidung: entweder die Änderungen sind erwartet (Golden aktualisieren) oder es ist ein Fehler.

Wie das Golden generiert wird — die Bibliothek rendert die Komponente in einen Off-Screen-Puffer (Android: Canvas, iOS: UIGraphicsImageRenderer) ohne echten Bildschirm. Das bedeutet, dass Golden-Tests auf CI ohne Bildschirmemulator (virtuelles Display) funktionieren, was die Ausführung beschleunigt. Paparazzi auf Android verwendet Layoutlib aus Android Studio — dieselbe Engine wie der Layout-Editor. iOSSnapshotTestCase verwendet UIKit-Rendering in CGImage. Das Ergebnis ist eine PNG-Datei fester Größe.

Größe von Golden-Dateien und Speicherverwaltung

Golden-Dateien — ein PNG-Snapshot eines Bildschirms (1080x1920) belegt 200–800 KB je nach Komplexität. Für ein Projekt mit 500 Golden-Tests sind das ~100–400 MB im Repository. Lösungen: (1) Golden in Git LFS speichern. (2) PNG-Komprimierung verwenden (pngcrush, oxipng). (3) Golden auf getrenntem Speicher (S3) ablegen und beim Build abrufen. Bei IT Sectr speichern wir Golden in Git LFS mit einem Schwellenwert von 1 MB pro Datei — das reicht für 90% der Tests.

Flaky Golden-Tests und ihre Lösung

Flaky Golden-Tests — das Hauptproblem von Golden-Tests. Unterschiedliche GPUs, Schriftversionen und Anti-Aliasing erzeugen Mikrounterschiede in Pixeln. Lösungen: Schwellenwert (zulässiger Prozentsatz abweichender Pixel), Fuzzy-Vergleich und Ausführung auf identischen CI-Agents (gleiche GPU, OS, Emulatorversion). Paparazzi verwendet pixelgenauen Vergleich, daher müssen CI-Agents identisch sein.

Golden Test vs Screenshot Test: Was ist der Unterschied?

Golden Test ist eine Art von Screenshot-Test mit einer festen Referenz. Der Begriff „Golden“ bedeutet, dass die Referenz vom Team genehmigt und im Repository gespeichert ist. Jede Bildänderung erfordert eine bewusste Entscheidung des Entwicklers: Golden aktualisieren oder Code korrigieren. Golden Test arbeitet auf der Ebene einzelner Komponenten (Composable, UIView) und benötigt kein echtes Gerät.

Screenshot Test ist ein breiteres Konzept. Ein Screenshot-Test kann einen gesamten Bildschirm mit echten Daten, Navigation, System-Statusleiste und Animationen erfassen. Screenshot-Tests werden häufig auf echten Geräten oder Emulatoren über UI Automator (Android) oder XCUITest (iOS) ausgeführt. Golden-Tests laufen in einer Unit-Test-Umgebung (JVM, XCTest) ohne Emulator und erfassen nur eine einzelne Komponente.

Abdeckungsstrategie: Golden vs Screenshot

Golden vs Screenshot — Golden-Tests zur Überprüfung einzelner UI-Komponenten (Button, Karte, Dialog) bei jedem Commit. Screenshot-Tests für E2E-Überprüfung ganzer Bildschirme vor dem Release. Golden-Tests geben dem Entwickler schnelles Feedback, Screenshot-Tests geben Vertrauen in die Integrität der gesamten Anwendung. Bei IT Sectr verwenden wir Golden-Tests für Pull Requests (3–5 Minuten) und Screenshot-Tests nächtlich (30–60 Minuten).

Paparazzi und Roborazzi: Snapshot-Testing auf Android

Paparazzi — eine Bibliothek von Cash App (Square), die Android View- und Jetpack Compose-Komponenten ohne Emulator in PNG rendert. Sie verwendet Layoutlib (dieselbe Engine wie Android Studio Preview). Einrichtung: Gradle-Plugin hinzufügen, Test mit @Test und @RunWith(PaparazziRule::class) schreiben, paparazzi.snapshot(view) aufrufen. Paparazzi unterstützt keine Animationen, Videos oder Real Device — nur statisches Komponenten-Rendering.

// build.gradle.kts (module)
plugins {
    id("app.cash.paparazzi") version "1.3.1"
}

// Golden-Test für die Compose-Komponente
class ButtonGoldenTest {

    @get:Rule
    val paparazzi = Paparazzi(
        Paparazzi.PaparazziSnapshotConfig(
            deviceConfig = DeviceConfig.PIXEL_6,
            theme = "android:Theme.Material.Light.NoActionBar"
        )
    )

    @Test
    fun primary_button() {
        paparazzi.snapshot {
            Button(
                onClick = { },
                modifier = Modifier.width(200.dp)
            ) {
                Text("Submit")
            }
        }
    }
}

Roborazzi — eine Alternative zu Paparazzi mit Unterstützung für Compose, View und Bildvergleich. Unterschied: Roborazzi arbeitet über Robolectric und unterstützt einen Schwellenwert (zulässiger Pixelunterschiedsprozentsatz). Dies reduziert Flakiness bei unterschiedlichen GPUs auf CI. Roborazzi kann auch GIF-Animationen von Änderungen (vorher/nachher/diff) erstellen, was für Code-Reviews praktisch ist. Dateiformat: PNG + JSON-Metadaten.

Golden aktualisieren — nach einer absichtlichen UI-Änderung löscht der Entwickler alte Golden-Dateien und führt Tests mit dem Flag record aus. Paparazzi erstellt alle Golden-Dateien neu. Dann committed der Entwickler die neuen Golden-Dateien zusammen mit der Code-Änderung. Im Code-Review sieht der Reviewer das Diff alter und neuer Golden-Dateien. Wenn die Änderungen genehmigt werden — wird der PR gemergt. Wenn nicht — korrigiert der Entwickler den Code und startet die Tests neu. Aktualisieren Sie Golden-Dateien niemals automatisch auf CI — nur lokal.

SwiftSnapshotTesting und iOSSnapshotTestCase auf iOS

SwiftSnapshotTesting — eine Bibliothek von pointfree.co, den Entwicklern von Composable Architecture. Unterstützt UIView, UIViewController, CALayer und SwiftUI View. Prinzip: assertSnapshot(matching: view, as: .image). Beim ersten Lauf wird das Golden automatisch erstellt. Bei nachfolgenden Läufen wird verglichen. Wenn die Differenz den zulässigen Schwellenwert überschreitet, schlägt der Test fehl. SwiftSnapshotTesting arbeitet über UIGraphicsImageRenderer, das mit CI (Xcode Cloud, GitHub Actions) kompatibel ist.

import SnapshotTesting
import XCTest

final class ProfileCardSnapshotTests: XCTestCase {

    func test_profile_card_default() {
        let card = ProfileCard(
            name: "Alice",
            avatar: UIImage.testImage(),
            badge: "Pro"
        )
        let controller = UIHostingController(rootView: card)

        assertSnapshot(
            matching: controller,
            as: .image(on: .iPhoneSe),
            record: ProcessInfo.processInfo
                .environment["RECORD"] != nil
        )
    }
}

iOSSnapshotTestCase (ehemals FBSnapshotTestCase) — eine Bibliothek von Uber für UIKit. Im Gegensatz zu SwiftSnapshotTesting erfordert iOSSnapshotTestCase die Angabe von Bildschirmgröße und -ausrichtung. Golden-Dateien sind PNGs im Ordner ReferenceImages. Vorteil: funktioniert mit UIKit ohne SwiftUI und unterstützt iOS 12+. Nachteil: aktualisiert Golden nicht automatisch — muss mit Flag record ausgeführt werden. SwiftSnapshotTesting ist moderner und für neue Projekte empfohlen.

Gerätespezifisches Golden — Golden-Dateien unterscheiden sich für verschiedene Bildschirmgrößen und -ausrichtungen. Der Standardansatz: Golden-Dateien als TestName@3x~iPhone14.png benennen. SwiftSnapshotTesting fügt automatisch ein Gerätesuffix hinzu, wenn der Parameter .image(on: .iPhoneSe) angegeben ist. Auf Android verwendet Paparazzi DeviceConfig zur Größeneinstellung. Speichern Sie Golden für jeden unterstützten Geräte-Formfaktor separat. Verwenden Sie nicht ein Golden für verschiedene Größen — dies führt zu flaky Tests.

Arbeit mit Golden-Dateien im CI und Update-Verwaltung

CI-Pipeline — Golden-Tests sollten bei jedem Pull Request ausgeführt werden. Wenn ein Test fehlschlägt, zeigt CI das Diff-Bild als Build-Artefakt an. Der Entwickler überprüft das Diff und trifft eine Entscheidung. Wichtig: auf CI generierte Golden-Dateien werden niemals automatisch committed. Nur lokale Generierung durch den Entwickler nach einer absichtlichen Änderung. GitHub Actions und GitLab CI unterstützen das Hochladen von Artefakten (png, html) zum Anzeigen von Diffs im Browser.

Repository-Größe — Golden-Dateien wachsen schnell. 500 Tests = 100–400 MB PNG. Lösungen: (1) Git LFS — jedes Golden wird in LFS gespeichert, nur beim Checkout geklont. (2) Golden in einem separaten Repository speichern und als Submodul einbinden. (3) S3 + Caching — Golden auf S3, CI lädt nur geänderte Dateien per Prüfsumme herunter. Bei IT Sectr verwenden wir Git LFS mit track *.png filter=lfs diff=lfs merge=lfs text=false. Lokal liegen Golden in src/test/goldens/.

Code-Review von Golden — reguläres Git Diff zeigt keine PNG-Änderungen. Lösungen: (1) GitHub öffnet PNG-Bilder bei Klick. (2) Review Apps verwenden, wo Golden-Diffs im Browser sichtbar sind. (3) HTML-Bericht mit Spalten vorher/nachher/diff erstellen. Paparazzi erstellt einen HTML-Bericht mit drei Spalten: aktuell, erwartet, diff. Der Bericht wird den CI-Artefakten beigefügt. Reviewer sehen den Bericht, ohne Dateien lokal herunterzuladen.

Wann Golden aktualisieren — nur nach einer bewussten UI-Änderung. Schriftart-, Farb-, Abstands-, Symboländerung — Golden muss aktualisiert werden. Neuen Button hinzufügen, Elemente neu anordnen — Golden muss aktualisiert werden. Fehlerbehebung, die das visuelle Erscheinungsbild ändert — Golden muss aktualisiert werden. Refactoring ohne UI-Änderungen — Golden sollte sich nicht ändern. Wenn sich Golden ohne UI-Code-Änderungen ändert — ist es ein flaky Test aufgrund der Umgebung, suchen Sie die Ursache in CI-Agents oder Abhängigkeitsversionen.