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 বনাম Screenshot Test: পার্থক্য কী?

Golden Test — নির্দিষ্ট রেফারেন্স সহ স্ক্রিনশট টেস্টিংয়ের একটি প্রকার। “golden” শব্দের অর্থ রেফারেন্সটি দল দ্বারা অনুমোদিত এবং রিপোজিটরিতে সংরক্ষিত। যেকোনো ইমেজ পরিবর্তনের জন্য ডেভেলপারের সচেতন সিদ্ধান্ত প্রয়োজন: golden আপডেট করুন বা কোড ঠিক করুন। Golden Test পৃথক কম্পোনেন্ট (Composable, UIView) স্তরে কাজ করে এবং বাস্তব ডিভাইসের প্রয়োজন হয় না।

Screenshot Test — একটি বিস্তৃত ধারণা। স্ক্রিনশট টেস্ট বাস্তব ডেটা, নেভিগেশন, সিস্টেম স্ট্যাটাস বার এবং অ্যানিমেশন সহ সম্পূর্ণ স্ক্রিন ক্যাপচার করতে পারে। স্ক্রিনশট টেস্ট প্রায়শই বাস্তব ডিভাইস বা এমুলেটরে UI Automator (Android) বা XCUITest (iOS) এর মাধ্যমে চালানো হয়। Golden টেস্ট ইউনিট-টেস্ট পরিবেশে (JVM, XCTest) এমুলেটর ছাড়াই চলে এবং শুধুমাত্র একটি কম্পোনেন্ট ক্যাপচার করে।

কভারেজ কৌশল: golden বনাম screenshot

Golden বনাম 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। সুবিধা: SwiftUI ছাড়া UIKit-এর সাথে কাজ করে এবং 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 এজেন্ট বা ডিপেন্ডেন্সি সংস্করণে কারণ খুঁজুন।