Agen sudah mengeklik Simpan. Bagaimana kamu tahu hasilnya tersimpan?

Kamu tentu ingin draf benar-benar tersimpan ketika agen melaporkan tugas selesai. Namun, agen bisa saja baru mengeklik tombol “Simpan”, sementara server menolak permintaan dan halaman terus menunggu. Untuk memastikan hasilnya, kita perlu memeriksa apa yang berubah setelah klik itu.

Agen yang mengerjakan tugas melalui browser disebut browser agent. Ia perlu membaca halaman, memilih sasaran, bertindak, lalu memeriksa hasilnya. Contoh di artikel ini memakai halaman uji buatan dan perintah pemrograman dari Playwright; izin serta cara otomatisasi pada layanan lain bisa berbeda.

Pilih cara membaca halaman yang sesuai

Susunan elemen halaman yang bisa dibaca program disebut DOM. Ada juga accessibility tree, yaitu gambaran label, peran, status, dan hubungan elemen untuk membantu aksesibilitas. Keduanya membantu agen memahami bagian halaman seperti tombol dan isian.

Tangkapan layar, atau screenshot, membantu membaca tata letak dan bagian yang hanya tampil sebagai gambar. Ini berguna pada bidang gambar bebas yang disebut canvas, atau kontrol yang belum punya keterangan yang cukup bagi program. Cara membaca yang dipilih bergantung pada informasi yang kamu butuhkan.

Cara menunjuk elemen halaman disebut locator. Kalau tombol punya nama yang jelas bagi alat bantu aksesibilitas, locator berdasarkan perannya biasanya lebih mudah dipahami daripada titik koordinat layar. Untuk ikon tanpa label, tangkapan layar bisa membantu mencari masalahnya, sementara perbaikan aksesibilitas kontrol mungkin menjadi solusi produk yang lebih baik.

Jangan menganggap halaman lama masih menggambarkan sasaran saat ini. Perpindahan halaman, kotak dialog di atas halaman atau modal, hasil pencarian, dan pembaruan yang datang belakangan bisa mengubah keadaannya. Baca ulang halaman ketika keadaan itu berubah sebelum melangkah lagi.

Tunjuk elemen dengan maksud yang jelas

Dokumentasi locator Playwright menyarankan pencarian elemen berdasarkan keadaan saat tindakan dilakukan, termasuk peran dan labelnya. Rangkaian aturan pencarian, atau selector, yang bergantung pada urutan elemen dalam DOM mudah rusak saat desain berubah. Label Judul, tombol Simpan draf, dan bagian status menjadi penanda pada halaman contoh berikut.

Fungsi ini adalah contoh pengujian untuk halaman di komputer sendiri yang dikendalikan tim. Kodenya tidak ditujukan untuk situs pihak ketiga:

export async function saveDraft(page, title) {
  const input = page.getByLabel('Judul', { exact: true });
  const button = page.getByRole('button', {
    name: 'Simpan draf', exact: true
  });
  await input.fill(title);
  await button.click();
  const status = page.getByRole('status').filter({
    hasText: 'Draf tersimpan'
  });
  await status.waitFor({ state: 'visible' });
  const savedTitle = await page.getByTestId('saved-title').textContent();
  if (savedTitle !== title) {
    throw new Error('Judul yang tersimpan tidak sesuai');
  }
  return { status: 'verified', title: savedTitle };
}

Pastikan elemen saved-title pada halaman uji berasal dari hasil penyimpanan. Salinan isian yang muncul saat kamu mengetik belum cukup. Pada sistem nyata, bukti yang lebih kuat bisa didapat dengan membuka ulang draf atau membaca penanda dan revisi yang dikembalikan layanan.

Menunggu tombol siap belum memastikan tugas selesai

Playwright bisa menunggu elemen siap secara otomatis, yang disebut auto-waiting. Sebelum tindakan tertentu, ia memeriksa apakah elemen terlihat, stabil, bisa menerima interaksi, dan aktif. Ini mengurangi kebutuhan jeda tetap, tetapi belum membuktikan pekerjaanmu berhasil.

Jangan menjadikan sleep(5000) sebagai penanda selesai. Jeda itu bisa terlalu pendek saat layanan lambat dan terlalu panjang saat cepat. Tunggu perubahan yang sesuai dengan tujuan tugas, beri batas waktu yang jelas, lalu tampilkan penyebab kegagalan yang bisa dipahami.

Status “Draf tersimpan” harus merujuk penyimpanan yang sedang dikerjakan. Kalau status lama masih terlihat, tes bisa lolos sebelum penyimpanan baru selesai. Pakai penanda operasi, revisi, atau perubahan keadaan yang bisa membedakan hasil baru dari hasil sebelumnya.

Catat keadaan layar sebelum memakai koordinat

Saat mengeklik titik pada layar, catat ukuran area halaman yang terlihat atau viewport, pembesaran, posisi gulir, dan kotak dialog yang terbuka. Titik pada tangkapan layar lama bisa menunjuk elemen lain setelah halaman bergeser. Kalau hasilnya meleset, baca ulang halaman sebelum mengulang klik di tempat yang sama.

Tangkapan layar bisa membawa data pengguna, tab, atau notifikasi lain. Ambil hanya area yang diperlukan, lalu atur siapa yang boleh membaca berkasnya dan sampai kapan disimpan. Untuk pengujian bersama, pakai akun dan data buatan agar gambar yang dibagikan tidak membawa informasi yang tidak dibutuhkan.

Untuk kontrol visual yang rumit, cari sasarannya lebih dulu lalu konfirmasikan tindakan yang akan dilakukan. Jika dampaknya besar, tampilkan objek yang akan terkena tindakan. Setelah itu, jalankan sesuai kewenangan yang sudah diberikan pengguna.

Sesuaikan bukti dengan dampak pekerjaan

Bukti di layar dan bukti dari hasil yang disimpan punya batas masing-masing. Kamu bisa memilih lapisan pemeriksaan dari tabel berikut:

Mengubah penyaring tampilan membutuhkan bukti yang berbeda dari mengirim kampanye. Untuk pengiriman, tombol yang berganti warna belum cukup menjadi dasar laporan “terkirim”. Pilih pemeriksaan yang sepadan dengan akibat tindakannya.

Saat gagal, periksa dulu sebelum mengulang

Jika batas waktu tunggu habis setelah tombol kirim ditekan, cari status operasi sebelum mencoba lagi. Pengulangan bisa menggandakan pesanan, pesan, atau publikasi. Bila tersedia, simpan titik lanjut pekerjaan, atau checkpoint, dan gunakan penanda untuk mencegah tindakan ganda, yang disebut idempotency key.

Uji keadaan ketika label tombol sama, kotak dialog menutupi sasaran, jaringan lambat, atau halaman menampilkan kesalahan. Tambahkan juga kasus hasil lama dan perpindahan ke halaman yang tidak diharapkan. Catat keadaan awal, tindakan, dan bukti akhir agar kegagalan bisa diulang untuk diperiksa.

Simpan penanda tab dan tujuan halaman yang diharapkan. Tab dengan judul mirip bisa memakai akun atau lingkungan yang berbeda. Sebelum mengubah data, cocokkan halaman dengan pekerjaan yang diminta agar tindakan dan pemeriksaannya mengenai objek yang sama.

Untuk tim media, agen browser bisa membantu pekerjaan yang belum terhubung lewat jalur pemrograman antarlayanan, atau API. Hitung juga biaya merawatnya, karena perubahan tampilan bisa mematahkan alur meski kebutuhan kerja tetap sama. Sebelum memperluas otomatisasi, bandingkan waktu pemulihan dan pemeriksaan dengan biaya pekerjaan sampai selesai.