Golden Test — यह क्या है, स्नैपशॉट टेस्टिंग कैसे काम करती है और अनुप्रयोग

Golden Test क्या है और यह कैसे काम करता है?

Golden Test — एक कंपोनेंट की विज़ुअल उपस्थिति की पिक्सेल-दर-पिक्सेल तुलना रेफरेंस से करके स्वचालित जाँच है। प्रक्रिया: (1) डेवलपर या टेस्टर कंपोनेंट का पहला स्नैपशॉट बनाता है — यह “golden” (रेफरेंस) है। (2) golden फ़ाइल टेस्ट के बगल में रिपॉजिटरी में सहेजी जाती है। (3) बाद के रन में, टेस्ट कंपोनेंट को फिर से रेंडर करता है और सहेजे गए golden से तुलना करता है। (4) यदि इमेज मेल खाती हैं — टेस्ट पास। यदि भिन्न हैं — टेस्ट फेल और diff दिखाता है। निर्णय: या तो बदलाव अपेक्षित हैं (golden अपडेट करें) या यह बग है।

Golden कैसे जनरेट होता है — लाइब्रेरी कंपोनेंट को बिना वास्तविक डिस्प्ले के ऑफ-स्क्रीन बफर (Android: Canvas, iOS: UIGraphicsImageRenderer) में रेंडर करती है। इसका मतलब है कि golden टेस्ट बिना स्क्रीन एमुलेटर (वर्चुअल डिस्प्ले) के CI पर काम करते हैं, जिससे निष्पादन तेज़ होता है। Android पर Paparazzi Android Studio के Layoutlib का उपयोग करता है — वही इंजन जो Layout Editor उपयोग करता है। iOSSnapshotTestCase CGImage में UIKit रेंडरिंग का उपयोग करता है। परिणाम — निश्चित आकार की PNG फ़ाइल।

Golden फ़ाइलों का आकार और भंडारण प्रबंधन

Golden फ़ाइलें — एक स्क्रीन (1080x1920) का PNG स्नैपशॉट जटिलता के आधार पर 200–800 KB लेता है। 500 golden टेस्ट वाले प्रोजेक्ट के लिए, यह रिपॉजिटरी में ~100–400 MB है। समाधान: (1) golden को Git LFS में स्टोर करें। (2) PNG कंप्रेशन (pngcrush, oxipng) का उपयोग करें। (3) golden को अलग स्टोरेज (S3) पर रखें और बिल्ड के दौरान लाएँ। IT Sectr में हम golden को Git LFS में 1 MB प्रति फ़ाइल की सीमा के साथ स्टोर करते हैं — यह 90% टेस्ट के लिए पर्याप्त है।

Flaky golden टेस्ट और उनका समाधान

Flaky golden टेस्ट — golden टेस्ट की मुख्य समस्या। विभिन्न GPU, फ़ॉन्ट संस्करण और एंटी-एलियासिंग पिक्सेल में सूक्ष्म अंतर पैदा करते हैं। समाधान: थ्रेशोल्ड (भिन्न पिक्सेल का अनुमेय प्रतिशत), फ़ज़ी तुलना, और समान CI एजेंटों पर चलाना (समान GPU, OS, एमुलेटर संस्करण)। Paparazzi पिक्सेल-परफेक्ट तुलना का उपयोग करता है, इसलिए CI एजेंट समान होने चाहिए।

Golden Test vs Screenshot Test: क्या अंतर है?

Golden Test — निश्चित रेफरेंस के साथ स्क्रीनशॉट टेस्टिंग का एक प्रकार है। “golden” शब्द का अर्थ है कि रेफरेंस को टीम द्वारा अनुमोदित किया गया है और रिपॉजिटरी में संग्रहीत है। किसी भी इमेज बदलाव के लिए डेवलपर से सचेत निर्णय की आवश्यकता होती है: golden अपडेट करें या कोड ठीक करें। Golden Test व्यक्तिगत कंपोनेंट (Composable, UIView) के स्तर पर काम करता है और वास्तविक डिवाइस की आवश्यकता नहीं होती।

Screenshot Test — एक व्यापक अवधारणा है। स्क्रीनशॉट टेस्ट वास्तविक डेटा, नेविगेशन, सिस्टम स्टेटस बार और एनिमेशन के साथ पूरी स्क्रीन कैप्चर कर सकता है। स्क्रीनशॉट टेस्ट अक्सर वास्तविक डिवाइस या एमुलेटर पर UI Automator (Android) या XCUITest (iOS) के माध्यम से चलाए जाते हैं। Golden टेस्ट यूनिट-टेस्ट वातावरण (JVM, XCTest) में बिना एमुलेटर के चलते हैं और केवल एक कंपोनेंट कैप्चर करते हैं।

कवरेज रणनीति: golden vs screenshot

Golden vs Screenshot — प्रत्येक कमिट पर व्यक्तिगत UI कंपोनेंट (बटन, कार्ड, डायलॉग) की जाँच के लिए golden टेस्ट। रिलीज़ से पहले पूरी स्क्रीन की E2E जाँच के लिए स्क्रीनशॉट टेस्ट। Golden टेस्ट डेवलपर को तेज़ फीडबैक देते हैं, स्क्रीनशॉट टेस्ट पूरे एप्लिकेशन की अखंडता में विश्वास दिलाते हैं। IT Sectr में हम Pull Request के लिए golden टेस्ट (3–5 मिनट) और रात्रिकालीन स्क्रीनशॉट टेस्ट (30–60 मिनट) का उपयोग करते हैं।

Paparazzi और Roborazzi: Android पर स्नैपशॉट टेस्टिंग

Paparazzi — Cash App (Square) की एक लाइब्रेरी जो Android View और Jetpack Compose कंपोनेंट्स को बिना एमुलेटर के PNG में रेंडर करती है। यह Layoutlib (Android Studio Preview का वही इंजन) का उपयोग करती है। सेटअप: Gradle प्लगइन जोड़ें, @Test और @RunWith(PaparazziRule::class) के साथ टेस्ट लिखें, paparazzi.snapshot(view) कॉल करें। Paparazzi एनिमेशन, वीडियो और Real Device का समर्थन नहीं करता — केवल स्थैतिक कंपोनेंट रेंडरिंग।

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

// Compose घटक के लिए Golden test
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 — Compose, View और इमेज तुलना के समर्थन के साथ Paparazzi का विकल्प। अंतर: Roborazzi Robolectric के माध्यम से काम करता है और थ्रेशोल्ड (अनुमेय पिक्सेल अंतर प्रतिशत) का समर्थन करता है। यह CI पर विभिन्न GPU के साथ अस्थिरता कम करता है। Roborazzi परिवर्तनों की GIF एनिमेशन (पहले/बाद/diff) भी बना सकता है, जो कोड समीक्षा के लिए सुविधाजनक है। फ़ाइल प्रारूप: PNG + JSON मेटाडेटा।

Golden अपडेट करना — जानबूझकर UI बदलाव के बाद, डेवलपर पुरानी golden फ़ाइलें हटाता है और record फ़्लैग के साथ टेस्ट चलाता है। Paparazzi सभी golden फ़ाइलें फिर से बनाता है। फिर डेवलपर कोड बदलाव के साथ नई golden फ़ाइलें कमिट करता है। कोड समीक्षा में, समीक्षक पुरानी और नई golden फ़ाइलों का diff देखता है। यदि बदलाव स्वीकृत होते हैं — PR मर्ज होता है। यदि नहीं — डेवलपर कोड ठीक करता है और टेस्ट फिर से चलाता है। CI पर golden फ़ाइलों को कभी स्वचालित रूप से अपडेट न करें — केवल स्थानीय रूप से।

iOS पर SwiftSnapshotTesting और iOSSnapshotTestCase

SwiftSnapshotTesting — pointfree.co की लाइब्रेरी, Composable Architecture के निर्माता। UIView, UIViewController, CALayer और SwiftUI View का समर्थन करती है। सिद्धांत: assertSnapshot(matching: view, as: .image)। पहले रन पर, golden स्वचालित रूप से बनता है। बाद के रन पर, तुलना होती है। यदि अंतर अनुमेय सीमा से अधिक है, तो टेस्ट फेल होता है। SwiftSnapshotTesting UIGraphicsImageRenderer के माध्यम से काम करता है, जो CI (Xcode Cloud, GitHub Actions) के साथ संगत है।

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 (पूर्व में FBSnapshotTestCase) — Uber की UIKit के लिए लाइब्रेरी। SwiftSnapshotTesting के विपरीत, iOSSnapshotTestCase को स्क्रीन आकार और ओरिएंटेशन निर्दिष्ट करने की आवश्यकता होती है। Golden फ़ाइलें ReferenceImages फ़ोल्डर में PNG हैं। लाभ: UIKit के साथ SwiftUI के बिना काम करता है और iOS 12+ का समर्थन करता है। नुकसान: golden स्वचालित रूप से अपडेट नहीं करता — record फ़्लैग के साथ चलाना होता है। SwiftSnapshotTesting अधिक आधुनिक है और नए प्रोजेक्ट्स के लिए अनुशंसित है।

डिवाइस-विशिष्ट golden — विभिन्न स्क्रीन आकारों और ओरिएंटेशन के लिए golden फ़ाइलें अलग-अलग होती हैं। मानक दृष्टिकोण: golden फ़ाइलों को TestName@3x~iPhone14.png के रूप में नाम देना। SwiftSnapshotTesting स्वचालित रूप से डिवाइस सफ़िक्स जोड़ता है यदि .image(on: .iPhoneSe) पैरामीटर निर्दिष्ट किया गया है। Android पर, Paparazzi आकार सेट करने के लिए DeviceConfig का उपयोग करता है। प्रत्येक समर्थित डिवाइस फ़ॉर्म फ़ैक्टर के लिए golden अलग-अलग स्टोर करें। विभिन्न आकारों के लिए एक golden का उपयोग न करें — इससे अस्थिर टेस्ट होंगे।

CI में golden फ़ाइलों के साथ काम करना और अपडेट प्रबंधन

CI पाइपलाइन — golden टेस्ट प्रत्येक Pull Request पर चलने चाहिए। यदि कोई टेस्ट फेल होता है, CI diff इमेज को बिल्ड आर्टिफ़ैक्ट के रूप में दिखाता है। डेवलपर diff की समीक्षा करता है और निर्णय लेता है। महत्वपूर्ण: CI पर जनरेट की गई golden फ़ाइलें कभी स्वचालित रूप से कमिट नहीं की जातीं। केवल जानबूझकर बदलाव के बाद डेवलपर द्वारा स्थानीय जनरेशन। GitHub Actions और GitLab CI ब्राउज़र में diff देखने के लिए आर्टिफ़ैक्ट (png, html) अपलोड का समर्थन करते हैं।

रिपॉजिटरी आकार — golden फ़ाइलें तेज़ी से बढ़ती हैं। 500 टेस्ट = 100–400 MB PNG। समाधान: (1) Git LFS — प्रत्येक golden LFS में संग्रहीत, केवल checkout पर क्लोन होता है। (2) golden को अलग रिपॉजिटरी में स्टोर करें और सबमॉड्यूल के रूप में शामिल करें। (3) S3 + कैशिंग — golden S3 पर, CI चेकसम द्वारा केवल बदली हुई फ़ाइलें डाउनलोड करता है। IT Sectr में हम Git LFS का उपयोग करते हैं track *.png filter=lfs diff=lfs merge=lfs text=false के साथ। स्थानीय रूप से, golden src/test/goldens/ में स्थित हैं।

Golden की कोड समीक्षा — सामान्य git diff PNG बदलाव नहीं दिखाता। समाधान: (1) GitHub क्लिक करने पर PNG इमेज खोलता है। (2) Review Apps का उपयोग करें जहाँ golden diff ब्राउज़र में दिखाई देता है। (3) पहले/बाद/diff कॉलम के साथ HTML रिपोर्ट जनरेट करें। Paparazzi तीन कॉलम वाली HTML रिपोर्ट बनाता है: वास्तविक, अपेक्षित, diff। रिपोर्ट CI आर्टिफ़ैक्ट से जुड़ी होती है। समीक्षक फ़ाइलें स्थानीय रूप से डाउनलोड किए बिना रिपोर्ट देखते हैं।

Golden कब अपडेट करें — केवल सचेत UI बदलाव के बाद। फ़ॉन्ट, रंग, पैडिंग, आइकन बदलना — golden अपडेट होना चाहिए। नया बटन जोड़ना, तत्वों को पुनर्व्यवस्थित करना — golden अपडेट होना चाहिए। बग फ़िक्स जो विज़ुअल उपस्थिति बदलता है — golden अपडेट होना चाहिए। UI बदलाव के बिना रिफ़ैक्टरिंग — golden नहीं बदलना चाहिए। यदि golden UI कोड बदलाव के बिना बदलता है — यह पर्यावरण के कारण flaky टेस्ट है, CI एजेंटों या डिपेंडेंसी संस्करणों में कारण खोजें।