Web Otomasyon Ajanları: Claude ve Computer Use ile Tarayıcı Kontrolü

Şirketinizin API’si olmayan bir tedarikçi portalından veriye ihtiyacı var. Dinamik içerikli, çok adımlı formları olan ve birkaç ayda bir düzeni değişen bir web uygulaması. Selenium betiğiniz her CSS güncellemesinde bozuluyor. Onu eski kod gibi bakım yaparak sürdürüyorsunuz — kırılgan, pahalı ve kimse dokunmak istemiyor.

Görsel tabanlı bir ajan CSS seçicilerle ilgilenmez. Sayfayı görür, “Ara” düğmesini görsel olarak bulur, tıklar, sonuç tablosunu okur ve veriyi çıkarır. Düzen değiştiğinde ajan uyum sağlar çünkü sayfayı bir insan gibi okuyor — DOM’u ayrıştırmıyor.

Bu makale, Claude’un bilgisayar kullanma yeteneklerini kullanarak web otomasyon ajanları oluşturmayı öğretir. Görsel otomasyonun temel mekaniklerini, güvenilir navigasyon kalıplarını, veri çıkarma tekniklerini, form doldurma iş akışlarını ve hata kurtarma stratejilerini öğreneceksiniz. Sonunda, herhangi bir web arayüzüyle etkileşim kuran ajanlar oluşturmak için gereken kalıplara sahip olacaksınız — basit sayfa okumalarından karmaşık çok adımlı iş akışlarına kadar.

Görsel ve Geleneksel Otomasyon Karşılaştırması

Görsel tabanlı bir ajan oluşturmadan önce, bunun ne zaman mantıklı olduğunu — ve ne zaman olmadığını — anlamanız gerekir. Selenium ve Playwright gibi geleneksel otomasyon araçları yok olmuyor. Hızlılar, deterministikler ve iyi anlaşılmışlardır. Asıl soru, her yaklaşımın nerede üstün olduğu ve nerede yetersiz kaldığıdır.

Geleneksel Otomasyon (Selenium/Playwright)

Geleneksel tarayıcı otomasyonu DOM ile etkileşim kurarak çalışır. CSS seçicileri veya XPath ifadeleri kullanarak öğeleri bulursunuz, ardından bunlar üzerinde programatik olarak işlemler gerçekleştirirsiniz:

# Geleneksel yaklaşım — hızlı ama kırılgan
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()

Bu hızlıdır. Deterministiktir. Ve birisi search-box-v3’ü search-box-v4 olarak yeniden adlandırdığında veya form düzenini yeniden yapılandırdığında bozulur. Sonunda sitenin iç yapısını yansıtan bir seçici haritası sürdürmeye başlarsınız — kontrol etmediğiniz bir yapı.

Geleneksel otomasyon ayrıca yalnızca görsel içeriği işleyemez. İhtiyacınız olan veri bir <canvas> öğesinde render edilmişse, bir görüntüye gömülüyse veya tarayıcı içinde PDF olarak görüntüleniyorsa, DOM seçicileri ona ulaşamaz.

Görsel Tabanlı Otomasyon (Computer Use)

Görsel tabanlı otomasyon bir insanın çalışma şekliyle çalışır. Ajan bir ekran görüntüsü alır, ihtiyaç duyduğu öğeleri görsel olarak tanımlar ve belirli koordinatlarda fare/klavye eylemleri gerçekleştirir:

# Görsel tabanlı yaklaşım — dayanıklı ama daha yavaş
# Ajan sayfayı görür, arama kutusunu görsel olarak bulur ve içine yazar
# Seçici gerekmez — düzen değişikliklerine otomatik olarak uyum sağlar

Ödünleşim: daha yavaştır (her eylem bir görüntü içeren API çağrısı gerektirir), daha pahalıdır (ekran görüntüleri için token’lar) ve deterministik değildir (ajan bir ekran görüntüsünü çalıştırmalar arasında farklı yorumlayabilir). Ancak düzen değişikliklerine karşı dayanıklıdır, herhangi bir görsel arayüzde çalışır ve sayfa içeriğini anlamsal olarak anlayabilir.

Hibrit Yaklaşım

En pratik strateji her ikisini birleştirir:

• Geleneksel otomasyon kullanın — kararlı, iyi yapılandırılmış sayfalarda, arayüzü kontrol ettiğiniz veya nadiren değiştiği durumlarda.
• Görsel tabanlı otomasyon kullanın — dinamik sayfalar, tanımadığınız arayüzler, görsel içerik veya betik bakımını haketmeyen tek seferlik görevler için.
• Görsel yöntemi yedek olarak kullanın — önce bir seçici deneyin; başarısız olursa görsel tanımlamaya geri dönün.

Görsel Yöntemi Ne Zaman Seçmeli

Görsel tabanlı otomasyon şu durumlarda doğru seçimdir:

• API mevcut değilse ve web arayüzü tek seçeneğinizse
• Sayfa düzeni sık değişiyorsa ve seçici bakımı çok pahalıysa
• İçerik görsel ise — grafikler, görüntüler, canvas öğeleri, gömülü PDF’ler
• Çok adımlı iş akışları bağlam gerektiriyorsa — bir sonraki eyleme karar vermek için ekrandaki içeriği anlamak
• Tek seferlik otomasyonlar — bakımlı bir Selenium betiğinin mühendislik maliyetini haketmiyorsa
• Tanımadığınız arayüzler — seçicileri eşlemek yerine görevi doğal dilde tanımlayabildiğiniz durumlar

Claude Computer Use Temelleri

Claude’un bilgisayar kullanma yeteneği, modelin bir bilgisayar ekranıyla bir insanın yapacağı şekilde etkileşim kurmasına olanak tanır — ekran görüntülerine bakarak ve fare ile klavye eylemleri vererek. Güvenilir ajanlar oluşturmadan önce mekanikleri anlamak şarttır.

Nasıl Çalışır

Bilgisayar kullanma döngüsü basittir:

1. Mevcut ekranın (veya tarayıcı penceresinin) bir ekran görüntüsünü yakalayın
2. Ekran görüntüsünü bir görev açıklamasıyla birlikte Claude’a gönderin
3. Bir araç çağrısı alın — Claude hangi eylemi gerçekleştireceğinizi söyler (tıklama, yazma, kaydırma)
4. Eylemi tarayıcıda çalıştırın
5. Yeni bir ekran görüntüsü yakalayın
6. Görev tamamlanana veya ajan bittiğini bildirene kadar tekrarlayın

Claude hiçbir zaman doğrudan tarayıcıyı kontrol etmez. Kodunuz aracı olarak çalışır — modelden talimatları alır ve bunları gerçek ortamda yürütür.

Araç Tanımları

Bilgisayar kullanımı, mevcut eylemleri tanımlayan belirli bir araç tanımına — computer_20241022 — dayanır:

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

Mevcut eylemler şunlardır:

• screenshot — Mevcut ekran durumunu yakala
• mouse_move — İmleci belirli koordinatlara taşı
• left_click / right_click / double_click — Mevcut imleç konumunda tıkla
• left_click_drag — Tıkla ve hedef konuma sürükle
• type — Bir metin dizesi yaz
• key — Belirli bir tuşa veya tuş kombinasyonuna bas (örn. Return, ctrl+a)
• scroll — Mevcut imleç konumunda yukarı veya aşağı kaydır

Eylem Döngüsü

İşte temel bilgisayar kullanma döngüsünün eksiksiz bir uygulaması:

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."

Çözünürlük ve Koordinat Sistemi

Claude, araç tanımında belirttiğiniz ekran görüntüsü boyutlarına göre görsel içeriği x,y piksel koordinatlarına eşler. Birkaç kritik detay:

• Ekran çözünürlüğünüzü araç tanımındaki display_width_px ve display_height_px ile eşleştirin. Uyumsuzluklar tıklamaların yanlış yerlere düşmesine neden olur.
• Düşük çözünürlükler daha iyidir. 1280×800 ekran görüntüsü, Claude’a metni okuyacak ve UI öğelerini tanıyacak kadar detay verir ve token maliyetlerini yönetilebilir tutar. 4K ekran görüntüleri göndermeyin.
• Koordinatlar mutlaktır — (0, 0) ekranın sol üst köşesidir.

Güvenilir Navigasyon Kalıpları

Gerçek dünya web siteleri karmaşıktır. Sayfalar asenkron olarak yüklenir, açılır pencereler öngörülemeyen şekilde belirir ve dinamik içerik etkileşim sırasında düzeni değiştirir. Güvenilir bir otomasyon ajanının tüm bunları ele almak için kalıplara ihtiyacı vardır.

Yükleme Bekleme

Web otomasyonunda — geleneksel veya görsel — en yaygın hata, sayfa hazır olmadan harekete geçmektir. Sabit time.sleep() çağrıları kullanmayın. Bunun yerine, sayfa durumunu görsel olarak doğrulayın:

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

Açılır Pencere Yönetimi

Çerez bildirimleri, bildirim diyalogları ve sohbet widget’ları web otomasyonunun belasıdır. Görsel tabanlı bir ajan bunları doğal olarak ele alır:

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=

İlgili Makaleler

• Ajan Hata Kurtarma: Üretim Güvenilirliği için 5 Desen
• Ajan Yanıtlarını Akışla İletme: Çok Adımlı İş Akışları İçin Gerçek Zamanlı Çıktı
• Araç Kullanım Desenleri: Güvenilir Ajan-Araç Arayüzleri Oluşturma
• Ajantik Geliştirmeye Giriş