1.8.2

Dalam tahapan pengembangan perangkat lunak, terutama pada proyek yang berjalan cepat dan terus berkembang seperti di lingkungan Agile atau CI/CD (Continuous Integration / Continuous Deployment), perubahan pada tampilan antarmuka pengguna (UI) bisa terjadi dengan sangat sering. Perubahan ini tidak selalu berupa penambahan fitur besar, tetapi bisa juga berupa penyempurnaan desain, perbaikan tata letak, atau penyesuaian kecil seperti mengubah posisi tombol atau mengganti warna huruf. Meskipun terlihat sepele, perubahan visual ini dapat mempengaruhi kenyamanan dan pengalaman pengguna secara signifikan.

Salah satu risiko yang sering muncul adalah visual regression, yaitu gangguan atau perubahan tampilan antarmuka yang tidak disengaja setelah adanya pembaruan kode atau rilis versi terbaru. Contohnya bisa berupa elemen yang bergeser, komponen UI yang hilang, font yang tidak sesuai, hingga susunan halaman yang menjadi tidak proporsional.

Beberapa perusahaan besar telah menggunakan tools otomatisasi visual regression seperti Applitools, Percy, atau Chromatic. Namun dalam kenyataannya, terutama di tim yang lebih kecil atau di tahap awal pengujian, pengecekan visual ini masih banyak dilakukan secara manual.

Apa itu Manual Visual Regression?

Manual visual regression (regresi visual secara manual), yaitu proses di mana QA membandingkan tampilan aplikasi sebelum dan sesudah dilakukan pembaruan. Perbandingan ini bisa dilakukan melalui tangkapan layar (screenshot), observasi langsung di browser, atau dengan membuka versi staging dan production secara berdampingan. Meskipun terlihat sederhana, tugas ini membutuhkan ketelitian tinggi dan pemahaman mendalam terhadap tampilan halaman yang ideal.

Melalui pendekatan ini, QA tidak hanya menguji dari sisi teknis, tetapi juga berperan sebagai penjaga kualitas tampilan yang langsung dirasakan oleh pengguna. QA menjadi perwakilan pengguna akhir yang memastikan bahwa setiap perubahan tidak mengurangi kenyamanan atau kejelasan dalam menggunakan aplikasi.

●        Visual Regression Testing Manual Melibatkan:

○      Melihat dan membandingkan tampilan UI dari versi sebelum dan sesudah deploy (biasanya di staging vs production).

○      Mengambil screenshot sebelum perubahan diterapkan.

○      Melakukan eksplorasi halaman secara visual di browser dengan pengaturan tampilan yang konsisten.

○      Menyesuaikan zoom, resolusi layar, dan ukuran tampilan (viewport) untuk konsistensi.

●      Jenis Perubahan Visual yang Bisa Terjadi:

○      Perubahan posisi tombol atau teks.

○      Elemen penting hilang atau gagal ditampilkan akibat bug atau konflik CSS.

○      Gambar tidak muncul atau pecah karena kesalahan tautan atau sumber gambar.

○      Warna teks berubah tanpa disengaja, misalnya, jadi tidak terbaca di latar belakang tertentu.

○      Halaman tidak tampil dengan baik di perangkat mobile karena masalah responsivitas.

●      Kunci Manual Visual Regression Test yang Efektif:

○      QA perlu memiliki perhatian tinggi terhadap detail tampilan dan kepekaan terhadap perubahan kecil.

○      Perlu dokumentasi baseline visual  (seperti screenshot versi sebelumnya) harus disimpan dan digunakan sebagai pembanding saat ada pembaruan besar.

○      Kolaborasi yang baik dengan tim desain dan tim pengembang front-end sangat penting untuk memahami konteks perubahan visual.

○      Menggunakan checklist visual akan membantu proses pengecekan lebih cepat, sistematis, dan terarah.

Studi Kasus Perubahan Visual Setelah Deploy Minor (Terjadi Perubahan Kecil)

1. Kasus 1: Checkout di Situs E-Commerce

Menjelang peluncuran fitur baru, tim QA melakukan pengujian regresi visual pada halaman checkout e-commerce. Dalam proses ini, mereka tidak menggunakan alat otomatis seperti Percy atau Applitools, melainkan melakukan pengecekan secara manual.

Langkah yang Dilakukan QA:

1. QA membuka halaman checkout di versi staging dan menyimpan tangkapan layar (screenshot) seluruh halaman.
2. Setelah sistem diperbarui (deploy) ke production, QA membuka kembali halaman yang sama dan mengambil tangkapan layar terbaru.
3. Kedua gambar tersebut kemudian dibandingkan secara visual dengan cara diletakkan berdampingan.

Hasil Temuan:

●      Semua kolom pada halaman checkout, seperti nama, alamat, nomor telepon, dan lainnya, terlihat muncul dengan lengkap.

●      Namun, QA menemukan adanya perubahan ukuran pada tombol “Place Order” yang terlihat sedikit lebih kecil dari sebelumnya. Setelah ditelusuri, hal ini disebabkan oleh pembaruan kecil pada file CSS global yang mempengaruhi gaya tampilan tombol secara keseluruhan.

Gambar 1.8.1 Contoh Perubahan Visual Sebelum dan Sesudah Deploy (Aplikasi E-Commerce)

Dampak yang Mungkin Terjadi Jika Tidak Dilakukan Pemeriksaan:

●      Pengguna bisa merasa tampilan tampak berantakan atau tidak rapi.

●      Bisa menurunkan kepercayaan pengguna ketika sedang melakukan pembayaran.

●      Tim UI/UX atau pemangku kepentingan bisa merasa  bahwa hasil implementasi tidak sesuai dengan desain yang telah disepakati sebelumnya.

2. Kasus 2: Perubahan Akibat Deploy Pada Halaman Website

Mengutip dari situs WP Remote, terdapat studi kasus nyata yang menunjukkan adanya perubahan visual kecil namun berdampak signifikan setelah proses deploy.

Gambar 1.8.2 Contoh Perubahan Visual Sebelum dan Setelah Deploy (Halaman Website)

Tangkapan layar (screenshoot) memperlihatkan adanya perubahan kecil pada tata letak bagian “March 2025”. Sekilas tampaknya tidak ada yang berbeda, namun QA yang teliti menemukan adanya pergeseran posisi elemen pada halaman tersebut.

QA melakukan pengambilan tangkapan layar (screenshot) secara manual:

●      Sebelum deploy (versi staging),

●      Setelah deploy (versi produksi),

●      Kemudian dibandingkan secara visual kasat mata.

Hasil pengamatan menunjukkan bahwa meskipun tidak ada error fungsional, pergeseran kecil ini bisa menimbulkan dampak, seperti:

●      Gangguan dalam navigasi karena posisi ikon yang tidak konsisten,

●      Kesan bahwa tampilan situs kurang rapi atau kurang profesional, karena kelihatan "bergeser".

Masalah Jika Tidak Dicek Secara Manual

Tanpa perbandingan screenshot ini, QA bisa saja menyimpulkan: “Tampilan terlihat normal, tidak ada masalah. Siap untuk dirilis.” Namun, setelah diperiksa lebih cermat:

●      Perubahan tidak dilaporkan karena tidak berdampak langsung pada fungsi,

●      Tapi tetap berpotensi merusak persepsi pengguna maupun stakeholder terhadap kualitas tampilan.

Kesimpulan

Visual regression secara manual membutuhkan ketelitian ekstra dari QA. Perubahan sekecil apa pun pada antarmuka bisa berdampak besar terhadap:

●      Kesan profesionalisme aplikasi,

●      Konsistensi brand,

●      Serta pengalaman pengguna, terutama saat menggunakan fitur penting seperti checkout.

Tanpa proses ini, perubahan kecil mungkin terlewatkan karena tidak menyebabkan bug secara fungsional. Namun dari perspektif pengguna, hal ini bisa menjadi sumber ketidaknyamanan dan menurunkan kepercayaan terhadap platform.