Web Otomasyonunda Yeni Dönem: Stagehand ile Kırılmayan, Yapay Zeka Tabanlı Tarayıcı Yönetimi

0:00

/0

1×

Web Otomasyonunda Yeni Dönem: Stagehand ile Kırılmayan, Yapay Zeka Tabanlı Tarayıcı Yönetimi

Bir gece yarısı telefonunuzun çaldığını ve en kritik web kazıma (web scraping) botunuzun çöktüğünü hayal edin. Nedeni mi? Hedef sitenin geliştirici ekibi, bir butonun class ismini .btn-primary-v2 yerine .btn-primary-v3 olarak değiştirmiş.

Geleneksel web otomasyonu dünyasında (Selenium, Puppeteer veya standart Playwright) bu hikaye oldukça tanıdıktır. Kırılgan CSS seçiciler (selectors), sürekli değişen DOM yapıları ve karmaşık XPath ifadeleri, geliştiricilerin vaktinin büyük bir kısmını kod yazmaktan çok otomasyon tamir etmeye harcamasına neden olur.

Ancak web otomasyonu kabusu sona eriyor. Stagehand, yapay zeka (LLM) gücünü arkasına alarak kırılgan CSS seçiciler yerine doğal dil komutlarıyla çalışan yeni nesil bir tarayıcı otomasyonu yaklaşımı sunuyor.

Geleneksel Web Otomasyonunun Temel Sorunu: "Kırılganlık"

Klasik web otomasyonu araçları deterministik çalışır. Yani siz araca kesin bir adres verirsiniz:

"Sayfadaki #main > div.content > button.submit-btn elemanını bul ve tıkla."

Bu yaklaşımın zayıf yönleri şunlardır:

• Dinamik Sınıf İsimleri: Modern JavaScript çatıları (React, Vue, Tailwind vb.) genellikle rastgele derlenmiş CSS sınıfları üretir (.style_x9a2b).
• A/B Testleri: Kullanıcının karşısına çıkan arayüz sürekli değişebilir.
• Bakım Maliyeti: Sitede yapılan ufak bir tasarım değişikliği tüm otomasyon senaryolarını çöp edebilir.

İşte tam bu noktada Stagehand, olaylara kod gözüyle değil, insan gözüyle bakan bir alternatif sunar.

Stagehand Nedir?

Stagehand, Playwright altyapısı üzerine inşa edilmiş, yapay zeka destekli (AI-first) bir web otomasyon ve veri kazıma kütüphanesidir. Stagehand, bir geliştirici gibi karmaşık DOM ağaçlarını analiz etmek yerine, bir insanın sayfayı nasıl gördüğünü anlayarak aksiyon alır.

Siz Stagehand'e bir CSS seçici vermek yerine, ne yapmak istediğinizi doğal dille (Prompt) söylersiniz. Yapay zeka, sayfa yapısını anlık olarak analiz eder, doğru elemanı bulur ve eylemi gerçekleştirir.

Geleneksel:  page.click('div.login-form > button[type="submit"]')
Stagehand:   page.act("Giriş yap butonuna tıkla")

Stagehand’in Üç Temel Sütunu: act, extract ve observe

Stagehand, karmaşık web süreçlerini yönetmek için kullanımı son derece basit üç temel fonksiyon sunar:

1. act() — Doğal Dilde Eylem Gerçekleştirme

Sayfada tıklama, form doldurma, kaydırma gibi aksiyonları gerçekleştirmek için kullanılır. Elemanın ID'si veya class'ı değişse bile, butonun üzerinde "Gönder" yazıyorsa veya görsel olarak bir "Gönder" butonuysa yapay zeka bunu bulur ve tıklar.

// E-posta alanını doldur ve formu gönder
await page.act("Arama kutusuna 'Yapay Zeka' yaz");
await page.act("Ara butonuna tıkla");

2. extract() — Yapılandırılmış (Structured) Veri Çıkarma

Web kazıma süreçlerindeki en büyük zorluklardan biri, HTML içinden veriyi ayıklamaktır (parsing). Stagehand, Zod şemalarını kullanarak web sayfasından tam olarak istediğiniz formatta veri çekmenizi sağlar.

import { z } from "zod";

const productData = await page.extract({
  instruction: "Sayfadaki ilk 3 ürünün adını ve fiyatını çıkar",
  schema: z.object({
    products: z.array(
      z.object({
        name: z.string(),
        price: z.string(),
      })
    ),
  }),
});

3. observe() — Sayfadaki Aksiyonları Keşfetme

Sayfada o anda hangi eylemlerin yapılabileceğini anlamak veya otomasyon adımlarını planlamak için kullanılır. Yapay zeka sayfayı inceler ve size gerçekleştirilebilecek olası eylemlerin bir listesini döner.

// Sayfada yapılabilecek eylemleri analiz et
const actions = await page.observe("Giriş yapma ile ilgili eylemleri bul");

Geleneksel Playwright vs. Stagehand

Gelin aradaki farkı somut bir kod örneği ile görelim. Bir e-ticaret sitesinden ürün fiyatı çekmek istediğimizi varsayalım:

Geleneksel Yöntem (Kırılmaya Açık)

// CSS seçiciler değiştiği an bu kod PATLAR!
await page.goto('https://example-shop.com');
await page.fill('input[name="search_query"]', 'Laptop');
await page.click('button.search-submit-v2');
await page.waitForSelector('.product-list-item');

const price = await page.$eval('.product-list-item .current-price', el => el.textContent);
console.log(price);

Stagehand Yaklaşımı (Resilient / Kırılmayan)

// Tasarım değişse bile yapay zeka hedefi anlar ve ÇALIŞIR.
await page.goto('https://example-shop.com');
await page.act("Arama kutusuna 'Laptop' yaz ve ara");

const data = await page.extract({
  instruction: "Listelenen ilk laptopun güncel fiyatını al",
  schema: z.object({ price: z.string() })
});

console.log(data.price);

Neden Stagehand Tercih Edilmeli?

1. Self-Healing (Kendi Kendini Onaran) Testler: Web sitenizin arayüzü değişse bile testleriniz çökmez. CI/CD süreçlerinizdeki "flaky" (kararsız) test problemlerini kökten çözer.
2. Işık Hızında Geliştirme Süreci: Dakikalarca Chrome DevTools açıp eleman incelemek (Inspect Element) yerine, ne istediğinizi yazıp geçersiniz.
3. Hibrit Yaklaşım: Stagehand, Playwright altyapısını kullandığı için tamamen esnektir. İhtiyaç duyduğunuzda standart Playwright kodlarına geçiş yapabilir, kritik performans gerektiren yerlerde yapay zekayı devre dışı bırakabilirsiniz.
4. Karmaşık Form Otomasyonları: Güvenlik doğrulama adımları, çok adımlı (multi-step) formlar veya karmaşık navigasyon süreçleri doğal dille saniyeler içinde otomatize edilebilir.

Sonuç: Web Otomasyonunun Geleceği

Yapay zeka sadece kod yazmamızı kolaylaştırmıyor; yazılım araçlarının çalışma biçimini de değiştiriyor. Stagehand, web otomasyonunda "Nasıl yapılacağını söyle" döneminden "Ne yapılacağını söyle" dönemine geçişin en somut örneğidir.

Eğer sürekli kırılan scraper'lardan, güncellenmeyen E2E testlerinden ve CSS seçici aramaktan yorulduysanız, Stagehand ve yapay zeka tabanlı tarayıcı yönetimini projelerinize dahil etmenin tam zamanı.

Siz de deneyin: Stagehand açık kaynaklı bir kütüphanedir. Kendi projelerinizde denemek için npm install @browserbasehq/stagehand komutuyla hemen başlayabilir, LLM'lerin gücünü tarayıcınıza taşıyabilirsiniz.