Konsep Pengujian Regresi Visual

Pengujian regresi visual (VRT) secara otomatis mendeteksi perubahan visual yang tidak diinginkan antara versi kode dengan membandingkan tangkapan layar yang dirender piksel demi piksel. Pengujian ini menangkap regresi CSS — pergeseran tata letak, perubahan warna, dan jarak yang rusak — yang sama sekali tidak terdeteksi oleh pengujian unit.

VRT mengambil tangkapan layar acuan dari komponen atau halaman, lalu mengambil tangkapan layar baru setelah perubahan kode dan membandingkannya. Perbedaan ditonjolkan dalam gambar perbedaan. Pengembang meninjau perbedaan tersebut, lalu menyetujui perubahan yang disengaja atau memperbaiki regresi yang tidak disengaja.

Perbandingan piksel membandingkan gambar piksel demi piksel — sensitif, tetapi rentan menghasilkan positif palsu akibat antialiasing dan perbedaan perenderan subpiksel. Alat perbandingan struktural (Applitools AI) membandingkan maksud visual, bukan piksel yang persis sama, sehingga mengurangi positif palsu akibat variasi perenderan font.

Tangkapan layar yang disetujui menjadi acuan baru. Simpan acuan dalam kontrol versi (Git LFS untuk gambar berukuran besar) atau layanan awan khusus. Setiap PR menampilkan perbedaan terhadap acuan, dan pengelola menyetujui atau menolak perubahan visual sebagai bagian dari peninjauan.

Pengujian VRT tingkat komponen menguji komponen UI satu per satu dalam keadaan terisolasi (melalui Storybook). Pengujian VRT tingkat halaman menguji halaman lengkap di peramban nyata. Pengujian komponen lebih cepat dan terarah; pengujian halaman menangkap masalah tata letak tingkat integrasi antarkomponen.

Uji semua keadaan visual: bawaan, hover, fokus, aktif, nonaktif, memuat, kesalahan, kosong, dan penuh. Keadaan hover memerlukan simulasi JavaScript (page.hover() di Playwright). Cakupan keadaan yang tidak lengkap menciptakan titik buta untuk regresi pada keadaan interaktif.

Render tangkapan layar di beberapa peramban (Chrome, Firefox, Safari) dan area pandang (seluler, tablet, desktop). Perbedaan perenderan peramban dapat menyebabkan positif palsu — gunakan acuan per peramban dan konfigurasikan ambang perbedaan untuk menoleransi variasi perenderan yang sudah diketahui.

Perenderan font sedikit berbeda di antara kombinasi OS, peramban, dan GPU. Gunakan lingkungan CI yang konsisten (Docker + versi Chrome tertentu) untuk menghilangkan positif palsu yang disebabkan oleh lingkungan. Layanan VRT awan menangani konsistensi lingkungan secara otomatis.

Konten dinamis — stempel waktu, avatar pengguna, iklan, dan data acak — menyebabkan positif palsu. Samarkan wilayah dinamis dengan hamparan warna solid sebelum mengambil tangkapan layar. Sebagian besar alat VRT mendukung selektor elemen untuk penyamaran.

Jalankan VRT dalam integrasi berkelanjutan pada setiap PR. Gagalkan proses tersebut saat perbedaan visual yang belum disetujui terdeteksi. Arahkan perbedaan visual kepada peninjau desain, bukan hanya tim rekayasa — perubahan visual merupakan perhatian desain sekaligus rekayasa.

VRT memberikan pengembalian investasi tertinggi pada pustaka komponen dan sistem desain yang menjadikan konsistensi visual sebagai fitur produk. Untuk halaman pemasaran yang sering berubah, biaya pemeliharaan acuan mungkin melebihi nilai pendeteksian regresinya.

Mengapa pengujian regresi visual menghasilkan positif palsu akibat perbedaan perenderan font?

Pengujian regresi visual menangkap regresi CSS dan tata letak dengan membandingkan tangkapan layar di berbagai versi kode. VRT yang efektif memerlukan lingkungan yang konsisten, cakupan keadaan, penyamaran konten dinamis, dan alur peninjauan yang mengarahkan perbedaan kepada peninjau desain—menjadikannya alat mutu kolaboratif, bukan sekadar gerbang otomatis.