Blog AI Agents
SISTEM AKSES KOMPUTER

Agen Otomasi Web: Kontrol Browser dengan Claude dan Computer Use

web-automation-agentsbrowser-automation-AIClaude-computer-useagent-web-scrapingvisual-agentagentic-development

Agen Otomasi Web: Kontrol Browser dengan Claude dan Computer Use

Perusahaan Anda membutuhkan data dari portal pemasok yang tidak memiliki API. Itu adalah aplikasi web dengan konten dinamis, formulir multi-langkah, dan tata letak yang berubah setiap beberapa bulan. Skrip Selenium Anda rusak setiap kali mereka memperbarui CSS. Anda memeliharanya seperti kode lawas — rapuh, mahal, dan tidak ada yang mau menyentuhnya.

Agen berbasis penglihatan tidak peduli dengan CSS selector. Ia melihat halaman, menemukan tombol “Search” secara visual, mengkliknya, membaca tabel hasil, dan mengekstrak data. Ketika tata letak berubah, agen beradaptasi karena ia membaca halaman seperti manusia — bukan mem-parsing DOM.

Artikel ini mengajarkan Anda cara membangun agen otomasi web menggunakan kemampuan computer use Claude. Anda akan mempelajari mekanisme inti otomasi visual, pola navigasi yang andal, teknik ekstraksi data, alur kerja pengisian formulir, dan strategi pemulihan kesalahan. Di akhir artikel, Anda akan memiliki pola-pola yang diperlukan untuk membangun agen yang berinteraksi dengan antarmuka web apa pun — dari pembacaan halaman sederhana hingga alur kerja multi-langkah yang kompleks.

Visual vs. Otomasi Tradisional

Sebelum membangun agen berbasis penglihatan, Anda perlu memahami kapan pendekatan ini masuk akal — dan kapan tidak. Alat otomasi tradisional seperti Selenium dan Playwright tidak akan hilang. Mereka cepat, deterministik, dan sudah dipahami dengan baik. Pertanyaannya adalah di mana masing-masing pendekatan unggul dan di mana ia gagal.

Otomasi Tradisional (Selenium/Playwright)

Otomasi browser tradisional bekerja dengan berinteraksi dengan DOM. Anda menemukan elemen menggunakan CSS selector atau ekspresi XPath, kemudian melakukan aksi padanya secara programatis:

# Pendekatan tradisional — cepat tapi rapuh
search_input = driver.find_element(By.CSS_SELECTOR, "#search-box-v3 > input.query")
search_input.send_keys("industrial bearings")
driver.find_element(By.CSS_SELECTOR, "button.search-submit-2024").click()

Ini cepat. Deterministik. Dan rusak begitu seseorang mengganti nama search-box-v3 menjadi search-box-v4 atau merestrukturisasi tata letak formulir. Anda akhirnya memelihara pemetaan selector yang mencerminkan struktur internal situs — struktur yang tidak Anda kendalikan.

Otomasi tradisional juga tidak bisa menangani konten yang hanya visual. Jika data yang Anda butuhkan dirender dalam elemen <canvas>, tertanam dalam gambar, atau ditampilkan sebagai PDF di dalam browser, CSS selector tidak bisa menjangkaunya.

Otomasi Berbasis Penglihatan (Computer Use)

Otomasi berbasis penglihatan bekerja seperti cara manusia bekerja. Agen menerima tangkapan layar, mengidentifikasi elemen yang dibutuhkan secara visual, dan mengeluarkan aksi mouse/keyboard pada koordinat tertentu:

# Pendekatan berbasis penglihatan — tangguh tapi lebih lambat
# Agen melihat halaman, menemukan kotak pencarian secara visual, dan mengetik ke dalamnya
# Tidak perlu selector — beradaptasi dengan perubahan tata letak secara otomatis

Trade-off-nya: lebih lambat (setiap aksi membutuhkan panggilan API dengan gambar), lebih mahal (token untuk tangkapan layar), dan non-deterministik (agen mungkin menginterpretasikan tangkapan layar secara berbeda antar eksekusi). Tapi ia tangguh terhadap perubahan tata letak, bekerja pada antarmuka visual apa pun, dan bisa memahami konten halaman secara semantik.

Pendekatan Hybrid

Strategi paling praktis menggabungkan keduanya:

  • Gunakan otomasi tradisional untuk halaman yang stabil dan terstruktur dengan baik di mana Anda mengontrol antarmuka atau jarang berubah.
  • Gunakan otomasi berbasis penglihatan untuk halaman dinamis, antarmuka yang tidak familiar, konten visual, atau tugas sekali jalan yang tidak layak dipelihara skripnya.
  • Gunakan penglihatan sebagai fallback — coba selector terlebih dahulu; jika gagal, gunakan identifikasi visual.

Kapan Memilih Penglihatan

Otomasi berbasis penglihatan adalah pilihan yang tepat ketika:

  • Tidak ada API yang tersedia dan antarmuka web adalah satu-satunya pilihan Anda
  • Tata letak halaman sering berubah dan pemeliharaan selector terlalu mahal
  • Konten bersifat visual — grafik, gambar, elemen canvas, PDF tertanam
  • Alur kerja multi-langkah membutuhkan konteks — memahami apa yang ada di layar untuk memutuskan aksi selanjutnya
  • Otomasi sekali pakai yang tidak membenarkan biaya rekayasa dari skrip Selenium yang dipelihara
  • Antarmuka yang tidak familiar di mana Anda bisa mendeskripsikan tugas dalam bahasa natural daripada memetakan selector

Dasar-Dasar Claude Computer Use

Kemampuan computer use Claude memungkinkan model berinteraksi dengan layar komputer dengan cara yang sama seperti manusia — dengan melihat tangkapan layar dan mengeluarkan aksi mouse dan keyboard. Memahami mekanismenya sangat penting sebelum membangun agen yang andal.

Cara Kerjanya

Loop computer use sangat sederhana:

  1. Tangkap tangkapan layar dari layar saat ini (atau jendela browser)
  2. Kirim tangkapan layar ke Claude beserta deskripsi tugas
  3. Terima panggilan tool — Claude memberitahu Anda aksi apa yang harus dilakukan (klik, ketik, scroll)
  4. Jalankan aksi tersebut di browser
  5. Tangkap tangkapan layar baru
  6. Ulangi sampai tugas selesai atau agen memberi sinyal selesai

Claude tidak pernah mengontrol browser secara langsung. Kode Anda bertindak sebagai perantara — menerima instruksi dari model dan mengeksekusinya di lingkungan nyata.

Definisi Tool

Computer use bergantung pada definisi tool spesifik — computer_20241022 — yang mendeskripsikan aksi yang tersedia:

computer_tool = {
    "type": "computer_20241022",
    "name": "computer",
    "display_width_px": 1280,
    "display_height_px": 800,
    "display_number": 1,
}

Aksi yang tersedia meliputi:

  • screenshot — Menangkap keadaan layar saat ini
  • mouse_move — Memindahkan kursor ke koordinat tertentu
  • left_click / right_click / double_click — Mengklik di posisi kursor saat ini
  • left_click_drag — Mengklik dan menyeret ke posisi target
  • type — Mengetik string teks
  • key — Menekan tombol atau kombinasi tombol tertentu (misalnya, Return, ctrl+a)
  • scroll — Menggulir ke atas atau ke bawah di posisi kursor saat ini

Loop Aksi

Berikut implementasi lengkap dari loop inti computer use:

import anthropic
import base64
import subprocess
import time


client = anthropic.Anthropic()


def capture_screenshot() -> str:
    """Capture screen and return base64-encoded PNG."""
    # Using scrot for X11; adapt for your environment
    subprocess.run(["scrot", "/tmp/screenshot.png"], check=True)
    with open("/tmp/screenshot.png", "rb") as f:
        return base64.standard_b64encode(f.read()).decode("utf-8")


def execute_action(action: dict):
    """Execute a computer use action using xdotool."""
    action_type = action.get("action")


    if action_type == "screenshot":
        return  # Screenshot will be taken in the main loop


    elif action_type == "mouse_move":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])


    elif action_type == "left_click":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        subprocess.run(["xdotool", "click", "1"])


    elif action_type == "type":
        text = action["text"]
        subprocess.run(["xdotool", "type", "--clearmodifiers", text])


    elif action_type == "key":
        key = action["key"]
        subprocess.run(["xdotool", "key", key])


    elif action_type == "scroll":
        x, y = action["coordinate"]
        direction = action["direction"]
        amount = action["amount"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        button = "5" if direction == "down" else "4"
        for _ in range(amount):
            subprocess.run(["xdotool", "click", button])


    time.sleep(0.5)  # Brief pause after each action


def run_computer_use_agent(task: str, max_steps: int = 50):
    """Run a computer use agent loop."""
    messages = [{"role": "user", "content": task}]


    for step in range(max_steps):
        # Capture current screen state
        screenshot_b64 = capture_screenshot()


        # Add screenshot to the conversation
        if step > 0:
            messages.append({
                "role": "user",
                "content": [{
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/png",
                        "data": screenshot_b64,
                    },
                }],
            })


        # Call Claude with computer use tool
        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=4096,
            tools=[computer_tool],
            messages=messages,
        )


        # Process response
        messages.append({"role": "assistant", "content": response.content})


        # Check if the agent is done
        if response.stop_reason == "end_turn":
            # Extract final text response
            for block in response.content:
                if hasattr(block, "text"):
                    return block.text
            return "Task completed."


        # Execute tool calls
        tool_results = []
        for block in response.content:
            if block.type == "tool_use":
                print(f"Step {step}: {block.input.get('action')} "
                      f"{block.input.get('coordinate', '')}")
                execute_action(block.input)
                tool_results.append({
                    "type": "tool_result",
                    "tool_use_id": block.id,
                    "content": "Action executed successfully.",
                })


        messages.append({"role": "user", "content": tool_results})


    return "Max steps reached."

Resolusi dan Sistem Koordinat

Claude memetakan konten visual ke koordinat piksel x,y berdasarkan dimensi tangkapan layar yang Anda tentukan dalam definisi tool. Beberapa detail penting:

  • Sesuaikan resolusi tampilan Anda dengan display_width_px dan display_height_px dalam definisi tool. Ketidakcocokan menyebabkan klik mendarat di tempat yang salah.
  • Resolusi lebih rendah lebih baik. Tangkapan layar 1280×800 memberikan Claude detail yang cukup untuk membaca teks dan mengidentifikasi elemen UI sambil menjaga biaya token tetap terkendali. Jangan kirim tangkapan layar 4K.
  • Koordinat bersifat absolut — (0, 0) adalah sudut kiri atas layar.

Pola Navigasi yang Andal

Situs web dunia nyata itu berantakan. Halaman dimuat secara asinkron, popup muncul tak terduga, dan konten dinamis mengubah tata letak di tengah interaksi. Agen otomasi yang andal membutuhkan pola untuk menangani semua ini.

Kesalahan paling umum dalam otomasi web — tradisional maupun visual — adalah bertindak sebelum halaman siap. Jangan gunakan panggilan time.sleep() yang tetap. Sebagai gantinya, verifikasi keadaan halaman secara visual:

def wait_for_page_load(
    client: anthropic.Anthropic,
    expected_content: str,
    max_retries: int = 5,
    delay: float = 2.0,
) -> bool:
    """Wait for a page to load by checking for expected visual content."""
    for attempt in range(max_retries):
        screenshot_b64 = capture_screenshot()


        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=256,
            messages=[{
                "role": "user",
                "content": [
                    {
                        "type": "image",
                        "source": {
                            "type": "base64",
                            "media_type": "image/png",
                            "data": screenshot_b64,
                        },
                    },
                    {
                        "type": "text",
                        "text": (
                            f"Is this page fully loaded and showing: "
                            f"'{expected_content}'? "
                            f"Reply with only 'yes' or 'no'."
                        ),
                    },
                ],
            }],
        )


        answer = response.content[0].text.strip().lower()
        if "yes" in answer:
            return True


        print(f"Page not ready (attempt {attempt + 1}/{max_retries}). Waiting...")
        time.sleep(delay)


    return False

Penanganan Popup

Banner cookie, dialog notifikasi, dan widget chat adalah musuh otomasi web. Agen berbasis penglihatan menanganinya secara alami:

def dismiss_popups(client: anthropic.Anthropic) -> bool:
    """Check for and dismiss any popup overlays."""
    screenshot_b64 = capture_screenshot()


    response = client.messages.create(
        model="claude-sonnet-4-20250514",
        max_tokens=

Artikel Terkait