Stagehand Review: Framework Otomatisasi Browser AI Terbaik?

Otomasi browser telah lama menjadi landasan pengembangan perangkat lunak modern, pengujian, dan ekstraksi data. Selama bertahun-tahun, kerangka kerja seperti Selenium, Puppeteer, dan yang terbaru, Playwright, telah mendominasi lanskap ini. Alat-alat ini menawarkan kontrol granular atas tindakan browser, tetapi memiliki kurva belajar yang curam dan beban pemeliharaan yang signifikan. Skrip seringkali rapuh, rusak bahkan dengan sedikit perubahan pada UI situs web. Di sisi lain, gelombang baru agen asli AI menjanjikan untuk mengotomatiskan tugas-tugas kompleks menggunakan bahasa alami, tetapi seringkali dengan mengorbankan keandalan, prediktabilitas, dan kontrol.

Hadir Stagehand, kerangka kerja yang memperkenalkan diri sebagai "Kerangka Kerja Otomasi Browser AI". Ini tidak bertujuan menggantikan alat yang sudah teruji seperti Playwright, tetapi untuk memperkuatnya. Dibangun di atas Playwright, Stagehand menyuntikkan lapisan AI yang kuat, memungkinkan pengembang untuk memadukan otomasi tradisional berbasis kode dengan instruksi bahasa alami tingkat tinggi.

💡

Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform Terintegrasi, All-in-One untuk Tim Pengembang Anda bekerja sama dengan produktivitas maksimum?

Apidog memenuhi semua permintaan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!

button

Tapi seberapa bagus sebenarnya? Apakah ini mencapai keseimbangan yang tepat antara presisi kode dan fleksibilitas AI? Ulasan mendalam dan tutorial ini akan mengeksplorasi konsep inti Stagehand, membahas contoh-contoh praktis, dan mengevaluasi posisinya dalam dunia otomasi browser yang berkembang pesat.

Mengapa Stagehand? Masalah dengan Cara Lama

Sebelum masuk ke "cara", penting untuk memahami "mengapa". Otomasi browser tradisional pada dasarnya adalah tentang memberi tahu browser persis apa yang harus dilakukan. Skrip tipikal mungkin terlihat seperti ini di Playwright:

// 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');

Pendekatan ini tepat dan dapat diandalkan... sampai tidak lagi. Saat seorang pengembang mengubah data-testid atau melakukan refaktor struktur HTML formulir, skrip akan rusak. Memelihara selector ini di seluruh rangkaian pengujian yang besar atau proyek web scraping yang kompleks menjadi pekerjaan yang membosankan dan tidak berterima kasih.

Lihat demo yang disediakan oleh tim Stagehand:

Agen AI tingkat tinggi mencoba mengatasi ini dengan mengabstraksi detail implementasi. Anda cukup memberi tahu agen, "Masuk dengan kredensial saya," dan ia akan mencari langkah-langkah yang diperlukan. Meskipun ini terdengar ajaib, ini bisa tidak terduga di lingkungan produksi. Agen mungkin gagal pada UI yang tidak dikenal, mengambil jalur yang tidak efisien, atau salah memahami instruksi, yang menyebabkan hasil yang tidak konsisten.

Stagehand bertujuan menawarkan jalan tengah. Ia mengakui bahwa terkadang Anda tahu persis apa yang ingin Anda lakukan (misalnya, await page.goto('https://github.com')), dan di lain waktu Anda ingin menyerahkan "cara" kepada AI (misalnya, await page.act('click on the stagehand repo')). Pendekatan hibrida ini adalah proposisi nilai inti Stagehand.

Pilar Inti Stagehand

Stagehand meningkatkan objek Page Playwright dengan tiga metode utama: act, extract, dan observe. Ini juga memperkenalkan agent yang kuat untuk menangani tugas-tugas yang lebih kompleks dan multi-langkah.

`act`: Mengeksekusi Tindakan dengan Bahasa Alami

Metode act adalah inti dari kemampuan interaktif Stagehand. Ini mengambil instruksi bahasa Inggris biasa dan mengeksekusi tindakan yang sesuai di halaman.

// Instead of brittle selectors...
await page.act("Click the sign in button");
await page.act("Type 'hello world' into the search input");

Di balik layar, model AI menganalisis keadaan halaman web saat ini (DOM), mengidentifikasi elemen interaktif yang paling relevan (tombol, tautan, bidang input), dan memetakan instruksi ke tindakan spesifik, seperti klik atau penekanan tombol. Ini membuat skrip lebih tangguh terhadap perubahan UI minor. Selama manusia dapat mengidentifikasi "tombol masuk", Stagehand kemungkinan juga bisa, bahkan jika kode dasarnya telah berubah.

Kunci menggunakan act secara efektif adalah menjaga instruksi tetap atomik dan spesifik. Instruksi seperti "Pesan pizza untuk saya" terlalu tingkat tinggi untuk act. Sebaliknya, Anda akan memecahnya menjadi serangkaian langkah atomik: "Klik pada pizza pepperoni," "Pilih ukuran 'besar'," "Tambahkan ke keranjang," dan "Lanjutkan ke pembayaran."

`observe` dan Caching: Menambahkan Prediktabilitas pada AI

Kekhawatiran umum dalam menggunakan AI adalah ketidakpastian. Akankah model memilih elemen yang tepat setiap saat? Stagehand mengatasi ini dengan metode observe. observe tidak mengeksekusi tindakan; ia mengembalikan daftar tindakan *potensial* yang cocok dengan instruksi.

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

Objek action yang dikembalikan adalah deskriptor serializable dari operasi yang ingin dilakukan Stagehand. Anda dapat memeriksanya, mencatatnya (log), dan yang terpenting, memasukkannya kembali langsung ke act:

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

Proses dua langkah ini menyediakan fitur "pratinjau" yang kuat. Namun kekuatan sebenarnya terletak pada caching. Untuk tugas berulang, Anda dapat observe sebuah tindakan sekali, menyimpan hasilnya, dan menggunakannya kembali dalam eksekusi berikutnya.

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);
}

Strategi caching ini menawarkan beberapa manfaat:

Keandalan: Ini memastikan tindakan yang persis sama dilakukan setiap saat, menghilangkan variabilitas model AI.
Kecepatan: Ini melewati kebutuhan panggilan AI, membuat otomasi secara signifikan lebih cepat.
Biaya: Ini menghemat panggilan API ke model bahasa dasar, mengurangi biaya operasional.

`extract`: Ekstraksi Data Cerdas

Mengambil data dari halaman web dengan alat tradisional melibatkan penulisan selector CSS atau XPath untuk menentukan data. Ini adalah bentuk lain dari kopling rapuh ke UI. Metode extract Stagehand merevolusi proses ini dengan memungkinkan Anda menentukan apa yang ingin Anda ekstrak dalam bahasa alami.

Anda dapat secara opsional menyediakan skema Zod untuk memastikan output terstruktur dengan benar. Zod adalah pustaka deklarasi dan validasi skema TypeScript-first yang populer, dan integrasinya di sini adalah pengubah permainan (game-changer).

Bayangkan Anda berada di halaman permintaan tarik (pull request) GitHub dan ingin mendapatkan nama pengguna penulis dan judul PR. Dengan extract, semudah ini:

import { z } from "zod";

// ... inside an async function
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}" by ${author}`);

AI Stagehand membaca halaman, memahami konteks, dan mengisi skema Zod dengan data yang diminta. Ini jauh lebih kuat daripada mengandalkan selector seperti #pull_request_header .author yang dapat berubah kapan saja. Anda bahkan dapat mengekstrak data bersarang yang kompleks, termasuk array objek, dengan mendefinisikan skema Zod yang sesuai.

`agent`: Untuk Tugas Otonom, Multi-Langkah

Sementara act adalah untuk tindakan tunggal, atomik, agent adalah untuk mengatur tujuan yang lebih besar dan kompleks. Agen dapat mengambil tujuan tingkat tinggi dan memecahnya menjadi urutan panggilan act dan extract dengan sendirinya.

// Navigate to a website
await stagehand.page.goto("https://www.google.com");

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

// Execute the agent
await agent.execute(
  "Find the official website for the Stagehand framework and tell me who developed it."
);

Agen menyediakan pengalaman "human-in-the-loop" untuk skrip otomasi Anda. Ini ideal untuk tugas eksplorasi atau menavigasi situs web yang kompleks dan tidak dikenal di mana mendefinisikan setiap langkah sebelumnya akan tidak praktis. Ini mendukung model-model terkemuka dari OpenAI dan Anthropic, memberi pengembang akses ke kemampuan AI canggih dengan pengaturan minimal.

Memulai: Tutorial Mini untuk Menggunakan Tim Stagehand

Tonton demo Anirudh membuat create-browser-app untuk membuat proyek Stagehand di sini:

Cara tercepat untuk memulai proyek Stagehand adalah dengan menggunakan alat baris perintah mereka.

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

Ini membuat kerangka proyek baru dengan semua dependensi yang diperlukan, file konfigurasi, dan skrip contoh. Anda perlu menambahkan kunci API Anda untuk penyedia LLM (seperti OpenAI atau Anthropic) dan secara opsional kunci Browserbase (untuk eksekusi browser berbasis cloud) ke file .env.

Skrip dasar terlihat seperti ini:

import { Stagehand } from "@browserbasehq/stagehand";
import StagehandConfig from "./stagehand.config"; // Your project's config
import { z } from "zod";

async function main() {
  // 1. Initialize Stagehand
  const stagehand = new Stagehand(StagehandConfig);
  await stagehand.init();

  const page = stagehand.page;

  try {
    // 2. Navigate to a page
    await page.goto("https://github.com/trending");

    // 3. Perform actions
    await page.act("Click on the first repository in the list");

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

    console.log("Repository description:", description);

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

main();

Contoh sederhana ini menunjukkan seluruh siklus hidup: inisialisasi, navigasi, tindakan, ekstraksi, dan pembersihan. Ini bersih, mudah dibaca, dan sangat tangguh terhadap perubahan UI di halaman tren GitHub.

Putusan: Seberapa Bagus Ini?

Setelah menyelami fitur dan filosofinya, jelas bahwa Stagehand lebih dari sekadar alat otomasi lainnya. Ini adalah kerangka kerja yang bijaksana dan kuat yang berhasil menjembatani kesenjangan antara otomasi tradisional yang berat kode dan dunia baru agen AI yang berani.

Yang Baik:

Pengalaman Pengembang: Dengan dibangun di atas Playwright, ia menawarkan API yang familiar bagi banyak pengembang. Penambahan act dan extract membuat penulisan skrip otomasi lebih cepat dan lebih intuitif.
Ketangguhan: Skrip jauh lebih tidak rapuh dan lebih tahan terhadap perubahan UI, secara drastis mengurangi beban pemeliharaan.
Kontrol & Prediktabilitas: Mekanisme observe dan caching adalah solusi brilian untuk masalah ketidakpastian AI, membuatnya layak untuk kasus penggunaan produksi.
Kekuatan & Fleksibilitas: Kombinasi panggilan act atomik, skema extract cerdas, dan agent tingkat tinggi menyediakan spektrum alat yang cocok untuk hampir semua tugas otomasi browser.
Ekstraksi Data Terstruktur: Integrasi dengan Zod untuk extract adalah fitur unggulan, membuat pengambilan data lebih mudah dan lebih andal dari sebelumnya.

Potensi Kekurangan:

Ketergantungan pada LLM: Kualitas otomasi terkait dengan kinerja model AI dasar. Meskipun model saat ini sangat mampu, mereka tidak sempurna.
Biaya: Panggilan API ke model yang kuat tidak gratis. Meskipun strategi caching membantu mengurangi ini, penggunaan volume tinggi dapat menimbulkan biaya.
Kurva Belajar: Meskipun lebih sederhana daripada Playwright murni untuk banyak tugas, pengembang masih perlu memahami konsep inti act, observe, extract, dan kapan menggunakan masing-masing. Berpikir dalam hal "tindakan atomik" versus "tujuan tingkat tinggi" adalah keterampilan baru.

Kesimpulan

Jadi, seberapa bagus Stagehand? Ini sangat bagus. Ini bukan solusi ajaib, tetapi mewakili lompatan signifikan dalam otomasi browser. Ini memberdayakan pengembang untuk membangun otomasi yang lebih kuat, lebih cerdas, dan lebih mampu dengan lebih sedikit usaha. Dengan memberi Anda pilihan untuk menulis kode tingkat rendah saat Anda membutuhkan presisi dan menggunakan AI tingkat tinggi saat Anda membutuhkan fleksibilitas, Stagehand menyediakan toolkit yang pragmatis dan kuat untuk pengembang modern.

Jika Anda seorang insinyur QA yang lelah memperbarui selector, seorang ilmuwan data yang mencari cara yang lebih baik untuk mengambil data dari web, atau pengembang yang membangun alur kerja berbasis browser yang kompleks, Stagehand tidak hanya layak dilihat—ini mungkin saja menjadi alat favorit baru Anda. Ini berhasil memenuhi janjinya, menjadikannya pesaing utama untuk gelar "Kerangka Kerja Otomasi Browser AI".

💡