Self-Hosted Visual Regression Testing: BackstopJS vs. Argos (and What Happened to Lost Pixel)

Bayangkan menstandarkan CI Anda pada salah satu dari tiga alat pengujian regresi visual open source yang semua orang masukkan ke daftar pendek (BackstopJS, Argos, Lost Pixel) dan menemukan, seminggu setelah memulai penelusuran, bahwa dua dari tiga bukanlah seperti yang terlihat dari luar. Argos punya kode yang sangat baik di GitHub, tetapi pengelolanya terus terang menyatakan bahwa self-hosting tidak didukung maupun didokumentasikan. Lost Pixel diarsipkan pada 22 April 2026, ketika timnya bergabung dengan Figma, dan tidak menyediakan jalur migrasi apa pun bagi tim yang sudah menjalankannya.

Itu menyisakan tepat satu dari tiga yang benar-benar dapat di-self-host dan dipelihara saat ini. Yang merupakan hal aneh untuk dikatakan tentang sebuah kategori dengan begitu banyak pilihan yang tampak, tetapi begitulah lanskapnya sebenarnya. Alat-alat yang diperlakukan orang sebagai tiga yang setara, dalam praktiknya adalah satu opsi self-hosted yang berfungsi, satu alat kuat yang hidup di server orang lain, dan satu yang seharusnya sedang Anda tinggalkan.

Ini adalah tinjauan yang mengutamakan self-hosting terhadap alat-alat pengujian regresi visual self-hosted yang bertahan menghadapi kenyataan: mana yang cocok dengan kendala mana, dan apa yang harus dilakukan jika Anda sedang memakai Lost Pixel sekarang.

Versi Singkat

• BackstopJS adalah opsi yang dapat di-self-host, dipelihara, berlisensi MIT, dan tanpa biaya. Puppeteer secara bawaan dengan dukungan Playwright, pembandingan piksel via Resemble.js, dan UI peninjauan HTML (dengan catatan soal rendering Docker yang perlu Anda rencanakan).
• Argos adalah alat yang lebih kuat dari sisi alur kerja (peninjauan PR dan pembandingan snapshot ARIA sejak akhir 2025), tetapi dalam praktiknya adalah SaaS terkelola. Pengelola tidak menyediakan dukungan maupun dokumentasi untuk menjalankannya sendiri.
• Lost Pixel diarsipkan pada April 2026. Jangan mengadopsinya untuk pekerjaan baru, dan jika Anda memakainya, rencanakan migrasi Anda sekarang.

Vonis satu baris: untuk pipeline CI yang sepenuhnya self-hosted, BackstopJS adalah pilihan praktis. Jika Anda ingin alur kerja peninjauan terbaik dan bisa menerima ketergantungan SaaS, Argos adalah alat yang lebih baik.

(Yang tidak dicakup di sini: pengujian visual berbasis Cypress, alur kerja komponen khusus Storybook, dan angka performa hasil pengukuran langsung. Perbandingan ini dibangun dari fakta sumber primer, bukan dari rangkaian uji yang saya jalankan sendiri.)

Lanskap pengujian regresi visual self-hosted telah berubah

Dua peristiwa spesifik dalam setahun terakhir telah membentuk ulang daftar pendek ini, dan keduanya mudah terlewat jika Anda bekerja dari sebuah listicle yang ditulis sebelum keduanya terjadi.

Yang pertama: dalam sebuah diskusi GitHub pada September 2025seorang pengelola Argos menyatakan bahwa Argos tidak menyediakan dukungan atau dokumentasi untuk menjalankannya di luar layanan terkelola. Kodenya berlisensi MIT dan terbuka, jadi "Anda bisa men-self-host-nya" secara teknis benar, tetapi tidak ada jalur yang didukung, sebuah perbedaan yang menjadi sangat penting begitu Anda menjadi orang yang berjaga untuknya.

Yang kedua: repositori Lost Pixel diarsipkan pada 22 April 2026, hanya-baca, ketika timnya mengumumkan bahwa mereka bergabung dengan Figma. Tidak ada panduan migrasi yang menyertai penghentiannya. Sebuah alat yang, hingga baru-baru ini, merupakan alternatif self-hosted gratis yang sah bagi Percy dan Chromatic, kini menjadi ketergantungan tanpa pengelola.

Kedua perubahan menunjuk arah yang sama. Alasan tim berakhir di sini sejak awal, harga SaaS yang tumbuh seiring peramban dikali viewport dikali halaman, atau aturan kepatuhan yang melarang mengunggah tangkapan layar UI yang belum dirilis ke pihak ketiga, tidak hilang. Yang berubah adalah bahwa menu self-hosted lebih pendek daripada yang terlihat.

Poin utama bagian ini: Hanya satu dari tiga alat yang dimasukkan orang ke daftar pendek yang benar-benar dapat di-self-host dan dipelihara secara aktif saat ini.

BackstopJS: opsi yang benar-benar dapat di-self-host

Instalasinya adalah npm install -g backstopjs (atau instalasi proyek lokal), dan satu fakta itu menjelaskan sebagian besar alasan BackstopJS menang pada poros self-hosting: tidak ada layanan yang perlu direkayasa balik, tidak ada backend terkelola yang secara diam-diam menjadi ketergantungannya. Ia berjalan sebagai paket npm atau kontainer Docker di infrastruktur yang Anda kendalikan, di bawah lisensi MIT, dengan biaya lisensi nol. README mencatat bahwa lini saat ini (6.3.x) mendukung Node 20.

Di balik layar ia menjalankan Puppeteer secara bawaan (Chrome headless) dan juga mendukung Playwright di chromium, firefox, dan webkit. Pembandingan berbasis piksel via Resemble.js, dengan sebuah nilai yang dapat dikonfigurasi misMatchThreshold yang mengendalikan seberapa banyak pergeseran piksel dihitung sebagai kegagalan. Persetujuan terjadi melalui laporan HTML dengan UI di dalam peramban untuk menerima perubahan.

Keterbatasan adalah tempat keputusan strategis dibuat. BackstopJS tidak punya alur kerja pemblokiran PR bawaan: ia akan memberi tahu Anda bahwa sebuah diff ada, tetapi menyambungkannya ke gerbang "PR ini tidak boleh di-merge" ada di tangan Anda. Konfigurasinya hidup dalam JSON, satu skenario sekaligus, dan pada beberapa ratus kasus uji JSON itu sendiri menjadi permukaan pemeliharaan tersendiri. Pengembangannya lambat ketimbang cepat: proyeknya tidak diarsipkan, paketnya saat ini berada di versi 6.3.25, dan repositorinya menunjukkan kira-kira 7.200 bintang GitHub dan 516 issue terbuka. Jadi perlakukan BackstopJS sebagai matang dan dapat dipakai, bukan sebagai platform pengujian visual yang berkembang cepat.

Risiko operasional paling tajam adalah rendering Docker. Dua issue, tangkapan layar putih atau terpotong di Docker (#1156) dan hasil tidak konsisten setelah pemutakhiran Docker ke v5.3.0 (#1303), telah terbuka bertahun-tahun tanpa penyelesaian. Docker sekaligus persis yang Anda inginkan untuk CI, karena menormalkan rendering antarmesin. Jadi alat yang memberi Anda paling banyak kendali juga memberi Anda kelas ketidakstabilan yang dikenal dan belum diperbaiki tepat di penyiapan tempat Anda akan menjalankannya. Itu risiko yang bisa direncanakan, bukan pemecah kesepakatan, tetapi harus ada di meja sebelum Anda berkomitmen.

Kiat pro: jebakan baseline lintas sistem operasi. Jika pengembang Anda mengambil baseline di macOS dan runner CI Anda adalah Linux, pengujian Anda akan gagal hanya karena perbedaan anti-aliasing font, sebelum ada regresi nyata sekalipun. Seperti yang telah didokumentasikanoleh seorang praktisi, rendering font berbeda antara image Linux yang dipakai layanan CI dan mesin macOS lokal, cukup untuk membuat sebuah uji visual gagal dengan sendirinya. Solusinya adalah menghasilkan dan membandingkan baseline dalam satu lingkungan (jalankan BackstopJS secara lokal di dalam image Docker yang sama dengan yang Anda pakai di CI), agar gambar referensi dan pembanding berasal dari rendering yang identik.

Argos: alur kerja terbaik, tetapi SaaS dalam praktik

Argos mengena pada pengalaman peninjauan dengan cara yang tidak dicapai BackstopJS, dan itulah seluruh alasan ia ada di daftar ini meski ada catatan self-hosting. Ia berintegrasi dengan Playwright, Cypress, Storybook, WebdriverIO, dan Puppeteer, serta terhubung ke GitHub Actions, GitLab CI, Bitbucket, dan Azure DevOps. Alur kerja peninjauan PR adalah permukaan produk kelas satu, dan ia terus bergerak. Entri changelog terbaru menambahkan peninjauan kolaboratif dengan komentar tersemat (Juni 2026) dan pengabaian otomatis perubahan yang tidak stabil.

Pembeda teknis paling menariknya adalah pembandingan. Di atas pembandingan piksel deterministik, Argos menambahkan pembandingan snapshot ARIA untuk SDK Playwright-nya pada 4 November 2025. Pembandingan snapshot ARIA membandingkan pohon aksesibilitas (peran, label, dan struktur) bersama tangkapan layar piksel, yang menangkap satu kelas regresi semantik dan aksesibilitas yang bisa terlewat oleh pembandingan piksel murni (misalnya tombol yang masih tampak identik tetapi kehilangan label aksesibelnya). Bagi tim dengan komitmen aksesibilitas, itu kemampuan nyata yang tidak ditawarkan alat piksel-saja.

Lalu ada kendalanya. Kodenya MIT, tetapi produknya adalah layanan terkelola, dan pengelola telah tegas bahwa self-hosting tidak terdokumentasi dan tidak didukung. Anda bisa membangunnya dari sumber. Anda melakukannya hanya dengan menyadari bahwa perubahan hulu mana pun bisa merusak deployment Anda dan tidak ada yang wajib membantu. Ada ketidakpastian terkait yang layak ditandai ketimbang ditegaskan: laporan komunitas menyarankan bahwa integrasi GitLab Self-Managed mengharapkan paket Enterprise (saya memperlakukan itu sebagai sinyal komunitas, bukan spesifikasi terkonfirmasi, jadi verifikasi terhadap penyiapan Anda sendiri sebelum ia menggerakkan sebuah keputusan).

Ini menghasilkan celah yang tidak nyaman. Sebuah tim dengan persyaratan privasi ketat (persis tim yang paling termotivasi untuk men-self-host) yang juga menginginkan pengalaman peninjauan Argos tidak punya jalur yang baik. Mereka bisa memakai layanan terkelola dan menerima ketergantungan pihak ketiga, atau men-self-host tanpa dukungan, atau memilih alat lain. Tidak ada pintu keempat yang bersih, dan lebih jujur menyebutnya daripada berpura-pura lisensi open source menutupnya.

Poin utama bagian ini: Argos adalah alat yang lebih kuat. Men-self-host-nya tidak didukung dan rapuh secara operasional.

Lost Pixel: diarsipkan, dan apa yang harus dilakukan jika Anda memakainya

Spanduk banner milik repositori Lost Pixel sendiri adalah seluruh ceritanya dalam satu baris: repositorinya diarsipkan oleh pemiliknya pada 22 April 2026 dan kini hanya-baca. Timnya bergabung dengan Figma, rilis terakhir adalah v3.22.0 pada November 2024, dan tidak ada panduan migrasi yang diterbitkan.

Hingga pengarsipan, Lost Pixel adalah pilihan yang masuk akal (rendering berbasis Docker, dukungan Playwright dan Storybook plus Ladle dan Histoire, serta pengujian visual halaman penuh maupun tingkat komponen). Tidak satu pun dari itu berubah secara teknis pada 22 April. Yang berubah adalah kini ia tidak punya pengelola, tidak ada tambalan keamanan, dan tidak ada roadmap, yang bagi sebuah ketergantungan CI adalah mendiskualifikasi untuk pekerjaan baru sebaik apa pun versi saat ini berjalan.

Jika Anda memakainya hari ini, migrasinya terbagi berdasarkan cara Anda memakainya. Jika Anda bergantung pada pengujian tingkat komponennya, terutama alur kerja Storybook atau Ladle, pengganti terdekat Anda adalah layanan terkelola Argos atau pengujian tangkapan layar bawaan Playwright. BackstopJS bisa menangkap selektor atau URL Storybook, tetapi tidak memberi Anda alur kerja komponen bawaan yang sama seperti Lost Pixel, jadi Anda perlu memodelkan sendiri keadaan komponen itu. Jika Anda memakainya untuk regresi visual halaman penuh, BackstopJS adalah penerus self-hosted langsung. Bagaimanapun, perpindahan ini tidak mendesak dalam arti "build Anda akan rusak besok", tetapi jamnya berdetak: alat pengujian yang tidak dipelihara membusuk perlahan seiring versi peramban, sistem operasi, dan framework Anda menjauh dari versi terakhir yang menjadi acuan pembangunannya.

Perbandingan sekilas

Berikut informasi yang sama secara berdampingan, agar Anda bisa menelusuri sumbu-sumbu yang penting untuk keputusan CI sebelum memetakannya ke kendala Anda sendiri.

Cara memilih (kerangka keputusan)

Mulailah dari kendala terberat Anda, bukan dari daftar fitur. Kendala itu menyingkirkan sebagian besar menu untuk Anda.

• Sepenuhnya self-hosted, anggaran nol, dan Anda bisa menerima pengujian halaman-penuh-saja dengan peninjauan manual: BackstopJS. Ini satu-satunya opsi yang memenuhi self-hosted, dipelihara, dan gratis sekaligus, dan kompromi-kompromi (tanpa gerbang PR, konfigurasi JSON, ketidakstabilan Docker) adalah besaran yang dikenal yang bisa Anda rancang di sekitarnya.
• Anda ingin pengalaman peninjauan terbaik, gerbang PR, dan pembandingan ARIA, dan Anda bisa menerima ketergantungan SaaS: layanan terkelola Argos. Ini jalur menuju kekuatan Argos tanpa risiko self-hosting yang tidak didukung. Jika aturan kepatuhan melarang mengunggah tangkapan layar ke pihak ketiga, pintu ini tertutup dan Anda kembali ke BackstopJS.
• Rangkaian uji kecil atau Playwright-first: pertimbangkan untuk tidak menambahkan alat khusus apa pun. Playwright menyertakan toHaveScreenshot() secara bawaan, dan untuk rangkaian di bawah kira-kira 100 uji itu mungkin sudah cukup. Sebuah panduan praktisi menempatkan titik belok tempat alat khusus mulai berharga sekitar skala itu (perlakukan itu sebagai pengamatan industri, bukan angka Playwright resmi). Beban pengelolaan berkas baseline di git tumbuh melewati titik itu, dan di situlah alat khusus membayar dirinya sendiri.
• Saat ini di Lost Pixel: migrasilah sekarang, sesuai pembagian di bagian sebelumnya. Jangan jadikan "masih berfungsi" sebagai alasan untuk bertahan.

Sebuah catatan yang mendahului semua alat ini dan tetap hidup setelahnya: tim Sparkbox, yang menulis bertahun-tahun lalu, memilih opsi berhosting justru karena membuat para insinyur benar-benar memakai pengujian lebih sulit daripada penyiapannya. Alat self-hosted dengan UI peninjauan yang lebih lemah bisa menang pada biaya dan kalah pada adopsi (jika tim Anda mengabaikan laporan BackstopJS yang berisik, biaya lisensi nolnya tidak memberi Anda apa-apa). Perhitungkan pengalaman peninjauan dalam keputusan, bukan hanya harga.

Poin utama bagian ini: Kendala yang memilih alat. Self-hosted dan gratis menunjuk ke BackstopJS, alur kerja terbaik dengan SaaS yang bisa diterima menunjuk ke Argos, dan kecil serta Playwright-first mungkin menunjuk ke tanpa alat sama sekali.

Menentukan ukuran runner CI untuk Chromium headless

Ketiga alat menjalankan Chromium headless, dan jejak memori Chromium (bukan CPU) yang menentukan ukuran runner Anda, karena setiap worker peramban yang berjalan bersamaan menginginkan beberapa gigabyte RAM-nya sendiri. Ukur mesin terlalu kecil dan pengujian visual Anda tidak gagal dengan bersih. Mereka di-OOM-kill di tengah jalan dan dilaporkan sebagai derau infrastruktur yang tidak stabil, jenis kegagalan terburuk untuk di-debug.

Sebagai panduan perkiraan, diukur berdasarkan paralelisme alih-alih sebagai angka pasti (penggunaan sebenarnya bergantung pada kompleksitas halaman dan berapa banyak worker yang Anda jalankan secara paralel):

• Tim kecil atau pengujian serial: sekitar 2 vCPU / 4 GB RAM menangani satu worker Chromium headless dengan overhead daemon CI.
• Penggunaan CI tim: sekitar 4 vCPU / 8 GB RAM mendukung kira-kira 2 hingga 4 worker peramban paralel, tempat kebanyakan tim berada.
• Throughput tinggi atau rangkaian besar: sekitar 8 vCPU / 16 GB RAM untuk paralelisme tinggi, atau ketika proses regresi visual berbagi runner dengan pekerjaan CI lain.

Penyimpanan adalah pos yang senyap. Artefak tangkapan layar dan baseline historis menumpuk dari proses ke proses, jadi rencanakan pertumbuhan itu: sediakan ruang penyimpanan yang murah hati jika Anda menyimpan baseline secara lokal, atau dorong baseline dan artefak ke penyimpanan objek agar disk runner tidak menjadi kendalanya.

VPS adalah host alami untuk runner CI self-hosted yang melakukan ini, karena Anda menginginkan RAM yang dapat diprediksi dan terdedikasi untuk worker Chromium, dan mesin homelab hanya masuk akal jika perangkat kerasnya sudah ada di sana. Jika Anda juga menyiapkan tumpukan CI di sekitarnya, bagian-bagian di sekeliling alat pengujian visual adalah deployment satu klik di marketplace Cloudzy: Gitea, GitLab, Jenkins, dan Forgejo untuk forge CI, serta Docker untuk konsistensi rendering yang dibutuhkan alat-alat itu. Alat regresi visualnya sendiri dipasang di atasnya via npm atau Docker, jadi jalankan sebuah Linux VPS yang diukur dari rentang di atas dan jalankan di sana. Jika Anda merangkai CI berbasis Docker, panduan Cloudzy tentang alternatif GitLab self-hosted dan mendaftar kontainer Docker mencakup penyiapan yang berdekatan.

Pertanyaan yang Sering Diajukan

Apakah Argos dapat di-self-host?

Secara teknis ya (kodenya berlisensi MIT), tetapi pengelola menyatakan pada September 2025 bahwa Argos tidak menyediakan dukungan atau dokumentasi untuk menjalankannya di luar layanan terkelola. Perlakukan self-hosting sebagai tidak didukung dan rapuh secara operasional: ia bisa rusak pada perubahan hulu mana pun tanpa ada pengelola yang wajib membantu. Bagi kebanyakan tim, layanan terkelola adalah cara praktis untuk memperoleh manfaat Argos.

Apa yang terjadi pada Lost Pixel?

Lost Pixel diarsipkan pada 22 April 2026, ketika timnya bergabung dengan Figma dan menghentikan produknya. Repositorinya hanya-baca, rilis terakhir adalah v3.22.0 pada November 2024, dan tidak ada panduan migrasi yang disediakan. Jangan mengadopsinya untuk pekerjaan baru. Jika Anda memakainya, rencanakan migrasi ke BackstopJS (pengujian halaman penuh) atau ke Argos dan Playwright-native (pengujian komponen).

Apa itu pembandingan snapshot ARIA?

Pembandingan snapshot ARIA membandingkan pohon aksesibilitas (peran, label, dan struktur) bersama tangkapan layar piksel, dan menangkap regresi semantik dan aksesibilitas yang bisa terlewat oleh pembandingan piksel saja, seperti tombol yang identik secara visual tetapi kehilangan label aksesibelnya. Argos menambahkan fitur itu pada 4 November 2025.

Berapa banyak RAM yang dibutuhkan Chromium headless di CI?

Satu worker serial biasanya berjalan pada sekitar 2 hingga 4 GB, dan worker yang berjalan bersamaan menskalakan RAM kira-kira secara linear dari sana. Penggunaan sebenarnya bergantung pada kompleksitas halaman dan berapa banyak instance peramban yang Anda jalankan secara paralel, jadi perlakukan angka-angka ini sebagai panduan alih-alih angka pasti dan sisakan ruang untuk menghindari proses uji yang di-OOM-kill.

Apakah BackstopJS mendukung Playwright?

Ya. Puppeteer adalah mesin bawaan (Chrome headless), dan BackstopJS juga mendukung Playwright di chromium, firefox, dan webkit. Mesinnya Anda pilih di konfigurasi Anda.