1.8.3

Apa itu Manual Visual Testing?

Manual visual testing atau atau pemeriksaan visual secara manual adalah salah satu pendekatan paling dasar yang digunakan dalam pengujian antarmuka pengguna (UI). Melalui pengamatan langsung, QA dapat mengenali berbagai masalah tampilan, mulai dari layout yang tidak rapi, elemen UI yang hilang, hingga gambar atau teks yang tidak muncul. Namun, seiring meningkatnya kompleksitas aplikasi, jumlah pengguna, dan frekuensi rilis, metode ini mulai menunjukkan keterbatasan yang cukup besar.

Salah satu tantangan terbesar dalam manual visual testing adalah faktor manusia itu sendiri. QA yang mengandalkan ketelitian mata dan daya ingat, rentan terhadap kesalahan. Ketika harus memeriksa puluhan halaman di berbagai perangkat dalam waktu terbatas, kemungkinan terlewatnya bug visual menjadi sangat tinggi. Detail kecil seperti jarak antar elemen yang bergeser 5 piksel atau ikon yang salah tempat bisa saja tidak terdeteksi.

Selain itu, perbedaan jenis perangkat dan resolusi layar menambah tantangan dalam pengujian visual. Sebuah halaman yang terlihat sempurna di desktop bisa saja tampak berantakan di ponsel kelas menengah atau tablet dengan orientasi horizontal. Tidak semua QA memiliki akses fisik ke berbagai tipe perangkat, sehingga pengujian sering kali dilakukan dalam kondisi yang kurang merepresentasikan pengalaman pengguna sebenarnya.

Untuk mengatasi keterbatasan tersebut, muncullah pendekatan visual test automation. Pendekatan ini memungkinkan QA mendeteksi perubahan tampilan secara otomatis dengan membandingkan hasil render sebelum dan sesudah rilis, hingga ke tingkat piksel. Tools seperti Applitools, Percy, Chromatic, Playwright snapshot, dan Cypress Visual Testing, dapat menemukan perbedaan visual yang sering kali luput dari pengamatan manusia.

Mengurangi Upaya Manual dengan Pengujian Otomatis

Pengujian otomatis memberikan banyak keuntungan dalam konteks visual testing. Dengan pendekatan ini, tim QA dapat bekerja lebih efisien, meminimalkan kesalahan manusia, dan pada akhirnya menghasilkan perangkat lunak berkualitas tinggi secara konsisten.

●      Produktivitas Meningkat

Dengan mengurangi ketergantungan pada pengujian manual untuk aspek visual, otomatisasi memungkinkan peningkatan produktivitas bagi para tester. Tim QA dapat mengalihkan fokus ke tugas yang lebih bernilai, seperti eksplorasi bug yang kompleks atau pengujian berbasis risiko.

●      Laporan Real-Time

Alat visual testing otomatis menghasilkan laporan real-time yang menampilkan perbedaan visual secara jelas. Hal ini mempercepat proses identifikasi, pelacakan, dan penyelesaian bug, tanpa perlu pemeriksaan visual manual yang melelahkan.

●      Perawatan yang Lebih Mudah

Salah satu keunggulan pengujian otomatis adalah kemudahannya dalam hal pemeliharaan. Ketika ada perubahan pada UI atau layout, skrip otomatis bisa diperbarui dengan cepat dan tidak memerlukan penyesuaian besar seperti pada pengujian manual.

●      Skalabilitas Tanpa Hambatan

Seiring pertumbuhan aplikasi dan bertambahnya kompleksitas fitur, pengujian visual secara manual menjadi semakin berat. Dengan otomatisasi, pengujian bisa dilakukan pada ratusan halaman dan berbagai kombinasi perangkat, resolusi, dan browser yang mana ini merupakan sesuatu yang sulit dilakukan secara manual.

●      Fokus pada Skenario Kompleks

Dengan mengotomatiskan tugas-tugas visual yang bersifat repetitif, QA dapat lebih fokus untuk menangani skenario yang lebih kompleks dan penting, seperti pengujian kasus ekstrim (edge-case), pengujian integrasi, atau validasi pengalaman pengguna di berbagai kondisi.

Namun, bukan berarti manual visual testing menjadi tidak relevan. Pemeriksaan visual secara manual tetap penting, terutama saat tahap awal eksplorasi, saat memahami konteks penggunaan, dan ketika mengevaluasi elemen desain dari sisi pengalaman pengguna. Namun, untuk mencapai tingkat konsistensi, kecepatan, dan keandalan yang tinggi, visual test automation adalah kebutuhan mutlak dalam proses QA modern.

Keterbatasan Manual Visual Testing

1.    Human Error

●      Keletihan saat memeriksa banyak halaman secara berulang.

●      Sulit membandingkan tampilan “sebelum dan sesudah” dengan akurat tanpa alat bantu visual yang tepat.

●      Ketidakkonsistenan standar estetika antar QA.

2.    Variasi Device dan Resolusi

●      Banyaknya kombinasi sistem operasi, browser, dan ukuran layar membuat pengujian manual kurang mencakup semua skenario.

●      QA biasanya hanya menguji di perangkat tertentu, sehingga visual bug bisa lolos di perangkat yang tidak diuji.

●      Simulator/emulator tidak selalu mencerminkan tampilan sebenarnya pada perangkat fisik.

3.    Waktu dan Efisiensi

●      Visual testing manual memakan waktu lama jika halaman yang diuji banyak.

●      Tidak praktis untuk regression testing berulang setelah setiap deploy.

4.    Akurasi & Konsistensi

Tools otomatis bisa mendeteksi perbedaan visual secara pixel‑by‑pixel dan menghindari subjektivitas manusia.

Studi Kasus: Perbandingan Pengujian Manual dan Regresi Visual Dalam Menangani Bug Tampilan

Di sebuah agensi web yang mengelola ratusan situs WordPress milik klien, mengalami kejadian tak terduga. Tiba-tiba, tampilan rating pada situs berubah di mana ikon bintang yang sebelumnya berwarna emas kini tampak hitam. Akibatnya, secara visual, produk terlihat seperti belum pernah mendapatkan ulasan sama sekali. Padahal, jika ditelusuri dari sisi backend, data rating tidak mengalami perubahan. Semua sistem tetap berjalan normal. Lalu, apa sebenarnya penyebabnya?

Setelah ditelusuri, diketahui bahwa sehari sebelumnya tim pengelola situs melakukan pembaruan otomatis pada plugin visual builder yang digunakan di situs tersebut. Namun sayangnya, pembaruan ini tidak disertai dengan pemeriksaan visual secara menyeluruh. Pada pembaruan tersebut, terjadi perubahan kecil pada CSS yang menyebabkan warna default bintang rating berubah dari emas menjadi hitam.

Meskipun tidak menimbulkan error atau merusak fungsi sistem, perubahan visual ini tetap berdampak signifikan karena:

Perubahan ini tetap berdampak karena:

●      Pengguna bisa salah menilai bahwa produk tidak memiliki ulasan positif.

●      Persepsi terhadap kredibilitas produk dan situs menjadi menurun.

●      QA tidak menyadari perubahan ini karena terlalu kecil untuk terdeteksi melalui pengujian manual, dan tidak masuk dalam ruang lingkup functional testing.

Solusi: Visual Regression Testing Menjadi Penyelamat

Inilah momen di mana visual regression testing menunjukkan manfaatnya. Dalam studi kasus nyata yang dibagikan WP Remote melalui webinar mereka, mereka menjelaskan bagaimana sistem otomatis mereka mampu mendeteksi perubahan visual sekecil 0,03% pada halaman produk. Sistem tersebut langsung mengirimkan notifikasi kepada tim QA, bahkan sebelum pengguna menyadari adanya kejanggalan.

Salah satu pengguna WP Remote, Daniel Duke, membagikan pengalamannya:

“Saya tidak akan pernah menyadari perubahan itu. Tapi sistem memberi notifikasi tentang perubahan 0,03%. Dan setelah dicek, memang ada ikon berpindah sedikit. Tanpa alat itu, saya pasti melewatkannya.”

Contoh lainnya, sebuah situs e-commerce memperbarui plugin ke Elementor versi 3.28.0. Sekilas, pembaruan ini tampaknya tidak membawa perubahan besar. Namun, setelah pembaruan itu:

●      Ikon bergeser beberapa pixel,

●      Terjadi perubahan ketebalan atau jenis huruf,

●      Posisi tombol berpindah kurang dari 1%,

Perubahan tersebut memang tidak menyebabkan error fungsional, namun jika dibiarkan, perlahan-lahan dapat merusak kepercayaan pengguna terhadap kualitas visual situs.

Dengan bantuan visual regression tool, perubahan seperti ini langsung terdeteksi, ditandai secara visual (highlight), dan QA bisa segera mengambil tindakan, seperti memutuskan untuk menunda rilis hingga tampilan  diperbaiki.

Tanpa pendekatan visual regression testing, tim QA akan bekerja secara reaktif, baru bertindak setelah ada laporan dari pengguna. Akibatnya:

●      Perubahan kecil pada tampilan bisa luput dari perhatian, tetapi tetap berdampak besar terhadap kepercayaan pengguna dan brand.

●      Produktivitas tim terganggu, karena harus memeriksa ulang seluruh halaman setelah keluhan muncul.

Kasus ini menunjukkan bahwa peran QA tidak hanya sebatas memastikan sistem dapat berjalan dengan baik, tapi juga memastikan bahwa tampilan sistem memberikan pengalaman yang benar dan meyakinkan di mata pengguna.

Pelajaran Penting:

●      QA bukan hanya soal memastikan sistem bekerja, tapi juga memastikan sistem “terlihat benar” di mata pengguna.

●      Visual regression testing memberikan lapisan keamanan tambahan dalam proses QA modern.

●      Dalam lingkungan UI yang terus berubah (plugin, tema, dan framework), visual testing adalah investasi, bukan sekadar biaya tambahan.