Visual Regression Testing: Deteksi Perubahan UI Secara Otomatis
Daftar Isi
- Pendahuluan
- Apa yang Dicek Visual Regression Testing?
- Kenapa Functional Test Belum Cukup?
- Cara Kerja Workflow-nya
- Pilihan Tool untuk Visual Regression Testing
- Apa Saja yang Perlu Di-capture?
- Contoh Review Flow
- Menjaga Test Tetap Stabil
- Kesalahan Umum
- Checklist
- FAQ
- Kesimpulan
Pendahuluan
Automated test sering memberi tahu apakah tombol bisa diklik, form berhasil submit, atau API mengembalikan data yang benar. Tapi test seperti itu belum tentu memberi tahu apakah UI masih terlihat benar.
Layout bisa bergeser. Text button bisa turun baris. Chart bisa menabrak legend. Modal bisa tertutup header. Perubahan CSS di satu komponen bisa diam-diam merusak halaman lain.
Visual regression testing menangkap perubahan seperti ini dengan membandingkan screenshot terbaru dengan baseline yang sudah disetujui. Ini bukan pengganti unit test, integration test, atau end-to-end test (baca panduan Pragmatic Testing Pyramid dan Strategi Testing Web Apps). Ia menjawab pertanyaan yang berbeda: apakah tampilan berubah dengan cara yang tidak kita harapkan?
Apa yang Dicek Visual Regression Testing?
Visual regression testing membandingkan screenshot baru dengan screenshot yang dianggap benar.
Gambar 1: Dashboard review visual regression testing yang menampilkan perbandingan Baseline Snapshot (v1.0.4), Current Snapshot (v1.0.5), dan Diff Overlay dengan sorotan warna magenta/merah saat terjadi pergeseran layout.
| Istilah | Artinya |
|---|---|
| Baseline | Screenshot yang sudah disetujui |
| Current snapshot | Screenshot dari test run terbaru |
| Diff | Perbedaan visual antara keduanya |
| Threshold | Batas perbedaan yang masih diterima |
Jika diff lebih besar dari threshold, test gagal dan reviewer menentukan apakah perubahan itu memang diinginkan.
Kenapa Functional Test Belum Cukup?
Functional test penting, tapi biasanya hanya mengecek behavior.
Contoh:
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Saved')).toBeVisible();Test itu memastikan flow berjalan. Tapi test tersebut tidak memastikan tombol masih muat, pesan sukses tetap rapi, atau halaman tetap aman di layar mobile. Terutama saat mengembangkan UI kompleks memakai sistem komponen atau utility class seperti Tailwind CSS.
Visual test berguna untuk menangkap:
- spacing yang berubah
- layout responsive yang rusak
- text wrapping yang tidak diharapkan
- icon atau gambar yang hilang
- regresi warna atau theme
- modal dan dropdown yang salah posisi
- chart atau table yang overflow
Cara Kerja Workflow-nya
Workflow visual testing yang praktis biasanya punya empat langkah.
- Ambil baseline screenshot.
- Jalankan skenario yang sama di CI atau local development.
- Bandingkan screenshot baru dengan baseline.
- Approve atau reject diff.
Contoh hasil:
| Skenario | Hasil | Artinya |
|---|---|---|
| Home page desktop | pass | tidak ada perubahan visual berarti |
| Pricing page mobile | fail | layout bergeser |
| Settings modal | fail | design update memang diharapkan |
Reviewer tidak sebaiknya asal update snapshot. Visual test yang gagal adalah pertanyaan: apakah perubahan ini memang disengaja?
Pilihan Tool untuk Visual Regression Testing
Memilih tool visual testing tergantung pada arsitektur aplikasi, kebutuhan tim, dan budget infrastruktur. Berikut adalah beberapa pilihan populer:
1. Playwright (Built-in Screenshot Testing)
Playwright menyediakan fitur bawaan expect(page).toHaveScreenshot() yang fleksibel tanpa memerlukan layanan berbayar pihak ketiga.
import { test, expect } from '@playwright/test';
test('landing page visual regression', async ({ page }) => {
await page.goto('https://example.com');
// Membandingkan screenshot saat ini dengan baseline
await expect(page).toHaveScreenshot('landing-page.png', {
maxDiffPixelRatio: 0.01,
});
});2. Chromatic (Storybook)
Dibuat oleh tim Storybook, Chromatic sangat cocok untuk komponen UI dan design system. Ia secara otomatis menangkap snapshot dari setiap story dan menyediakan portal web untuk code review visual.
3. Percy (BrowserStack)
Tool visual testing berbasis cloud yang terintegrasi langsung dengan GitHub, GitLab, serta framework test populer (Playwright, Cypress, Selenium). Sangat membantu untuk pengujian lintas browser.
4. Applitools Eyes
Menggunakan Visual AI untuk membandingkan tampilan. Keunggulannya adalah mampu membedakan perubahan layout aktual dengan noise kecil seperti pergeseran teks beberapa piksel atau rendering font.
Apa Saja yang Perlu Di-capture?
Jangan screenshot semua pixel di produk. Mulai dari screen yang penting, mudah rusak, atau sering berubah.
Kandidat yang bagus:
- landing page dan pricing page
- checkout dan payment flow
- dashboard dengan data padat
- table, chart, dan form
- modal, menu, dan empty state
- layout mobile
- variasi theme
Untuk component library, capture state penting:
| Component | State yang perlu dicapture |
|---|---|
| Button | default, hover, disabled, loading |
| Input | empty, filled, error, disabled |
| Modal | open, konten panjang, mobile |
| Table | empty, banyak row, overflow |
Dengan begitu, test suite tetap berguna tanpa menjadi terlalu berat dirawat.
Contoh Review Flow
Bayangkan product card berubah setelah update CSS.
Visual diff menunjukkan:
| Elemen | Expected | Current |
|---|---|---|
| Image | ratio 16:9 | crop terlalu tinggi |
| Title | satu baris | turun jadi dua baris |
| Price | rata bawah | bergeser ke atas |
Reviewer punya tiga pilihan:
- approve baseline baru jika design change memang disengaja
- perbaiki CSS jika perubahan tidak disengaja
- sesuaikan test jika screenshot terlalu sensitif
Nilainya bukan cuma pada screenshot. Nilainya ada pada kebiasaan review di sekitar screenshot itu.
Menjaga Test Tetap Stabil
Visual test bisa berisik jika halaman berubah karena hal yang tidak berhubungan dengan UI.
Kurangi noise dengan mengontrol:
- ukuran viewport
- test data
- timezone dan locale
- animation dan transition
- random ID atau timestamp
- widget pihak ketiga
- font loading
Untuk pengujian di pipeline CI/CD, gunakan lingkungan container (seperti Docker) yang identik agar font rendering antara mesin lokal dan server CI tidak menghasilkan diff palsu. Untuk animation, tunggu sampai UI stabil sebelum mengambil screenshot.
Kesalahan Umum
Capture terlalu luas
Full-page screenshot kadang berguna, tapi bisa terlalu berisik. Capture area yang lebih kecil jika risiko perubahannya lokal.
Snapshot di-update otomatis
Kalau semua perubahan otomatis disetujui, visual regression testing kehilangan manfaatnya. Diff yang berarti perlu dilihat manusia.
Mengabaikan mobile
Banyak bug visual hanya muncul di layar kecil. Masukkan minimal satu viewport mobile untuk flow penting.
Memakai data yang tidak stabil
Jika halaman bergantung pada live data, screenshot akan terus berubah. Gunakan fixture yang predictable.
Menganggap visual test sebagai design approval
Visual test menangkap perubahan yang tidak diharapkan. Ia tidak menggantikan design review, accessibility review, atau usability testing.
Checklist
- Mulai dari screen kritikal, bukan seluruh aplikasi.
- Capture desktop dan mobile untuk flow penting.
- Gunakan test data yang stabil.
- Disable atau tunggu animation selesai.
- Mask timestamp, ads, dan widget yang tidak stabil.
- Review diff sebelum update baseline.
- Jaga threshold cukup ketat untuk menangkap masalah nyata.
- Simpan baseline di version control atau artifact system tepercaya.
- Jalankan visual test di CI untuk perubahan UI berisiko.
- Hapus screenshot yang tidak lagi memberi nilai.
FAQ
Apakah visual regression testing hanya untuk frontend team?
Sebagian besar iya, tapi tidak selalu. Perubahan backend bisa memengaruhi bentuk data UI, empty state, formatting, dan error message. Visual test bisa menangkap efek samping seperti itu.
Apakah setiap halaman perlu visual test?
Tidak. Prioritaskan halaman yang visual correctness-nya memengaruhi trust, conversion, atau workflow user.
Tool apa yang sebaiknya dipakai?
Playwright, Storybook test runner, Chromatic, Percy, dan Applitools adalah opsi yang umum. Pilih berdasarkan stack, CI setup, dan workflow review tim.
Seberapa ketat threshold-nya?
Mulai dari threshold yang ketat, lalu longgarkan hanya untuk area yang memang noisy. Jika threshold terlalu longgar, regresi nyata bisa lolos.
Kesimpulan
Visual regression testing membantu tim menangkap perubahan UI yang sering lolos dari functional test biasa. Ini sangat berguna untuk responsive layout, design system, dashboard, dan flow user-facing yang visualnya penting.
Mulai kecil, buat data test stabil, review diff dengan sengaja, dan perlakukan snapshot sebagai safety net untuk interface yang benar-benar dilihat user.
Apakah tim kamu sudah menerapkan visual regression testing di CI/CD? Tool apa yang jadi favoritmu?
Yuk, bagikan pengalaman dan pertanyaanmu di kolom komentar di bawah!
Artikel Terkait
Lanjutkan membaca topik yang masih satu konteks.
Testing Pyramid: Unit, Integration, dan E2E untuk Product Team
Terapkan testing pyramid pragmatic dengan unit, integration, dan E2E test agar kualitas naik tanpa test suite jadi lambat.
Strategi Testing Web App: Unit, Integration, dan E2E
Rancang strategi testing web app dari unit, integration, sampai E2E test dengan keputusan coverage dan tradeoff tooling yang praktis.
CORS: Memahami Cross-Origin Resource Sharing dan Cara Mengamankannya
Pahami CORS, origin, preflight request, credentials, allowed headers, misconfiguration umum, dan konfigurasi API yang aman untuk browser.
Python Project Structure: venv, pip, Requirements, dan Testing
Belajar menyusun project Python yang rapi dengan struktur folder, virtual environment, pip, requirements.txt, .env, pytest, dan entry point sederhana.