Bedah Repositori 'Browser-Use': Mengotomatisasi Navigasi Web Kompleks Menggunakan Agentic DOM Extraction
Ada paradoks menarik ketika kita mengamati bagaimana Large Language Model (LLM) berinteraksi dengan web modern. Di satu sisi, model mutakhir seperti Claude 3.5 Sonnet atau GPT-4o sanggup membedah teori mekanika kuantum dalam hitungan detik. Namun, begitu dihadapkan pada tugas sepele seperti memesan tiket kereta di situs web dinamis—melewati tiga lapis *modal popup*, memilih tanggal dari kalender JavaScript, dan menyelesaikan verifikasi dua langkah—agen berbasis LLM kerap tersandung dan menyerah.
Masalahnya bukan pada kecerdasan model, melainkan pada antarmuka persepsinya.
Web modern dirancang secara visual untuk manusia, namun dibangun di atas tumpukan kode yang luar biasa kotor bagi mesin. Jika kita menyuapkan seluruh `document.body.innerHTML` ke dalam *context window*, model akan tenggelam dalam ribuan baris tag `
`, inline CSS, script pelacak iklan, dan atribut SVG yang tidak relevan. Sebaliknya, jika kita hanya menyuapkan tangkapan layar visual murni (*pure vision*), konsumsi token akan melonjak drastis, latensi membengkak, dan model rentan mengalami disorientasi koordinat (*spatial hallucination*) saat mengklik elemen mikro.
Repositori *open-source* **Browser-Use** hadir memecahkan dilema tersebut melalui pendekatan rekayasa yang sangat elegan: **Agentic DOM Extraction** berbasis Accessibility Tree (AXTree) dan *coordinate mapping* hibrida.
Mari kita bedah arsitektur internalnya, bagaimana ia memangkas konsumsi token hingga 80%, serta bagaimana kita bisa menerapkannya dalam infrastruktur otomasi produksi yang tangguh.
---
## Anatomi Masalah: Mengapa Otomasi Web Berbasis AI Sering Gagal?
Sebelum mengurai solusi yang ditawarkan Browser-Use, kita perlu memetakan kegagalan dua mazhab utama yang selama ini mendominasi ekosistem *browser agent*:
### 1. Mazhab Brutal: Raw HTML Dump
Pendekatan paling primitif adalah mengambil seluruh representasi DOM mentah dan memberikannya kepada LLM.
* **Token Bloat:** Satu halaman landing page modern dengan React atau Vue dapat dengan mudah menghabiskan 40.000 hingga 120.000 token hanya untuk markup struktural.
* **Sinyal vs. Derau:** Dari 100 KB teks HTML, mungkin hanya 2 KB yang mewakili elemen interaktif nyata (tombol, input, dropdown). Sisanya adalah *wrapper* layout yang tidak memiliki nilai semantik bagi pengambilan keputusan.
### 2. Mazhab Vision-Only (Set-of-Marks)
Pendekatan kedua bergantung penuh pada penglihatan komputer. Halaman dirender, tangkapan layar diambil, setiap elemen diberi kotak penanda (*bounding box*) berwarna beserta angka (Set-of-Marks prompting), lalu LLM multimodal diminta membaca koordinat $X, Y$.
* **Biaya Komputasi Selangit:** Mengirim gambar beresolusi tinggi (misal 1920x1080) pada setiap putaran siklus interaksi (*step*) membakar kuota token vision dalam sekejap.
* **Latensi Tinggi:** Proses rendering visual + visual token encoding memakan waktu 2–5 detik per aksi, membuat navigasi multi-langkah terasa lambat seperti siput.
* **Ketidakpastian Koordinat:** Model visual sering meleset beberapa piksel saat menargetkan elemen form yang rapat atau *nested dropdown*.
Browser-Use mengambil jalan tengah yang cerdas: **jangan biarkan LLM melihat web seperti desainer grafis, dan jangan paksa ia membaca web seperti web browser engine.** Jadikan web terbaca seperti daftar pohon interaksi semantik.
---
## Di Balik Dapur 'Browser-Use': Mekanisme Agentic DOM Extraction
Inti keunggulan Browser-Use bertumpu pada modul ekstraksi DOM khusus yang disuntikkan (*injected*) langsung ke dalam runtime browser via Playwright. Modul ini tidak sekadar membaca HTML string, melainkan mengevaluasi status komputasi nyata (*computed styles* dan *bounding rects*) dari setiap node secara langsung di peramban.
```
[ Web Browser / DOM Runtime ]
│
▼
[ Injected JS: buildDomTree ] ──> Evaluasi Visibility & Bounding Box
│
▼
[ Filter & Interactive Node Indexing ] ──> Assign Tag [:index]
│
▼
[ Compact Semantic State ] ──> Dikirim ke LLM (Text Representation)
│
▼
[ Action Output: click(14), type(8, "Jakarta") ]
```
### 1. Ekstraksi Pohon Aksesibilitas (AXTree) Terfilter
Browser-Use memanfaatkan konsep *Accessibility Tree*—struktur data internal yang biasa digunakan oleh *screen reader* untuk penyandang disabilitas. Struktur ini secara alami telah membuang seluruh elemen dekoratif dan hanya menyisakan elemen yang memiliki makna fungsional.
Melalui script JavaScript internalnya (yang dioptimasi hingga level performa tinggi), Browser-Use menyaring elemen berdasarkan kriteria ketat:
* Apakah elemen memiliki dimensi nyata ($width > 0$ dan $height > 0$)?
* Apakah elemen tersembunyi di balik `display: none`, `visibility: hidden`, atau `opacity: 0`?
* Apakah elemen berada di dalam *viewport* aktif atau bisa dijangkau via *scroll*?
* Apakah elemen memiliki *event listener* interaktif (`onclick`, `onkeydown`, `cursor: pointer`, atribut `role="button"`, atau elemen form bawaan)?
### 2. Indexed Interactive Nodes (Penomoran Node Interaktif)
Setelah pohon disaring, Browser-Use memberikan label indeks unik numerik pada setiap elemen interaktif yang lolos seleksi.
Sebagai contoh, alih-alih mengirimkan snippet HTML kompleks seperti ini:
```html
```
Browser-Use memadatkannya menjadi satu baris semantik sederhana:
```text
[14]
```
Ketika LLM ingin mengisi formulir tersebut, ia tidak perlu memikirkan XPath yang rapuh atau koordinat piksel yang ambigu. Model cukup mengembalikan instruksi:
```json
{"action": "input_text", "index": 14, "text": "Denpasar (DPS)"}
```
Controller pada Python kemudian menerjemahkan indeks `14` kembali ke elemen DOM yang tersimpan di dalam memori sesi browser dan mengeksekusi aksi secara presisi tanpa margin kesalahan.
---
## Tokenomics: Mengapa DOM Extraction Jauh Lebih Efisien?
Mari kita bedah perbandingan efisiensi teknis antara pendekatan tradisional, pendekatan visual murni, dan arsitektur hibrida Browser-Use:
| Parameter | Raw HTML Dump | Pure Vision (Set-of-Marks) | Browser-Use (Agentic DOM) |
| :--- | :--- | :--- | :--- |
| **Konsumsi Token / Langkah** | 30.000 – 100.000+ token | 1.500 – 3.000 vision token | **250 – 900 text token** |
| **Latensi per Langkah** | 4.0 – 8.0 detik | 3.5 – 6.0 detik | **0.8 – 1.8 detik** |
| **Akurasi Interaksi Form** | Rendah (Parsing overload) | Menengah (Spatial jitter) | **Sangat Tinggi (Deterministic Index)** |
| **Kebutuhan Vision Model** | Tidak | Wajib | **Opsional (Fallback Only)** |
| **Ketahanan Dinamis (SPA)** | Rentan (Stale DOM) | Rentan (Rendering lag) | **Tinggi (Real-time Tree Evaluation)** |
| **Biaya Operasional (100 Tugas)** | ~$45.00 – $120.00 | ~$12.00 – $25.00 | **~$0.80 – $2.50** |
Perbedaan angka di atas bukan sekadar selisih marjinal. Dalam konteks arsitektur produksi di mana sebuah *task* rata-rata membutuhkan 10 hingga 25 langkah navigasi, beralih dari model *vision-heavy* ke *agentic DOM extraction* memotong biaya operasional hingga **90%** sekaligus melipatgandakan kecepatan eksekusi agen.
---
## Bedah Alur Kode: Membangun Agent Otomasi dengan Browser-Use
Bagaimana cara mengintegrasikan Browser-Use ke dalam skrip Python kita? Mari kita lihat struktur implementasi praktisnya.
### Persiapan Dependensi
```bash
pip install browser-use playwright langchain-openai
playwright install
```
### Implementasi Script Agentic
Di bawah ini adalah implementasi minimal yang menunjukkan bagaimana Browser-Use mengorkestrasi *BrowserContext*, model LLM, dan eksekusi tugas multi-langkah:
```python
import asyncio
from browser_use import Agent, Controller
from browser_use.browser.browser import Browser, BrowserConfig
from browser_use.browser.context import BrowserContextConfig
from langchain_openai import ChatOpenAI
async def run_booking_researcher():
# 1. Konfigurasi peramban tanpa membebani memori
browser = Browser(
config=BrowserConfig(
headless=False, # Set True untuk production server
disable_security=True,
)
)
# 2. Inisialisasi LLM Router
# Kita menggunakan endpoint terstandarisasi yang cepat & efisien
llm = ChatOpenAI(
model="claude-3-5-sonnet-20241022",
base_url="https://api.aistudio.id/v1",
api_key="YOUR_AISTUDIO_API_KEY",
temperature=0.0,
)
# 3. Definisikan Agent
agent = Agent(
task=(
"Buka google.com, cari 'repositori browser-use github', "
"masuk ke repositori tersebut, lalu ekstrak jumlah Star dan rilis versi terakhirnya."
),
llm=llm,
browser=browser,
use_vision=True, # Aktifkan vision hanya sebagai validator visual sekunder
max_actions_per_step=3, # Mengizinkan agen menggabungkan aksi berurutan
)
# 4. Jalankan siklus otomasi
history = await agent.run(max_steps=15)
print("\n--- HASIL EKSTRAKSI ---")
print(history.final_result())
await browser.close()
if __name__ == "__main__":
asyncio.run(run_booking_researcher())
```
### Apa yang Terjadi di Bawah Tenda Saat Kode Berjalan?
1. **Inisialisasi Sesi Browser:** Browser-Use menyalakan instance Chromium via Playwright dengan *isolated context*.
2. **Injeksi Scanner:** Skrip DOM parser disuntikkan ke konteks halaman. Saat halaman Google termuat, ia memindai seluruh *interactive tree*, memetakan kotak pencarian ke indeks tertentu (misal: `[3]