รีวิว Stagehand: เฟรมเวิร์ค AI Browser Automation ที่ดีที่สุด?

การทำงานอัตโนมัติของเบราว์เซอร์เป็นรากฐานสำคัญของการพัฒนาซอฟต์แวร์สมัยใหม่ การทดสอบ และการดึงข้อมูลมาอย่างยาวนาน เป็นเวลาหลายปีแล้วที่เฟรมเวิร์กอย่าง Selenium, Puppeteer และ Playwright ซึ่งเป็นเฟรมเวิร์กที่ใหม่กว่า ได้ครองตลาด เครื่องมือเหล่านี้ให้การควบคุมการทำงานของเบราว์เซอร์ได้อย่างละเอียด แต่มาพร้อมกับช่วงการเรียนรู้ที่สูงและภาระการบำรุงรักษาที่มาก สคริปต์มักเปราะบาง แตกหักได้ง่ายเมื่อมีการเปลี่ยนแปลงเล็กน้อยใน UI ของเว็บไซต์ อีกด้านหนึ่ง มีกระแสใหม่ของเอเจนต์ที่ใช้ AI โดยกำเนิด ซึ่งสัญญาว่าจะทำงานที่ซับซ้อนให้เป็นอัตโนมัติโดยใช้ภาษามนุษย์ แต่บ่อยครั้งต้องแลกมาด้วยความน่าเชื่อถือ ความคาดเดาได้ และการควบคุม

พบกับ Stagehand เฟรมเวิร์กที่เรียกตัวเองว่า "เฟรมเวิร์กการทำงานอัตโนมัติของเบราว์เซอร์ด้วย AI" ไม่ได้มีเป้าหมายเพื่อแทนที่เครื่องมือที่ผ่านการทดสอบมาอย่างโชกโชนอย่าง Playwright แต่เพื่อเสริมความสามารถให้กับเครื่องมือเหล่านั้น Stagehand สร้างขึ้นบน Playwright และเพิ่มเลเยอร์ AI ที่ทรงพลังเข้าไป ทำให้นักพัฒนาสามารถผสมผสานการทำงานอัตโนมัติแบบดั้งเดิมที่ใช้โค้ด เข้ากับคำสั่งระดับสูงที่ใช้ภาษามนุษย์ได้

💡

ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมซึ่งสร้างเอกสาร API ที่สวยงามหรือไม่?

ต้องการแพลตฟอร์มแบบครบวงจรสำหรับทีมพัฒนาของคุณเพื่อทำงานร่วมกันด้วยประสิทธิภาพสูงสุดหรือไม่?

Apidog ตอบสนองความต้องการทั้งหมดของคุณ และแทนที่ Postman ในราคาที่เข้าถึงได้มากกว่ามาก!

button

แต่จริงๆ แล้วมันดีแค่ไหน? มันสร้างสมดุลที่เหมาะสมระหว่างความแม่นยำของโค้ดและความยืดหยุ่นของ AI ได้หรือไม่? บทวิจารณ์และบทช่วยสอนเชิงลึกนี้จะสำรวจแนวคิดหลักของ Stagehand พาคุณไปดูตัวอย่างการใช้งานจริง และประเมินตำแหน่งของ Stagehand ในโลกของการทำงานอัตโนมัติของเบราว์เซอร์ที่พัฒนาไปอย่างรวดเร็ว

ทำไมต้อง Stagehand? ปัญหาของวิธีการแบบเก่า

ก่อนที่จะเจาะลึกถึง "วิธีการ" สิ่งสำคัญคือต้องเข้าใจ "เหตุผล" การทำงานอัตโนมัติของเบราว์เซอร์แบบดั้งเดิมนั้นเป็นเรื่องของการบอกเบราว์เซอร์ว่าต้องทำอะไร อย่างแม่นยำ สคริปต์ทั่วไปใน 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');

แนวทางนี้แม่นยำและเชื่อถือได้... จนกระทั่งมันไม่เป็นเช่นนั้น ทันทีที่นักพัฒนาเปลี่ยน data-testid หรือปรับโครงสร้าง HTML ของฟอร์ม สคริปต์ก็จะพัง การดูแลรักษาตัวเลือกเหล่านี้ในชุดทดสอบขนาดใหญ่หรือโปรเจกต์ web scraping ที่ซับซ้อนกลายเป็นงานที่น่าเบื่อและไม่เป็นที่ชื่นชม

ลองดูเดโมที่ทีม Stagehand จัดทำขึ้น:

เอเจนต์ AI ระดับสูงพยายามแก้ปัญหานี้โดยการซ่อนรายละเอียดการนำไปใช้ คุณเพียงแค่บอกเอเจนต์ว่า "เข้าสู่ระบบด้วยข้อมูลประจำตัวของฉัน" แล้วมันก็จะคิดหาวิธีการที่จำเป็น แม้ว่าสิ่งนี้จะฟังดูเหมือนเวทมนตร์ แต่ก็อาจคาดเดาไม่ได้ในสภาพแวดล้อมการทำงานจริง เอเจนต์อาจล้มเหลวบน UI ที่ไม่คุ้นเคย ใช้เส้นทางที่ไม่มีประสิทธิภาพ หรือเข้าใจคำสั่งผิด ทำให้ได้ผลลัพธ์ที่ไม่สอดคล้องกัน

Stagehand มีเป้าหมายที่จะนำเสนอทางสายกลาง มันตระหนักดีว่าบางครั้งคุณรู้ อย่างแม่นยำ ว่าคุณต้องการทำอะไร (เช่น await page.goto('https://github.com')) และบางครั้งคุณต้องการมอบหมาย "วิธีการ" ให้กับ AI (เช่น await page.act('click on the stagehand repo')) แนวทางไฮบริดนี้คือข้อเสนอคุณค่าหลักของ Stagehand

เสาหลักของ Stagehand

Stagehand เสริมความสามารถให้กับอ็อบเจกต์ Page ของ Playwright ด้วยสามเมธอดหลัก ได้แก่ act, extract และ observe นอกจากนี้ยังแนะนำ agent ที่ทรงพลังสำหรับจัดการงานที่ซับซ้อนและมีหลายขั้นตอนมากขึ้น

`act`: การดำเนินการด้วยภาษามนุษย์

เมธอด act เป็นหัวใจสำคัญของความสามารถในการโต้ตอบของ Stagehand มันรับคำสั่งภาษาอังกฤษธรรมดาๆ และดำเนินการที่เกี่ยวข้องบนหน้าเว็บ

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

เบื้องหลัง โมเดล AI จะวิเคราะห์สถานะปัจจุบันของหน้าเว็บ (DOM) ระบุองค์ประกอบที่โต้ตอบได้ที่เกี่ยวข้องที่สุด (ปุ่ม ลิงก์ ช่องป้อนข้อมูล) และแมปคำสั่งกับการดำเนินการเฉพาะ เช่น การคลิกหรือการกดปุ่ม สิ่งนี้ทำให้สคริปต์มีความยืดหยุ่นต่อการเปลี่ยนแปลง UI เล็กน้อย ตราบใดที่มนุษย์สามารถระบุ "ปุ่มเข้าสู่ระบบ" ได้ Stagehand ก็น่าจะทำได้เช่นกัน แม้ว่าโค้ดพื้นฐานจะเปลี่ยนไปแล้วก็ตาม

กุญแจสำคัญในการใช้ act อย่างมีประสิทธิภาพคือการทำให้คำสั่งเป็นแบบอะตอม (atomic) และเฉพาะเจาะจง คำสั่งเช่น "สั่งพิซซ่าให้ฉันหน่อย" นั้นสูงเกินไปสำหรับ act แทนที่จะเป็นเช่นนั้น คุณจะต้องแบ่งมันออกเป็นชุดของขั้นตอนย่อยๆ: "คลิกที่พิซซ่าเปปเปอโรนี", "เลือกขนาด 'ใหญ่'", "เพิ่มลงในรถเข็น" และ "ดำเนินการชำระเงิน"

`observe` และ Caching: เพิ่มความคาดเดาได้ให้กับ AI

ข้อกังวลทั่วไปเกี่ยวกับการใช้ AI คือความไม่แน่นอน โมเดลจะเลือกองค์ประกอบที่ถูกต้องทุกครั้งหรือไม่? Stagehand แก้ปัญหานี้ด้วยเมธอด observe observe ไม่ได้ดำเนินการใดๆ แต่จะคืนค่ารายการของการดำเนินการที่ *อาจเกิดขึ้นได้* ซึ่งตรงกับคำสั่ง

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

อ็อบเจกต์ action ที่ถูกคืนค่ามาคือตัวอธิบายที่สามารถแปลงเป็นอนุกรมได้ของการดำเนินการที่ Stagehand ตั้งใจจะทำ คุณสามารถตรวจสอบ บันทึก และที่สำคัญที่สุดคือป้อนกลับเข้าไปใน act ได้โดยตรง:

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

กระบวนการสองขั้นตอนนี้ให้คุณสมบัติ "แสดงตัวอย่าง" ที่ทรงพลัง แต่จุดแข็งที่แท้จริงอยู่ที่การแคช สำหรับงานที่ทำซ้ำๆ คุณสามารถใช้ observe เพื่อสังเกตการดำเนินการหนึ่งครั้ง บันทึกผลลัพธ์ และนำกลับมาใช้ใหม่ในการรันครั้งต่อๆ ไปได้

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

กลยุทธ์การแคชนี้มีประโยชน์หลายประการ:

ความน่าเชื่อถือ: ทำให้มั่นใจได้ว่าการดำเนินการเดียวกันจะถูกทำซ้ำทุกครั้ง โดยขจัดความแปรปรวนของโมเดล AI
ความเร็ว: ข้ามขั้นตอนการเรียกใช้ AI ทำให้การทำงานอัตโนมัติเร็วขึ้นอย่างมาก
ค่าใช้จ่าย: ประหยัดค่าใช้จ่ายในการเรียกใช้ API ไปยังโมเดลภาษาพื้นฐาน ลดต้นทุนการดำเนินงาน

`extract`: การดึงข้อมูลอัจฉริยะ

การดึงข้อมูลจากหน้าเว็บด้วยเครื่องมือแบบดั้งเดิมเกี่ยวข้องกับการเขียนตัวเลือก CSS หรือ XPath เพื่อระบุตำแหน่งข้อมูล นี่เป็นอีกรูปแบบหนึ่งของการเชื่อมโยงที่เปราะบางกับ UI เมธอด extract ของ Stagehand ปฏิวัติกระบวนการนี้โดยให้คุณระบุสิ่งที่คุณต้องการดึงออกมาในภาษามนุษย์

คุณสามารถระบุ Zod schema เพื่อให้แน่ใจว่าผลลัพธ์มีโครงสร้างที่ถูกต้อง Zod เป็นไลบรารีการประกาศและตรวจสอบ schema ที่เป็นที่นิยมสำหรับ TypeScript และการรวมเข้ากับ Stagehand ในที่นี้ถือเป็นการเปลี่ยนแปลงครั้งสำคัญ

ลองจินตนาการว่าคุณอยู่ในหน้า pull request ของ GitHub และต้องการดึงชื่อผู้ใช้ของผู้เขียนและชื่อ PR ด้วย extract มันง่ายมากเช่นนี้:

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 จะอ่านหน้าเว็บ ทำความเข้าใจบริบท และเติมข้อมูลที่ร้องขอลงใน Zod schema สิ่งนี้แข็งแกร่งกว่าการพึ่งพาตัวเลือกเช่น #pull_request_header .author ซึ่งอาจเปลี่ยนแปลงได้ตลอดเวลา คุณยังสามารถดึงข้อมูลที่ซ้อนกันที่ซับซ้อน รวมถึงอาร์เรย์ของอ็อบเจกต์ได้ โดยการกำหนด Zod schema ที่เหมาะสม

`agent`: สำหรับงานที่ทำเองได้หลายขั้นตอน

ในขณะที่ act ใช้สำหรับการดำเนินการแบบอะตอมเดียว agent ใช้สำหรับการจัดการเป้าหมายที่ใหญ่กว่าและซับซ้อนกว่า เอเจนต์สามารถรับวัตถุประสงค์ระดับสูงและแบ่งย่อยออกเป็นลำดับของการเรียกใช้ act และ extract ได้ด้วยตัวเอง

// 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."
);

เอเจนต์ให้ประสบการณ์แบบ "มนุษย์ร่วมวง" สำหรับสคริปต์การทำงานอัตโนมัติของคุณ เหมาะอย่างยิ่งสำหรับงานสำรวจหรือการนำทางในเว็บไซต์ที่ซับซ้อนและไม่คุ้นเคย ซึ่งการกำหนดทุกขั้นตอนล่วงหน้าจะไม่สามารถทำได้จริง รองรับโมเดลชั้นนำจากทั้ง OpenAI และ Anthropic ทำให้นักพัฒนาเข้าถึงความสามารถ AI ที่ล้ำสมัยได้ด้วยการตั้งค่าที่น้อยที่สุด

เริ่มต้นใช้งาน: บทช่วยสอนขนาดเล็กสำหรับการใช้ Stagehand Team

ชม Anirudh สาธิต create-browser-app เพื่อสร้างโปรเจกต์ Stagehand ได้ที่นี่:

วิธีที่เร็วที่สุดในการเริ่มโปรเจกต์ Stagehand คือการใช้เครื่องมือบรรทัดคำสั่ง (command-line tool)

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

นี่จะสร้างโครงร่างโปรเจกต์ใหม่พร้อมกับ dependencies ไฟล์กำหนดค่า และสคริปต์ตัวอย่างที่จำเป็นทั้งหมด คุณจะต้องเพิ่มคีย์ API ของคุณสำหรับผู้ให้บริการ LLM (เช่น OpenAI หรือ Anthropic) และอาจรวมถึงคีย์ Browserbase (สำหรับการรันเบราว์เซอร์บนคลาวด์) ลงในไฟล์ .env

สคริปต์พื้นฐานมีลักษณะดังนี้:

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

ตัวอย่างง่ายๆ นี้แสดงให้เห็นวงจรชีวิตทั้งหมด: การเริ่มต้น (initialization), การนำทาง (navigation), การดำเนินการ (action), การดึงข้อมูล (extraction) และการล้างข้อมูล (cleanup) มันสะอาด อ่านง่าย และมีความยืดหยุ่นอย่างน่าทึ่งต่อการเปลี่ยนแปลง UI บนหน้า GitHub trending

คำตัดสิน: มันดีแค่ไหน?

หลังจากการเจาะลึกคุณสมบัติและปรัชญาของมัน เป็นที่ชัดเจนว่า Stagehand เป็นมากกว่าแค่เครื่องมือทำงานอัตโนมัติอีกตัว มันเป็นเฟรมเวิร์กที่ได้รับการคิดมาอย่างดีและทรงพลัง ซึ่งเชื่อมช่องว่างระหว่างการทำงานอัตโนมัติแบบดั้งเดิมที่ใช้โค้ดหนักๆ กับโลกใหม่ของเอเจนต์ AI ได้อย่างประสบความสำเร็จ

ข้อดี:

ประสบการณ์นักพัฒนา: การสร้างขึ้นบน Playwright ทำให้มี API ที่คุ้นเคยสำหรับนักพัฒนาหลายคน การเพิ่ม act และ extract ทำให้การเขียนสคริปต์อัตโนมัติเร็วขึ้นและใช้งานง่ายขึ้น
ความยืดหยุ่น: สคริปต์มีความเปราะบางน้อยลงมากและทนทานต่อการเปลี่ยนแปลง UI ซึ่งช่วยลดภาระการบำรุงรักษาได้อย่างมาก
การควบคุมและความคาดเดาได้: กลไก observe และ caching เป็นโซลูชันที่ยอดเยี่ยมสำหรับปัญหาความไม่แน่นอนของ AI ทำให้สามารถนำไปใช้ในสภาพแวดล้อมการทำงานจริงได้
พลังและความยืดหยุ่น: การรวมกันของการเรียกใช้ act แบบอะตอม การใช้ extract schemas ที่ชาญฉลาด และ agent ระดับสูง ทำให้มีเครื่องมือที่หลากหลายเหมาะสำหรับงานอัตโนมัติของเบราว์เซอร์เกือบทุกประเภท
การดึงข้อมูลที่มีโครงสร้าง: การรวม Zod เข้ากับ extract เป็นคุณสมบัติที่โดดเด่น ทำให้การดึงข้อมูลทำได้ง่ายและน่าเชื่อถือกว่าที่เคย

ข้อเสียที่อาจเกิดขึ้น:

การพึ่งพา LLM: คุณภาพของการทำงานอัตโนมัติขึ้นอยู่กับประสิทธิภาพของโมเดล AI ที่ใช้ แม้ว่าโมเดลในปัจจุบันจะมีความสามารถอย่างน่าทึ่ง แต่ก็ยังไม่สมบูรณ์แบบ
ค่าใช้จ่าย: การเรียกใช้ API ไปยังโมเดลที่ทรงพลังมีค่าใช้จ่าย แม้ว่ากลยุทธ์การแคชจะช่วยลดปัญหานี้ได้ แต่การใช้งานในปริมาณมากอาจมีค่าใช้จ่ายเกิดขึ้น
ช่วงการเรียนรู้: แม้จะง่ายกว่า Playwright ดั้งเดิมสำหรับหลายงาน แต่นักพัฒนายังคงต้องทำความเข้าใจแนวคิดหลักของ act, observe, extract และเวลาที่ควรใช้แต่ละตัว การคิดในแง่ของ "การดำเนินการแบบอะตอม" เทียบกับ "เป้าหมายระดับสูง" เป็นทักษะใหม่

บทสรุป

แล้ว Stagehand ดีแค่ไหน? มันดีเยี่ยมมาก ไม่ใช่ยาวิเศษ แต่เป็นก้าวสำคัญในการทำงานอัตโนมัติของเบราว์เซอร์ ช่วยให้นักพัฒนาสร้างระบบอัตโนมัติที่แข็งแกร่งขึ้น ชาญฉลาดขึ้น และมีความสามารถมากขึ้นโดยใช้ความพยายามน้อยลง ด้วยการให้คุณเลือกเขียนโค้ดระดับต่ำเมื่อต้องการความแม่นยำ และใช้ AI ระดับสูงเมื่อต้องการความยืดหยุ่น Stagehand จึงเป็นชุดเครื่องมือที่ใช้งานได้จริงและทรงพลังสำหรับนักพัฒนาสมัยใหม่

หากคุณเป็นวิศวกร QA ที่เบื่อกับการอัปเดตตัวเลือก เป็นนักวิทยาศาสตร์ข้อมูลที่กำลังมองหาวิธีที่ดีกว่าในการดึงข้อมูลจากเว็บ หรือเป็นนักพัฒนาที่สร้างเวิร์กโฟลว์ที่ซับซ้อนบนเบราว์เซอร์ Stagehand ไม่ใช่แค่คุ้มค่าที่จะลองดู—มันอาจกลายเป็นเครื่องมือโปรดใหม่ของคุณ มันทำตามคำสัญญาได้อย่างประสบความสำเร็จ ทำให้เป็นผู้ท้าชิงชั้นนำสำหรับตำแหน่ง "เฟรมเวิร์กการทำงานอัตโนมัติของเบราว์เซอร์ด้วย AI"

💡