12 Istilah Dasar Browser Automation

Panduan Istilah Dasar Browser Automation

Browser automation adalah cara membuat “robot browser” yang bisa membuka website, klik tombol, isi form, upload file, menulis caption, dan menjalankan alur kerja seperti manusia.

Panduan ini menggunakan format Pengertian, Tugas, dan Analogi agar setiap istilah lebih mudah dipahami.

1. Navigasi Dasar

1.1 Visit / Go To

Pengertian: Perintah untuk membuka alamat website tertentu.

Tugas: Mengarahkan browser ke halaman yang ingin diproses.

Analogi: Seperti mengetik alamat website di address bar lalu menekan Enter.

page.goto("https://www.tiktok.com/upload")

1.2 Wait For Element

Pengertian: Perintah untuk menunggu sampai tombol, kolom input, gambar, atau elemen lain muncul di halaman.

Tugas: Mencegah robot klik terlalu cepat sebelum halaman siap.

Analogi: Seperti menunggu pintu toko terbuka dulu sebelum masuk.

page.wait_for_selector("input[type='file']")

1.3 Delay / Sleep

Pengertian: Memberi jeda beberapa detik sebelum lanjut ke perintah berikutnya.

Tugas: Membuat robot berhenti sebentar agar proses website selesai.

Analogi: Seperti menunggu beberapa detik setelah upload video karena sistem sedang memproses file.

page.wait_for_timeout(3000)

Angka 3000 berarti menunggu 3000 milidetik atau 3 detik.

2. Pengaturan Cookies dan Session

Cookies bisa dianggap sebagai “memori browser”. Isinya dapat menyimpan status login, preferensi, dan data sesi.

2.1 Load Cookies / Load Session

Pengertian: Memuat data login yang sudah pernah disimpan sebelumnya.

Tugas: Agar user tidak perlu login ulang setiap membuka aplikasi.

Analogi: Seperti penjaga toko sudah mengenali kamu, jadi kamu tidak perlu menunjukkan identitas lagi.

browser = playwright.chromium.launch_persistent_context(
    user_data_dir="browser_profile",
    headless=False
)

2.2 Clear Cookies

Pengertian: Menghapus data login dan memori browser.

Tugas: Logout dari akun, membersihkan session, atau mengganti akun.

Analogi: Seperti menghapus riwayat dan tanda pengenal kamu dari browser.

context.clear_cookies()

2.3 Save Session

Pengertian: Menyimpan kondisi browser setelah user login.

Tugas: Agar login tetap tersimpan untuk upload berikutnya.

Analogi: Seperti menyimpan kunci rumah, supaya besok tidak perlu minta kunci baru.

User login manual
↓
Session tersimpan di folder browser_profile
↓
Besok buka aplikasi, akun masih login

3. Manajemen Tab

Tab adalah jendela kecil di dalam browser. Robot harus tahu tab mana yang sedang aktif.

3.1 New Tab

Pengertian: Membuka tab baru dalam browser yang sama.

Tugas: Membuka halaman lain tanpa menutup halaman sebelumnya.

Analogi: Seperti membuka lembar kerja baru di meja yang sama.

new_page = context.new_page()

3.2 Switch Tab

Pengertian: Berpindah dari satu tab ke tab lain.

Tugas: Mengatur robot supaya bekerja di tab yang benar.

Analogi: Seperti punya beberapa buku terbuka, lalu memilih buku mana yang mau dibaca.

pages = context.pages
page = pages[1]

Contoh di atas berarti pindah ke tab urutan kedua.

3.3 Close Current Tab

Pengertian: Menutup tab yang sedang aktif.

Tugas: Membersihkan tab setelah tugas selesai.

Analogi: Seperti menutup buku setelah selesai membaca.

page.close()

3.4 Close All Other Tabs

Pengertian: Menutup semua tab kecuali tab utama yang sedang dipakai.

Tugas: Agar browser tetap rapi dan tidak berat.

Analogi: Seperti membersihkan meja kerja dan hanya menyisakan dokumen penting.

for p in context.pages:
    if p != active_page:
        p.close()

4. Navigasi Layar dan Frame

4.1 Scrolling

Pengertian: Menggulir halaman ke atas atau ke bawah.

Tugas: Melihat tombol atau konten yang tersembunyi di bawah halaman.

Analogi: Seperti menggulir layar HP untuk melihat bagian bawah postingan.

page.mouse.wheel(0, 1000)

Contoh di atas berarti scroll ke bawah 1000 pixel.

4.2 Scroll Into View

Pengertian: Menggeser layar otomatis sampai elemen tertentu terlihat.

Tugas: Memastikan tombol atau kolom input terlihat sebelum diklik.

Analogi: Seperti kamera diarahkan dulu ke objek sebelum difoto.

page.locator("button").scroll_into_view_if_needed()

4.3 Switch Frame / Iframe

Pengertian: Masuk ke halaman kecil yang tertanam di dalam halaman utama.

Tugas: Mengakses tombol atau form yang berada di dalam iframe.

Analogi: Seperti ada kotak kecil di dalam website, dan robot harus masuk ke kotak itu dulu sebelum bisa klik isinya.

frame = page.frame_locator("iframe")
frame.locator("button").click()

5. Interaksi Elemen

5.1 Click

Pengertian: Perintah untuk menekan tombol, link, menu, atau elemen tertentu.

Tugas: Menjalankan aksi di website.

Analogi: Seperti klik tombol Upload atau Publish.

page.click("button")

5.2 Fill

Pengertian: Mengisi kolom input dengan teks.

Tugas: Menulis caption, judul, hashtag, username, atau data lain.

Analogi: Seperti mengetik caption di kolom postingan.

page.fill("textarea", "Ini caption video saya")

5.3 Type

Pengertian: Mengetik teks secara bertahap seperti manusia.

Tugas: Membuat input terlihat lebih natural dibanding langsung mengisi sekaligus.

Analogi: Seperti mengetik huruf satu per satu di keyboard.

page.type("textarea", "Caption produk terbaru", delay=50)

5.4 Press Key

Pengertian: Menekan tombol keyboard tertentu.

Tugas: Menekan Enter, Tab, Escape, Ctrl+A, dan lainnya.

Analogi: Seperti menekan Enter untuk pindah baris atau Tab untuk pindah kolom.

page.keyboard.press("Enter")

6. Upload File

6.1 Set Input Files

Pengertian: Memasukkan file dari komputer ke form upload website.

Tugas: Upload video, gambar, atau dokumen.

Analogi: Seperti klik Pilih File, lalu memilih video dari folder komputer.

page.set_input_files("input[type='file']", "video.mp4")

6.2 File Path

Pengertian: Alamat lokasi file di komputer.

Tugas: Memberi tahu robot file mana yang harus diupload.

Analogi: Seperti alamat rumah. Kalau alamatnya salah, kurir tidak bisa menemukan rumahnya.

video_path = "C:/Users/Admin/Videos/video1.mp4"

7. Selector

Selector adalah “alamat elemen” di dalam halaman website.

7.1 CSS Selector

Pengertian: Cara memilih elemen berdasarkan tag, class, id, atau atribut HTML.

Tugas: Memberi tahu robot tombol atau kolom mana yang harus dipakai.

Analogi: Seperti alamat rak di supermarket: lorong 3, rak 2, baris 5.

page.click("button[type='submit']")

7.2 Text Selector

Pengertian: Memilih elemen berdasarkan teks yang terlihat.

Tugas: Klik tombol berdasarkan tulisan yang muncul di layar.

Analogi: Seperti mencari tombol bertuliskan Next, lalu menekannya.

page.get_by_text("Upload").click()

7.3 Locator

Pengertian: Objek yang mewakili elemen di halaman.

Tugas: Mencari, menunggu, lalu berinteraksi dengan elemen secara lebih stabil.

Analogi: Seperti menunjuk satu tombol spesifik dan berkata, “yang ini yang saya maksud.”

upload_button = page.locator("button")
upload_button.click()

8. Status dan Validasi

8.1 Check Element Exists

Pengertian: Mengecek apakah elemen muncul di halaman.

Tugas: Memastikan halaman sudah benar sebelum lanjut.

Analogi: Seperti memastikan pintu ada sebelum mencoba membukanya.

if page.locator("text=Publish").is_visible():
    print("Tombol Publish ditemukan")

8.2 Check Upload Success

Pengertian: Mengecek apakah upload berhasil.

Tugas: Menentukan status video: sukses, gagal, atau perlu dicoba ulang.

Analogi: Seperti menunggu notifikasi “video berhasil diposting”.

Jika muncul teks "Uploaded successfully"
↓
Status queue = Success

8.3 Error Handling

Pengertian: Cara menangani error saat automation gagal.

Tugas: Agar aplikasi tidak langsung crash ketika website berubah, internet lambat, atau tombol tidak ditemukan.

Analogi: Seperti sopir yang mencari jalan alternatif saat jalan utama ditutup.

try:
    page.click("button")
except Exception as e:
    print("Gagal klik tombol:", e)

9. Queue Upload

Queue adalah antrean tugas upload.

9.1 Add To Queue

Pengertian: Menambahkan video dan caption ke daftar antrean.

Tugas: Menyimpan data sebelum proses upload dimulai.

Analogi: Seperti memasukkan beberapa paket ke daftar pengiriman.

{
  "video": "video1.mp4",
  "caption": "Caption pertama",
  "platform": "TikTok",
  "status": "pending"
}

9.2 Process Queue

Pengertian: Menjalankan antrean satu per satu.

Tugas: Upload video secara berurutan.

Analogi: Seperti kasir melayani pelanggan satu per satu sesuai antrean.

Video 1 → Upload → Success
Video 2 → Upload → Success
Video 3 → Upload → Failed

9.3 Retry Failed

Pengertian: Mengulang tugas yang gagal.

Tugas: Mencoba upload ulang jika error karena internet, halaman lambat, atau tombol belum muncul.

Analogi: Seperti mengirim ulang paket yang gagal terkirim.

Jika gagal maksimal 3 kali
↓
Tandai sebagai Failed

10. Browser Mode

10.1 Headless Mode

Pengertian: Browser berjalan tanpa terlihat di layar.

Tugas: Menjalankan automation di belakang layar.

Analogi: Seperti mesin bekerja di dapur, kamu tidak melihat prosesnya.

browser = playwright.chromium.launch(headless=True)

Untuk upload sosial media, biasanya lebih baik tidak menggunakan headless mode.

10.2 Headful Mode

Pengertian: Browser terlihat di layar.

Tugas: User bisa melihat proses login, upload, dan publish.

Analogi: Seperti melihat robot bekerja langsung di browser.

browser = playwright.chromium.launch(headless=False)

10.3 Persistent Browser

Pengertian: Browser yang menyimpan profil, cookies, dan session.

Tugas: Agar akun tetap login walaupun aplikasi ditutup.

Analogi: Seperti browser pribadi yang tetap ingat akun Google, TikTok, atau Instagram.

context = playwright.chromium.launch_persistent_context(
    user_data_dir="browser_profile",
    headless=False
)

11. Istilah Penting untuk Aplikasi Upload Sosmed

11.1 Platform Module

Pengertian: File khusus untuk mengatur automation setiap platform.

Tugas: Memisahkan logic TikTok, Instagram, X, Threads, dan Pinterest.

Analogi: Seperti tiap kurir punya aturan pengiriman berbeda.

platforms/
├── tiktok.py
├── instagram.py
├── pinterest.py
├── x.py
└── threads.py

11.2 Base Uploader

Pengertian: Template utama yang dipakai semua platform.

Tugas: Menyamakan pola upload: buka halaman, upload video, isi caption, publish.

Analogi: Seperti SOP umum kerja, lalu tiap platform punya penyesuaian sendiri.

BaseUploader:
- open_upload_page()
- upload_video()
- fill_caption()
- publish()

11.3 Log

Pengertian: Catatan proses aplikasi.

Tugas: Menyimpan informasi sukses, gagal, error, dan waktu upload.

Analogi: Seperti buku laporan kerja harian.

[10:21] TikTok - video1.mp4 - Upload started
[10:23] TikTok - video1.mp4 - Success
[10:25] Pinterest - video2.mp4 - Failed

12. Contoh Alur Lengkap Robot Upload

Berikut contoh alur kerja robot browser automation saat mengupload video ke sosial media.

1. Buka browser
2. Load session login
3. Buka halaman upload TikTok
4. Tunggu tombol upload muncul
5. Pilih file video
6. Tunggu video selesai diproses
7. Isi caption
8. Scroll ke tombol Publish
9. Klik Publish
10. Tunggu status berhasil
11. Tutup tab
12. Lanjut video berikutnya

Analogi Sederhana

Robot browser automation bisa dianggap seperti asisten admin digital. Dia membuka website, mengambil video dari folder, menulis caption, menekan tombol upload, menunggu proses selesai, mencatat hasilnya, lalu lanjut ke tugas berikutnya.

Kesimpulan

Browser automation membantu pekerjaan berulang seperti upload video, isi caption, klik tombol publish, dan mengecek status upload. Dengan memahami istilah dasar seperti navigasi, selector, cookies, session, queue, dan error handling, proses membuat aplikasi uploader otomatis akan jauh lebih mudah dipahami.