Stagehand İncelemesi: En İyi Yapay Zeka Tarayıcı Otomasyon Çerçevesi mi?

Tarayıcı otomasyonu uzun süredir modern yazılım geliştirme, test etme ve veri çıkarma alanlarının temel taşlarından biri olmuştur. Yıllardır Selenium, Puppeteer ve daha yakın zamanda Playwright gibi framework'ler bu alana hakim olmuştur. Bu araçlar tarayıcı eylemleri üzerinde ayrıntılı kontrol sunar, ancak öğrenme eğrileri diktir ve önemli bir bakım yükü getirirler. Scriptler genellikle kırılgandır, bir web sitesinin kullanıcı arayüzündeki en ufak bir değişiklikle bozulurlar. Spektrumun diğer ucunda ise, yeni bir yapay zeka tabanlı ajan dalgası, doğal dil kullanarak karmaşık görevleri otomatikleştirmeyi vaat ediyor, ancak genellikle güvenilirlik, öngörülebilirlik ve kontrol pahasına.

Karşınızda Stagehand, kendini "Yapay Zeka Tarayıcı Otomasyon Framework'ü" olarak tanımlayan bir framework. Playwright gibi sahada denenmiş araçları değiştirmeyi değil, onları güçlendirmeyi hedefliyor. Playwright üzerine inşa edilen Stagehand, güçlü bir yapay zeka katmanı ekleyerek geliştiricilerin geleneksel, kod tabanlı otomasyonu üst düzey, doğal dil talimatlarıyla harmanlamasına olanak tanıyor.

💡

Güzel API Dokümantasyonu oluşturan harika bir API Test aracı mı arıyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılıyor ve Postman'ı çok daha uygun bir fiyata değiştiriyor!

button

Peki gerçekten ne kadar iyi? Kodun kesinliği ile yapay zekanın esnekliği arasında doğru dengeyi kuruyor mu? Bu derinlemesine inceleme ve eğitim, Stagehand'in temel kavramlarını keşfedecek, pratik örnekler üzerinden ilerleyecek ve tarayıcı otomasyonunun hızla gelişen dünyasındaki konumunu değerlendirecektir.

Neden Stagehand? Eski Yöntemlerin Sorunu

"Nasıl" kısmına dalmadan önce, "neden" kısmını anlamak çok önemlidir. Geleneksel tarayıcı otomasyonu temelde tarayıcıya tam olarak ne yapacağını söylemekle ilgilidir. Playwright'ta tipik bir script şöyle görünebilir:

// Find an element by its CSS selector and click it
await page.locator('button[data-testid="login-button"]').click();

// Find an input field and type into it
await page.locator('input[name="username"]').fill('my-user');

Bu yaklaşım hassas ve güvenilirdir... ta ki olmayana kadar. Bir geliştirici data-testid'i değiştirdiği veya formun HTML yapısını yeniden düzenlediği anda script bozulur. Bu seçicileri büyük bir test paketinde veya karmaşık bir web kazıma projesinde sürdürmek sıkıcı ve nankör bir iş haline gelir.

Stagehand ekibi tarafından sağlanan demoyu inceleyin:

Stagehand demosunun, doğal dil talimatının bir web sayfasındaki belirli bir öğe ve eylemle nasıl eşleştirildiğini gösteren bir ekran görüntüsü.

Üst düzey yapay zeka ajanları, uygulama ayrıntılarını soyutlayarak bunu çözmeye çalışır. Ajana basitçe "Kimlik bilgilerimle giriş yap" dersiniz ve o gerekli adımları çözer. Bu kulağa sihirli gelse de, üretim ortamlarında öngörülemez olabilir. Ajan, tanıdık olmayan bir kullanıcı arayüzünde başarısız olabilir, verimsiz bir yol izleyebilir veya talimatı yanlış anlayabilir, bu da tutarsız sonuçlara yol açar.

Stagehand orta bir yol sunmayı hedefliyor. Bazen tam olarak ne yapmak istediğinizi bildiğinizi (örneğin, await page.goto('https://github.com')) ve bazen de "nasıl" kısmını bir yapay zekaya yüklemek istediğinizi (örneğin, await page.act('stagehand deposuna tıkla')) kabul ediyor. Bu hibrit yaklaşım Stagehand'in temel değer önerisidir.

Stagehand'in Temel Direkleri

Stagehand, Playwright'ın Page nesnesini üç ana yöntemle geliştirir: act, extract ve observe. Ayrıca daha karmaşık, çok adımlı görevleri ele almak için güçlü bir agent tanıtır.

`act`: Doğal Dil ile Eylemleri Gerçekleştirme

act yöntemi, Stagehand'in etkileşimli yeteneklerinin kalbidir. Basit bir İngilizce talimat alır ve sayfada ilgili eylemi gerçekleştirir.

// Kırılgan seçiciler yerine...
await page.act("Click the sign in button");
await page.act("Type 'hello world' into the search input");

Arka planda, bir yapay zeka modeli web sayfasının mevcut durumunu (DOM) analiz eder, en ilgili etkileşimli öğeleri (düğmeler, bağlantılar, giriş alanları) tanımlar ve talimatı tıklama veya tuşa basma gibi belirli bir eylemle eşleştirir. Bu, scriptleri küçük kullanıcı arayüzü değişikliklerine karşı daha dirençli hale getirir. Bir insan "giriş yap düğmesini" tanımlayabildiği sürece, Stagehand de muhtemelen yapabilir, altta yatan kodu değişmiş olsa bile.

act'i etkili kullanmanın anahtarı, talimatları atomik ve spesifik tutmaktır. "Bana bir pizza sipariş et" gibi bir talimat act için çok üst düzeydir. Bunun yerine, bunu bir dizi atomik adıma ayırırsınız: "Pepperoni pizzaya tıkla," "Büyük boyutu seç," "Sepete ekle" ve "Ödeme işlemine devam et."

`observe` ve Önbellekleme: Yapay Zekaya Öngörülebilirlik Katma

Yapay zeka kullanmanın yaygın bir endişesi öngörülemezliktir. Model her seferinde doğru öğeyi seçecek mi? Stagehand bunu observe yöntemiyle ele alıyor. observe bir eylem gerçekleştirmez; talimatla eşleşen *potansiyel* eylemlerin bir listesini döndürür.

const [action] = await page.observe("Click the sign in button");

Döndürülen action nesnesi, Stagehand'in gerçekleştirmeyi amaçladığı işlemin serileştirilebilir bir tanımlayıcısıdır. Onu inceleyebilir, loglayabilir ve en önemlisi, doğrudan act'e geri besleyebilirsiniz:

const [action] = await page.observe("Click the sign in button");
await page.act(action);

Bu iki adımlı işlem güçlü bir "önizleme" özelliği sunar. Ancak gerçek gücü önbellemede yatar. Tekrarlayan görevler için, bir eylemi bir kez observe edebilir, sonucu kaydedebilir ve sonraki çalıştırmalarda yeniden kullanabilirsiniz.

const instruction = "Click the sign in button";
let cachedAction = await getFromCache(instruction);

if (cachedAction) {
  await page.act(cachedAction);
} else {
  const [observedAction] = await page.observe(instruction);
  await saveToCache(instruction, observedAction);
  await page.act(observedAction);
}

Bu önbellekleme stratejisi çeşitli faydalar sunar:

Güvenilirlik: Her seferinde tam olarak aynı eylemin gerçekleştirilmesini sağlayarak yapay zeka modelinin değişkenliğini ortadan kaldırır.
Hız: Bir yapay zeka çağrısı ihtiyacını atlayarak otomasyonu önemli ölçüde hızlandırır.
Maliyet: Altta yatan dil modeline yapılan API çağrılarından tasarruf sağlayarak operasyonel maliyetleri düşürür.

`extract`: Akıllı Veri Çıkarma

Geleneksel araçlarla bir web sayfasından veri kazıma, veriyi belirlemek için CSS veya XPath seçicileri yazmayı içerir. Bu, kullanıcı arayüzüne kırılgan bir bağ kurmanın başka bir şeklidir. Stagehand'in extract yöntemi, ne çıkarmak istediğinizi doğal dilde belirtmenize olanak tanıyarak bu süreci devrim niteliğinde değiştirir.

Çıktının doğru yapılandırıldığından emin olmak için isteğe bağlı olarak bir Zod şeması sağlayabilirsiniz. Zod, popüler bir TypeScript öncelikli şema tanımlama ve doğrulama kütüphanesidir ve buradaki entegrasyonu oyunun kurallarını değiştiriyor.

Bir GitHub çekme isteği sayfasında olduğunuzu ve yazarın kullanıcı adını ve PR başlığını almak istediğinizi hayal edin. extract ile bu kadar basit:

import { z } from "zod";

// ... bir async fonksiyonun içinde
const { author, title } = await page.extract({
  instruction: "extract the author and title of the PR",
  schema: z.object({
    author: z.string().describe("The username of the PR author"),
    title: z.string().describe("The title of the PR"),
  }),
});

console.log(`PR: "${title}" - ${author}`);

Stagehand'in yapay zekası sayfayı okur, bağlamı anlar ve istenen verilerle Zod şemasını doldurur. Bu, herhangi bir zamanda değişebilecek #pull_request_header .author gibi seçicilere güvenmekten çok daha sağlamdır. Uygun Zod şemasını tanımlayarak, nesne dizileri dahil olmak üzere karmaşık iç içe geçmiş verileri bile çıkarabilirsiniz.

`agent`: Otonom, Çok Adımlı Görevler İçin

act tek, atomik eylemler için iken, agent daha büyük, daha karmaşık hedefleri düzenlemek içindir. Ajan, üst düzey bir amacı alıp kendi başına bir dizi act ve extract çağrısına bölebilir.

// Bir web sitesine git
await stagehand.page.goto("https://www.google.com");

const agent = stagehand.agent({
  provider: "openai",
  model: "gpt-4o", // Veya bir Anthropic modeli
});

// Ajanı çalıştır
await agent.execute(
  "Find the official website for the Stagehand framework and tell me who developed it."
);

Ajan, otomasyon scriptleriniz için "döngüde insan" deneyimi sunar. Keşif görevleri veya her adımı önceden tanımlamanın pratik olmayacağı karmaşık, tanıdık olmayan web sitelerinde gezinmek için idealdir. Hem OpenAI hem de Anthropic'in üst düzey modellerini destekleyerek, geliştiricilere minimum kurulumla son teknoloji yapay zeka yeteneklerine erişim sağlar.

Başlarken: Stagehand Ekibini Kullanmak İçin Mini Bir Eğitim

Burada bir Stagehand projesi oluşturmak için Anirudh'un create-browser-app demosunu izleyin:

Bir Stagehand projesi başlatmanın en hızlı yolu, komut satırı araçlarını kullanmaktır.

npx create-browser-app my-stagehand-project
cd my-stagehand-project

Bu, gerekli tüm bağımlılıkları, yapılandırma dosyalarını ve örnek bir scripti içeren yeni bir proje oluşturur. Bir LLM sağlayıcısı (OpenAI veya Anthropic gibi) için API anahtarlarınızı ve isteğe bağlı olarak bir Browserbase anahtarını (bulut tabanlı tarayıcı yürütme için) .env dosyasına eklemeniz gerekecektir.

Temel bir script şöyle görünür:

import { Stagehand } from "@browserbasehq/stagehand";
import StagehandConfig from "./stagehand.config"; // Projenizin yapılandırması
import { z } from "zod";

async function main() {
  // 1. Stagehand'i Başlatın
  const stagehand = new Stagehand(StagehandConfig);
  await stagehand.init();

  const page = stagehand.page;

  try {
    // 2. Bir sayfaya gidin
    await page.goto("https://github.com/trending");

    // 3. Eylemleri Gerçekleştirin
    await page.act("Click on the first repository in the list");

    // 4. Veri Çıkarın
    const { description } = await page.extract({
      instruction: "Extract the repository description",
      schema: z.object({
        description: z.string(),
      }),
    });

    console.log("Depo açıklaması:", description);

  } finally {
    // 5. Temizleyin
    await stagehand.close();
  }
}

main();

Bu basit örnek, tüm yaşam döngüsünü gösterir: başlatma, gezinme, eylem, çıkarma ve temizleme. Temiz, okunabilir ve GitHub trendler sayfasındaki kullanıcı arayüzü değişikliklerine karşı dikkat çekici derecede dirençlidir.

Karar: Ne Kadar İyi?

Özelliklerine ve felsefesine derinlemesine daldıktan sonra, Stagehand'in sadece başka bir otomasyon aracı olmadığı açıktır. Geleneksel, kod ağırlıklı otomasyon ile yapay zeka ajanlarının cesur yeni dünyası arasındaki boşluğu başarıyla kapatan düşünceli ve güçlü bir framework'tür.

İyilikleri:

Geliştirici Deneyimi: Playwright üzerine inşa edilerek birçok geliştiriciye tanıdık bir API sunar. act ve extract eklenmesi, otomasyon scriptleri yazmayı daha hızlı ve daha sezgisel hale getirir.
Dayanıklılık: Scriptler çok daha az kırılgandır ve kullanıcı arayüzü değişikliklerine daha dirençlidir, bu da bakım yükünü önemli ölçüde azaltır.
Kontrol ve Öngörülebilirlik: observe ve önbellekleme mekanizması, yapay zekanın öngörülemezlik sorununa parlak bir çözümdür ve üretim kullanım senaryoları için uygun hale getirir.
Güç ve Esneklik: Atomik act çağrıları, akıllı extract şemaları ve üst düzey agent'ın birleşimi, hemen hemen her tarayıcı otomasyon görevi için uygun bir araç yelpazesi sunar.
Yapılandırılmış Veri Çıkarma: extract için Zod ile entegrasyon, veri kazımayı her zamankinden daha kolay ve güvenilir hale getiren öne çıkan bir özelliktir.

Potansiyel Dezavantajları:

LLM'lere Bağımlılık: Otomasyonun kalitesi, altta yatan yapay zeka modellerinin performansına bağlıdır. Günümüz modelleri inanılmaz derecede yetenekli olsa da, mükemmel değiller.
Maliyet: Güçlü modellere yapılan API çağrıları ücretsiz değildir. Önbellekleme stratejisi bunu hafifletmeye yardımcı olsa da, yüksek hacimli kullanım maliyetlere neden olabilir.
Öğrenme Eğrisi: Birçok görev için saf Playwright'tan daha basit olsa da, geliştiricilerin hala act, observe, extract'in temel kavramlarını ve her birini ne zaman kullanacaklarını anlamaları gerekir. "Atomik eylemler"e karşı "üst düzey hedefler" açısından düşünmek yeni bir beceridir.

Sonuç

Peki, Stagehand ne kadar iyi? Olağanüstü iyi. Sihirli bir değnek değil, ancak tarayıcı otomasyonunda önemli bir ilerlemeyi temsil ediyor. Geliştiricilere daha sağlam, daha akıllı ve daha yetenekli otomasyonları daha az çabayla oluşturma gücü veriyor. Kesinliğe ihtiyacınız olduğunda düşük seviyeli kod yazma ve esnekliğe ihtiyacınız olduğunda üst düzey yapay zeka kullanma seçeneği sunarak Stagehand, modern geliştirici için pragmatik ve güçlü bir araç seti sağlıyor.

Seçicileri güncellemekten yorulmuş bir QA mühendisiyseniz, web'i kazımanın daha iyi bir yolunu arayan bir veri bilimcisiyseniz veya karmaşık tarayıcı tabanlı iş akışları oluşturan bir geliştiriciyseniz, Stagehand sadece göz atmaya değer değil; yeni favori aracınız olabilir. Vaadini başarıyla yerine getirerek, "Yapay Zeka Tarayıcı Otomasyon Framework'ü" unvanı için önde gelen bir aday haline geliyor.

💡