1.8 Pendekatan Pengujian (Studi Kasus: QA dalam sprint cepat pada sebuah perusahaan IT/Digital) hai

Dalam proses pengujian perangkat lunak, tidak ada satu pendekatan tunggal yang cocok untuk semua situasi. Perangkat lunak modern tersusun atas berbagai komponen yang saling berhubungan, seperti antarmuka pengguna (UI), logika bisnis, hingga integrasi dengan sistem eksternal. Oleh karena itu, pengujian perlu dilakukan dari berbagai sisi, tergantung pada tujuan serta ruang lingkup yang ingin dicapai.

Pendekatan pengujian mengacu pada strategi utama yang digunakan untuk mengamati dan mengevaluasi kualitas suatu sistem. Ada tiga pendekatan klasik yang umum digunakan dalam dunia QA, yaitu:

  1. Black-box testing. Pengujian yang berfokus pada input dan output tanpa mengetahui struktur internal program. Pendekatan ini cocok untuk QA manual, pengujian fungsional, dan pengujian antarmuka pengguna.
  2. White-box testing. Pengujian yang dilakukan dengan pemahaman penuh terhadap kode sumber dan alur logika internal. Umumnya dilakukan oleh developer atau QA automation engineer dalam bentuk unit test, coverage test, dan logic path testing.
  3. Grey-box testing merupakan kombinasi dari black-box dan white-box.  Penguji memiliki pengetahuan terbatas tentang sistem dan menggunakannya untuk menguji integrasi, alur data, atau skenario yang kompleks.

Seiring dengan berkembangnya  teknologi dan pendekatan pengujian, QA kini juga dituntut untuk menguji aspek visual dari aplikasi, khususnya di sisi front-end. Misalnya, ketika terjadi pergeseran elemen UI, perubahan font, ikon yang hilang, atau tata letak yang kacau, sering kali hal ini tidak terdeteksi oleh pengujian fungsional biasa. Di sinilah pentingnya visual testing atau pemeriksaan visual.

Visual testing (pemeriksaan visual) umumnya dilakukan dalam pendekatan black-box, di mana QA mengevaluasi tampilan antarmuka berdasarkan hasil rendering di layar, bukan dari struktur kode HTML/CSS di baliknya. Namun, dalam praktik otomatisasi modern, visual testing juga bisa menggunakan alat seperti Applitools, Percy, atau library snapshot visual seperti di Cypress dan Playwright, yang secara teknis menyentuh aspek grey-box karena membandingkan baseline tampilan.

Pendekatan visual testing sangat penting, terutama untuk memastikan konsistensi tampilan UI antar halaman atau versi, mendeteksi perubahan tidak disengaja (regression visual) saat deployment, serta memberikan pengalaman pengguna yang utuh tanpa gangguan visual.

Dengan kata lain, saat ini QA tidak hanya bertanggung jawab memastikan sistem berjalan sesuai fungsi, tetapi juga memperhatikan kualitas tampilan serta kenyamanan pengguna. Hal ini dapat tercapai jika QA mampu memilih pendekatan pengujian yang sesuai dengan jenis sistem dan kebutuhan pengujian.

Untuk membuka pembelajaran pada topik ini, berikut beberapa pertanyaan awal yang dapat membantu Digiers melihat gambaran besarnya.

Dalam proyek Digiers saat ini, pendekatan testing mana yang paling sering digunakan? Apakah Digiers merasa pendekatan itu sudah cukup efektif?

Jika Digiers harus menguji tampilan UI di berbagai perangkat dan resolusi layar, pendekatan apa yang akan Digiers pilih?

Selain itu, sebelum kita masuk ke materi, yuk kenali dulu apa saja yang akan Digiers capai di akhir pembelajaran topik ini. Memahami tujuan pembelajaran membantu proses belajar menjadi lebih fokus dan terarah.

 

Subtopik 1.8.1 Pendekatan Pengujian Manual dan Pemeriksaan Visual: Mengenali perbedaan layout, typo, dan elemen UI hilang di platform e-commerce

Seiring dengan perkembangan teknologi dan meningkatnya harapan pengguna terhadap kualitas aplikasi, tanggung jawab seorang QA Engineer bukan hanya memastikan bahwa fitur-fitur aplikasi berjalan dengan baik secara fungsional, tetapi juga menjamin bahwa pengalaman visual pengguna tetap konsisten, bersih, dan bebas dari gangguan. Dalam hal ini, manual testing dan visual testing menjadi pendekatan penting yang sering kali menjadi lapisan terakhir dalam proses kontrol kualitas sebelum aplikasi dirilis ke publik.

Apa itu Manual Testing?

Manual testing atau pengujian manual adalah proses pengujian di mana seorang QA menguji aplikasi secara langsung, seolah-olah ia adalah pengguna akhir. QA akan membuka aplikasi, menelusuri halaman, mengklik tombol, mengisi formulir, dan memeriksa hasilnya secara langsung di layar, tanpa bantuan skrip otomatis. Dengan cara ini, memungkinkan QA untuk mendeteksi kesalahan tidak hanya dari sisi logika atau fungsi, tetapi juga dari kaca mata pengguna, termasuk kenyamanan penggunaan, keselarasan tampilan, serta responsivitas tampilan antar perangkat.

Sementara itu, visual testing atau pemeriksaan visual merupakan aktivitas spesifik dalam manual testing yang berfokus pada aspek visual atau tampilan antarmuka pengguna (user interface / UI). Dalam proses ini, QA memperhatikan bagaimana halaman aplikasi di tampilan di layar pengguna. Aspek-aspek seperti ukuran dan posisi elemen, keberadaan gambar dan ikon, kesesuaian penggunaan font dan warna, serta apakah tombol atau label penting muncul dengan benar, menjadi aspek utama yang diperiksa.

Mengapa ini penting? Dalam dunia e-commerce, tampilan visual sangat mempengaruhi keputusan pengguna. Masalah kecil pada UI dapat menyebabkan dampak besar, seperti:

●      Gambar produk tidak tampil: pengguna menjadi ragu untuk membeli.

●      Tombol “Beli Sekarang” tidak terlihat atau tertutup elemen lain: pengguna bisa bingung dan meninggalkan keranjang.

●      Tulisan harga terpotong: bisa menimbulkan kesalahpahaman atau bahkan distrust.

●      Typo di kata penting seperti “Diskon 100%” menjadi “Diksun 100%”: terlihat tidak profesional dan menurunkan kredibilitas brand.

Pemeriksaan visual secara manual sangat diperlukan ketika:

●      Perubahan desain dilakukan (UI update, redesign, atau penambahan elemen visual baru).

●      Aplikasi diakses dari berbagai jenis perangkat (misalnya perbedaan layout antara desktop dan mobile).

●      Ada integrasi dengan sistem atau komponen pihak ketiga, seperti banner promo dari CMS eksternal, gambar dari CDN, atau iklan otomatis.

Visual testing juga berkaitan erat dengan pengalaman pengguna (user experience / UX). QA harus memposisikan diri sebagai pengguna biasa. Beberapa pertanyaan yang perlu diajukan:

●      Apakah halaman mudah dipahami?

●      Apakah tombol cukup besar untuk disentuh di layar kecil?

●      Apakah teks terlalu kecil atau warnanya sulit dibaca oleh pengguna dengan gangguan penglihatan?

Di sinilah kepekaan terhadap detail dan kemampuan mengamati secara teliti menjadi keahlian penting bagi QA dalam menjalankan tugas ini.

Kapan Manual Testing Efektif?

Meskipun saat ini automation testing banyak digunakan, manual testing tetap memiliki peran penting dalam situasi tertentu. Berikut adalah kondisi di mana manual testing lebih efektif digunakan:

●      Saat melakukan pengujian awal atau eksplorasi.

●      Ketika ada perubahan UI yang belum dijangkau oleh automation.

●      Pemeriksaan terhadap aspek visual dan pengalaman pengguna.

Aspek yang Diperiksa Dalam Visual Testing Manual

Dalam visual testing manual, QA memeriksa berbagai aspek tampilan untuk memastikan kualitas antarmuka pengguna. Beberapa hal yang umum diperhatikan antara lain:

●      Tata letak elemen (layout alignment)

●      Kesesuaian warna, ukuran font, dan kontras teks

●      Gambar yang rusak, tidak muncul, atau pecah

●      Typo pada teks deskripsi, label, atau tombol

●      Keberadaan elemen penting, seperti CTA (call to action), form, tombol, ikon, dsb

●      Kesesuaian tampilan antar perangkat (desktop, mobile, tablet)

Risiko Jika Visual Testing Diabaikan Pada E-Commerce

Mengabaikan visual testing pada platform e-commerce dapat menimbulkan berbagai risiko yang berdampak langsung pada pengalaman pengguna dan citra bisnis. Beberapa konsekuensinya antara lain:

●      Conversion rate menurun

●      Komplain dari pengguna karena pengalaman buruk

●      Brand terlihat tidak profesional

●      Data ditampilkan secara menyesatkan atau tidak lengkap

●      Kepercayaan pengguna terhadap produk turun

Studi Kasus: Tombol Checkout Hilang di Perangkat Mobile - "Flash Sale Gagal Total"

Sebuah platform e-commerce nasional tengah menjalankan kampanye besar-besaran bertajuk Flash Sale 7.7. Promosi dilakukan secara intensif melalui media sosial, notifikasi aplikasi, dan email marketing. Tim pemasaran menargetkan peningkatan konversi hingga 40% dibandingkan kampanye serupa sebelumnya. Untuk mendukung hal tersebut, tim pengembang mendesain ulang tampilan halaman produk dan checkout khusus untuk program ini, termasuk penambahan countdown timer dan sticky promo bar di bagian atas halaman.

Pengujian otomatis oleh tim QA berjalan lancar. Seluruh alur, mulai dari login, memilih produk, memasukkan ke keranjang, hingga menyelesaikan pembayaran dinyatakan berhasil. Bahkan, uji beban (load test) juga dilakukan untuk memastikan server mampu menangani lonjakan pengguna.

Namun saat flash sale berlangsung, tim Customer Service menerima banyak keluhan. Pengguna mengaku tidak dapat menyelesaikan pembelian karena tombol “Bayar Sekarang” tidak terlihat, terutama di perangkat Android berlayar kecil dan iPhone SE.

Investigasi dan Temuan

Tim QA manual segera melakukan investigasi dengan menguji aplikasi di beberapa perangkat mobile berukuran layar kecil. Berikut temuan mereka:

●      Sticky banner promo yang berada di bagian atas halaman memakan ruang tampilan yang cukup besar.

●      Tombol “Bayar Sekarang” yang seharusnya tampil di bawah ringkasan belanja terdorong keluar layar (viewport) sehingga tidak terlihat kecuali pengguna menggulir layar secara manual.

●      Karena tidak ada petunjuk bahwa halaman dapat digeser ke bawah, banyak pengguna mengira tombol tersebut tidak tersedia atau halaman sedang bermasalah.

●      Di sisi lain, hasil pengujian otomatis tetap menyatakan tombol berhasil ditemukan dan diklik, karena sistem otomatis membaca elemen dari kode (DOM), bukan dari tampilan yang terlihat di layar.

●      Visual testing manual tidak dilakukan secara menyeluruh di berbagai ukuran perangkat. Fokus utama QA saat itu hanya pada fungsionalitas dan performa, bukan pada responsivitas visual.

Dampak yang Terjadi

●      Tingkat konversi mengalami penurunan drastis selama tiga jam pertama flash sale.

●      Jumlah keranjang belanja yang ditinggalkan (abandon cart) melonjak lebih dari 60% dibandingkan hari sebelumnya.

●      Reputasi brand menurun di mata pengguna karena dianggap "tidak siap" atau "tidak profesional".

●      Tim pemasaran menyebutkan kerugian hingga ratusan juta rupiah karena target penjualan tidak tercapai.

●      Tim QA internal harus membuat laporan evaluasi (post-mortem) dan dokumentasi insiden.

Pelajaran yang Didapat

●      Bug visual dapat berdampak lebih serius dibandingkan bug fungsional karena langsung mempengaruhi pengalaman pengguna.

●      Pemeriksaan visual secara manual wajib dilakukan untuk halaman penting seperti halaman checkout, khususnya pada berbagai ukuran layar.

●      QA perlu bekerja sama dengan tim UI/UX untuk memastikan bahwa semua perubahan desain tidak hanya terlihat menarik, tetapi juga berfungsi dengan baik secara teknis.

●      Pengujian otomatis tidak dapat dijadikan satu-satunya pendekatan. Gabungan antara pengujian otomatis dan visual testing manual harus menjadi standar dalam tahap akhir pengujian sebelum rilis.

Last modified: Thursday, 21 August 2025, 8:23 AM