Screenshot Test: apa itu, jenis dan cara kerjanya dalam pengujian

Apa itu Screenshot Test dan mengapa diperlukan?

Screenshot Test — adalah pengujian end-to-end antarmuka pengguna, di mana test membuka layar aplikasi, melakukan tindakan (tap, memasukkan teks, scroll) dan mengambil tangkapan layar dari kondisi yang diperoleh. Tangkapan layar dibandingkan dengan referensi (baseline) yang disimpan di repositori. Jika tangkapan layar berbeda — test gagal. Screenshot test mendeteksi regresi visual yang tidak terlihat di unit test: margin yang salah, elemen yang tumpang tindih, warna yang salah.

Mengapa screenshot test diperlukan jika sudah ada golden test — golden test memeriksa komponen secara terisolasi: satu tombol, satu kartu, satu teks. Screenshot test memeriksa seluruh layar di lingkungan yang sedekat mungkin dengan produksi: navigasi nyata, data nyata (atau mock yang paling realistis), font sistem nyata, status bar nyata. Hanya screenshot test yang akan menunjukkan bahwa tombol tumpang tindih dengan elemen lain pada perangkat nyata.

Nilai bisnis screenshot test

Nilai bisnis — menurut data Google (2023), bug visual mencakup 15-25% dari semua bug aplikasi mobile. Screenshot test mengotomatiskan pemeriksaan kualitas visual yang sebelumnya dilakukan secara manual oleh insinyur QA. Satu screenshot test menggantikan 5-10 menit pengujian manual satu layar. Untuk aplikasi dengan 50 layar, penghematan: 4-8 jam-kerja untuk satu kali run regresi. Screenshot test akan terbayar dalam 2-3 siklus rilis.

Screenshot Test vs Golden Test: perbandingan pendekatan

Golden test lebih cepat dan sederhana: render komponen di buffer off-screen membutuhkan milidetik, tidak memerlukan perangkat, stabil di CI. Screenshot test lebih realistis: menangkap layar nyata dengan elemen sistem, mendukung animasi dan navigasi, bekerja pada perangkat nyata. Pilihan tergantung pada tujuan: umpan balik cepat untuk pengembang (golden) atau realisme maksimal sebelum rilis (screenshot).

Strategi cakupan: golden + screenshot

Golden + Screenshot — gunakan golden test untuk setiap komponen UI di pustaka komponen (Design System). 80% regresi visual tertangkap di tingkat komponen. Screenshot test — untuk jalur pengguna kritis: onboarding, login, alur pembayaran, keranjang. 20% regresi terkait integrasi komponen di layar nyata hanya tertangkap oleh screenshot test. Di IT Sectr kami menggunakan rasio 80/20: 400 golden + 100 screenshot.

Kapan screenshot test tidak diperlukan — jika layar terdiri dari konten statis tanpa interaktivitas, golden test komponen memberikan tingkat pemeriksaan yang sama dengan biaya lebih rendah. Jika layar berubah secara dinamis (feed, chat), screenshot test memerlukan konfigurasi data yang rumit dan waktu tunggu. Dalam kasus seperti itu, gunakan screenshot untuk status dasar (daftar kosong, memuat) dan golden untuk kartu individu dalam daftar.

UI Automator dan Firebase Test Lab untuk Android

UI Automator — framework Android untuk pengujian UI antar-aplikasi. Memungkinkan mengambil tangkapan layar melalui UiDevice.takeScreenshot(). Berbeda dengan Espresso (bekerja di dalam satu aplikasi), UI Automator dapat berinteraksi dengan dialog sistem (izin, notifikasi) dan aplikasi lain. Screenshot test di UI Automator: buka aplikasi, tunggu pemuatan, ambil tangkapan layar, bandingkan dengan referensi.

class LoginScreenScreenshotTest {

    @get:Rule
    val rule = ComposeTestRule.createAndroidComposeRule<MainActivity>()

    @Test
    fun login_screen_default() {
        val device = UiDevice.getInstance(
            InstrumentationRegistry.getInstrumentation()
        )

        // Menunggu layar dimuat
        IdlingRegistry.getInstance().waitForIdle()

        // Ambil screenshot
        val screenshot = device.takeScreenshot()
        val golden = loadGolden("login_default.png")

        // Bandingkan dengan referensi
        val diff = ImageComparator.compare(screenshot, golden)
        assertTrue(diff.similarity > 0.98)
    }
}

Firebase Test Lab — layanan Google Cloud untuk menjalankan test instrumental pada ratusan perangkat nyata secara paralel. Screenshot test di Firebase Test Lab menangkap tangkapan layar pada berbagai perangkat (Pixel 7, Galaxy S24, Xiaomi 14) dan membandingkannya dengan referensi. Kelebihan: satu test memeriksa UI pada 20 perangkat dalam 10-15 menit. Kekurangan: biaya ($1-5 per test pada 20 perangkat). Firebase Test Lab terintegrasi dengan CI melalui gcloud CLI atau plugin Gradle.

Shot: pustaka untuk menyederhanakan screenshot test

Shot — pustaka untuk screenshot test di Android yang memudahkan pembuatan dan perbandingan tangkapan layar. Shot bekerja di atas Espresso dan UI Automator, menambahkan manajemen golden (membuat, memperbarui, menghapus), perbandingan dengan ambang (piksel atau persentase) dan pembuatan laporan HTML. Shot cocok untuk proyek yang ingin menerapkan screenshot test dengan cepat tanpa menulis infrastruktur perbandingan gambar sendiri.

XCUITest dan Xcode Cloud untuk iOS

XCUITest — framework Apple untuk pengujian UI aplikasi iOS, iPadOS dan tvOS. Screenshot test di XCUITest menggunakan XCUIScreen.main.screenshot() untuk menangkap layar dan XCAttachment untuk menyimpan tangkapan layar. XCUITest mensimulasikan tindakan pengguna: tap, swipe, typeText, dan mengambil tangkapan layar setelah setiap langkah. Di Xcode 16+ dukungan bawaan untuk membandingkan tangkapan layar dengan referensi melalui XCTAttachment telah ditambahkan.

final class LoginScreenScreenshotTests: XCTestCase {

    var app: XCUIApplication!

    override func setUp() {
        super.setUp()
        app = XCUIApplication()
        app.launch()
    }

    func test_login_initial_state() {
        let loginButton = app.buttons["login_button"]
        XCTAssertTrue(loginButton.exists)

        // Ambil screenshot
        let screenshot = app.screenshot()
        let attachment = XCTAttachment(screenshot: screenshot)
        attachment.name = "Login-Screen-Initial"
        attachment.lifetime = .keepAlways
        add(attachment)

        // Perbandingan dengan referensi (memerlukan XCTAttachment + golden)
        assertScreenshot(
            screenshot: screenshot,
            goldenName: "login_initial_state"
        )
    }
}

Xcode Cloud — CI cloud dari Apple untuk membangun dan menguji aplikasi iOS. Xcode Cloud mendukung menjalankan test XCUITest pada simulator. Screenshot test dapat dijalankan pada beberapa simulator secara paralel (iPhone 15, iPhone 15 Pro Max, iPad Pro). Hasil: XCResult Bundle dengan lampiran. Xcode Cloud tidak terintegrasi di GitHub/GitLab — gunakan Xcode Cloud Webhooks untuk integrasi. Alternatif: GitHub Actions dengan macos-14 dan xcodebuild.

Framework perbandingan — iOSSnapshotTestCase (Uber) juga berfungsi untuk screenshot test jika dijalankan di simulator. SwiftSnapshotTesting (pointfree) lebih berfokus pada golden test komponen. Untuk screenshot test di iOS gunakan alat bawaan XCUITest + XCTAttachment + ImageComparator kustom (Pixelmator atau AImage). Di CI gunakan simulator — pada perangkat nyata screenshot test hanya berfungsi melalui Device Farm (AWS Device Farm).

Proses otomatisasi screenshot test di CI

Manajemen baseline — tangkapan layar referensi disimpan di repositori (Git LFS) atau di S3. Setiap tangkapan layar diberi nama sesuai template: {testName}_{device}_{orientation}_{locale}.png. Contoh: loginScreenPixel7PortraitRu.png. Saat menambahkan perangkat atau locale baru, baseline baru dibuat. Saat UI berubah, baseline lama diganti dengan yang baru setelah code review. Baseline adalah bagian dari basis kode, sama seperti sumber test.

CI Pipeline — (1) Membangun aplikasi. (2) Menjalankan screenshot test pada emulator/simulator. (3) Membandingkan tangkapan layar dengan baseline. (4) Jika tidak cocok — menghasilkan gambar diff. (5) Mengunggah artefak diff (actual, expected, diff — tiga file). (6) Menerbitkan laporan HTML dengan tabel hasil. (7) Jika ambang terlampaui — test gagal. (8) Reviewer memeriksa artefak diff dan mengambil keputusan: setujui (perbarui baseline) atau tolak (perbaiki kode).

Ambang dan toleransi — perbandingan absolut piksel per piksel terlalu ketat. Gunakan SSIM (Structural Similarity Index) atau MSE (Mean Squared Error). SSIM 0.98 = 98% kesamaan struktural — ambang yang baik. Untuk layar yang berbeda mungkin diperlukan ambang yang berbeda: tema gelap (lebih banyak hitam — akurasi lebih tinggi), gradien (lebih banyak noise — akurasi lebih rendah). Konfigurasikan ambang per-test melalui parameter: @ScreenshotTest(threshold = 0.99).

Device Farm vs Simulator — test pada perangkat nyata (Firebase Test Lab, AWS Device Farm) memberikan realisme maksimal, tetapi lambat dan berbayar. Test pada simulator/emulator — cepat dan gratis, tetapi tidak menunjukkan karakteristik perangkat nyata (GPU berbeda, reproduksi warna layar, kerapatan piksel). Strategi: simulator untuk pemeriksaan pre-merge (5 menit), Device Farm untuk nightly (30 menit, 20 perangkat). Di IT Sectr kami menggunakan Firebase Test Lab untuk run nightly pada 10 perangkat Android teratas.