Hasil QA berbasis AI pada alat desain berbasis web melaporkan “Semua fitur berfungsi, lulus,” namun kanvas tidak menampilkan apa pun. Hasil lulus palsu tersebut bukanlah gangguan pada penalaran model; itu adalah efek samping dari cara browser menangani tab tersembunyi dan bagaimana skrip pengujian mengukur “kesehatan” alih-alih output visual.

Mengapa agen QA AI bisa melewatkan kanvas kosong

Mereka mengeksekusi JavaScript, mengambil tangkapan layar, dan membiarkan model menyimpulkan apakah suatu fitur berperilaku dengan benar. Dalam praktiknya, dua titik buta teknis berulang kali menghasilkan status lulus padahal UI sebenarnya kosong.

Penjelasan tentang throttling tab tersembunyi

Chrome MCP sering kali menjalankan pengujian di tab latar belakang agar jendela utama tetap bebas untuk pekerjaan lain. Ketika document.visibilityState sebuah tab berstatus hidden, browser akan melakukan throttling pada pipeline rendering:

  • JavaScript tetap berjalan, sehingga tidak ada error runtime yang muncul.
  • Callback requestAnimationFrame berhenti dipicu, menyebabkan hitungan frame animasi tetap nol.
  • Timer dipicu jauh lebih jarang; pengujian yang mengharapkan interval 33 ms hanya mengamati empat kali.

Agen AI melihat hasil JS yang bersih dan sebuah tangkapan layar, lalu berasumsi animasi telah berfungsi. Karena loop rendering tidak pernah menghasilkan piksel, cacat visual tersebut tetap tersembunyi.

Perbaikan untuk masalah tab tersembunyi

  • Pastikan tab pengujian tetap terlihat untuk verifikasi kanvas, animasi, atau grafis apa pun.
  • Picu interaksi hanya setelah tab berada di latar depan (foreground).
  • Masukkan jeda singkat (beberapa detik) sebelum mengambil tangkapan layar, untuk memastikan buffer frame telah terisi.
  • Jika tab tersembunyi harus digunakan, tambahkan disclaimer pada laporan seperti “rendering tidak diamati secara visual.”

Kesehatan kode vs. perilaku fitur

Sebagian besar skrip QA AI mengevaluasi “kesehatan kode”: mereka mengonfirmasi bahwa click handler telah terhubung, tidak ada pengecualian (exception) JavaScript yang dilemparkan, dan pustaka yang diperlukan telah dimuat. Sinyal-sinyal tersebut membuktikan bahwa kode telah berjalan, bukan bahwa UI berubah sesuai keinginan. Elemen kanvas dapat dibuat, rutinitas menggambar dipanggil, namun tetap tidak merender apa pun jika perintah menggambar menargetkan buffer berukuran nol atau aset yang kosong.

Perbedaan ini penting karena jalur kode yang sehat dapat menutupi hilangnya artefak visual.

Menambahkan pemeriksaan perilaku

  1. Identifikasi elemen dinamis – Pindai sumber untuk tag canvas, bidang file-input, tombol unduh, dan loop animasi.
  2. Tentukan hasil yang dapat diamati – Untuk kanvas, wajibkan pemeriksaan tingkat piksel bahwa bitmap tidak kosong. Untuk input file, verifikasi bahwa gambar pratinjau muncul. Untuk unduhan, konfirmasikan bahwa file dibuat di sistem file. Untuk animasi, pastikan bahwa properti yang dilacak berubah seiring waktu.
  3. Laporkan cakupan – Lampirkan tabel pada output QA yang mencantumkan setiap fitur, status kesehatan kode, dan hasil verifikasi perilaku. Apa pun yang tidak memiliki pemeriksaan perilaku akan tetap berstatus “unverified” alih-alih “pass.”

Menerapkan aturan ini secara drastis mengurangi false positive dalam rangkaian pengujian penulis dan juga mengungkap ketidakcocokan CSS di mana lembar gaya (stylesheet) menyatakan satu warna tetapi piksel yang dirender berbeda.

Langkah praktis untuk pengujian visual yang andal

  • Jalankan pengujian di tab yang terlihat kapan pun fitur melibatkan rendering.
  • Tunggu UI stabil; penundaan tetap selama beberapa detik sering kali cukup, tetapi pendekatan yang lebih kuat adalah dengan melakukan polling untuk kanvas yang tidak kosong menggunakan getImageData.
  • Pisahkan asersi kesehatan kode dari asersi visual dalam skrip pengujian; biarkan model AI mengevaluasi masing-masing secara independen.
  • Catat status visibilitas dan penghitung frame (panggilan requestAnimationFrame) sebagai bagian dari output diagnostik.
  • Dokumentasikan setiap pengujian tab tersembunyi yang tidak dapat dihindari dengan peringatan eksplisit agar peninjau selanjutnya memahami keterbatasannya.

Apa yang perlu diperhatikan selanjutnya

Seiring dengan menjamurnya alat QA berbantuan AI, pengembang harus memperlakukannya sebagai asisten, bukan penentu keputusan. Metrik kesehatan kode akan selalu menjadi proksi yang tidak lengkap untuk perilaku yang dihadapi pengguna. Intinya sederhana: model AI hanya dapat melaporkan apa yang dilihatnya. Jika browser tidak pernah melakukan painting karena tab tersembunyi, atau jika skrip pengujian tidak pernah bertanya “apakah sesuatu muncul di layar?”, model akan dengan senang hati menyatakan sukses. Menambahkan persyaratan visibilitas dan langkah verifikasi perilaku mengubah status lulus yang tampak bagus menjadi hasil yang dapat dipercaya.