مراجعة Stagehand: أفضل إطار عمل لأتمتة متصفح الذكاء الاصطناعي؟

لقد كانت أتمتة المتصفحات منذ فترة طويلة حجر الزاوية في تطوير البرمجيات الحديثة، والاختبار، واستخراج البيانات. لسنوات، هيمنت أطر عمل مثل سيلينيوم (Selenium)، وبابيتير (Puppeteer)، ومؤخرًا بلاي رايت (Playwright)، على المشهد. توفر هذه الأدوات تحكمًا دقيقًا في إجراءات المتصفح، ولكنها تأتي مع منحنى تعلم حاد وعبء صيانة كبير. غالبًا ما تكون النصوص البرمجية هشة، وتتكسر مع أدنى تغيير في واجهة مستخدم الموقع. على الطرف الآخر من الطيف، تعد موجة جديدة من الوكلاء الأصليين للذكاء الاصطناعي بأتمتة المهام المعقدة باستخدام اللغة الطبيعية، ولكن غالبًا ما يكون ذلك على حساب الموثوقية والقدرة على التنبؤ والتحكم.

هنا يأتي ستيجهاند (Stagehand)، وهو إطار عمل يصف نفسه بأنه "إطار عمل أتمتة المتصفح بالذكاء الاصطناعي". لا يهدف إلى استبدال الأدوات التي أثبتت كفاءتها مثل بلاي رايت، بل إلى تضخيمها. تم بناء ستيجهاند فوق بلاي رايت، ويضيف طبقة قوية من الذكاء الاصطناعي، مما يسمح للمطورين بمزج الأتمتة التقليدية القائمة على الكود مع تعليمات عالية المستوى باللغة الطبيعية.

💡

هل تريد أداة رائعة لاختبار واجهات برمجة التطبيقات (API Testing) تولد توثيقًا رائعًا لواجهات برمجة التطبيقات؟

هل تريد منصة متكاملة وشاملة لفريق المطورين لديك للعمل معًا بأقصى قدر من الإنتاجية؟

Apidog يلبي جميع متطلباتك، ويستبدل Postman بسعر معقول أكثر بكثير!

button

ولكن ما مدى جودته حقًا؟ هل يحقق التوازن الصحيح بين دقة الكود ومرونة الذكاء الاصطناعي؟ ستستكشف هذه المراجعة والبرنامج التعليمي المتعمق المفاهيم الأساسية لـ ستيجهاند، وتستعرض أمثلة عملية، وتقيّم موقعه في عالم أتمتة المتصفحات سريع التطور.

لماذا ستيجهاند؟ مشكلة الطرق القديمة

قبل الغوص في "الكيفية"، من الضروري فهم "لماذا". الأتمتة التقليدية للمتصفح تدور بشكل أساسي حول إخبار المتصفح بالضبط بما يجب فعله. قد يبدو نص برمجي نموذجي كما يلي في بلاي رايت:

// 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 للنموذج، ينكسر النص البرمجي. يصبح الحفاظ على هذه المحددات عبر مجموعة اختبار كبيرة أو مشروع معقد لاستخراج البيانات مهمة مملة وغير مجزية.

تحقق من العرض التوضيحي المقدم من فريق ستيجهاند:

يحاول وكلاء الذكاء الاصطناعي عاليي المستوى حل هذه المشكلة عن طريق تجريد تفاصيل التنفيذ. ببساطة تخبر الوكيل، "سجل الدخول باستخدام بيانات اعتمادي"، وهو يكتشف الخطوات اللازمة. بينما يبدو هذا سحريًا، يمكن أن يكون غير متوقع في بيئات الإنتاج. قد يفشل الوكيل في واجهة مستخدم غير مألوفة، أو يسلك مسارًا غير فعال، أو يسيء فهم التعليمات، مما يؤدي إلى نتائج غير متناسقة.

يهدف ستيجهاند إلى تقديم مسار وسط. يدرك أنه في بعض الأحيان تعرف بالضبط ما تريد القيام به (على سبيل المثال، await page.goto('https://github.com'))، وفي أوقات أخرى تريد تفويض "الكيفية" إلى الذكاء الاصطناعي (على سبيل المثال، await page.act('click on the stagehand repo')). هذا النهج الهجين هو القيمة الأساسية التي يقدمها ستيجهاند.

الأركان الأساسية لـ ستيجهاند

يعزز ستيجهاند كائن Page في بلاي رايت بثلاث طرق أساسية: act وextract وobserve. كما يقدم وكيلًا قويًا (agent) للتعامل مع المهام الأكثر تعقيدًا والمتعددة الخطوات.

`act`: تنفيذ الإجراءات باللغة الطبيعية

تعد طريقة act قلب إمكانيات ستيجهاند التفاعلية. تأخذ تعليمات باللغة الإنجليزية البسيطة وتنفذ الإجراء المقابل على الصفحة.

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

خلف الكواليس، يحلل نموذج الذكاء الاصطناعي الحالة الحالية لصفحة الويب (DOM)، ويحدد العناصر التفاعلية الأكثر صلة (الأزرار، الروابط، حقول الإدخال)، ويربط التعليمات بإجراء محدد، مثل النقر أو الضغط على مفتاح. هذا يجعل النصوص البرمجية أكثر مرونة للتغييرات الطفيفة في واجهة المستخدم. طالما أن الإنسان يمكنه تحديد "زر تسجيل الدخول"، فمن المحتمل أن يتمكن ستيجهاند من ذلك أيضًا، حتى لو تغير الكود الأساسي.

مفتاح استخدام act بفعالية هو الحفاظ على التعليمات ذرية ومحددة. تعليمات مثل "اطلب لي بيتزا" عالية المستوى جدًا بالنسبة لـ act. بدلاً من ذلك، ستقوم بتقسيمها إلى سلسلة من الخطوات الذرية: "انقر على بيتزا البيبروني"، "اختر حجم 'كبير'"، "أضف إلى السلة"، و"تابع إلى الدفع".

`observe` والتخزين المؤقت: إضافة القدرة على التنبؤ إلى الذكاء الاصطناعي

أحد المخاوف الشائعة عند استخدام الذكاء الاصطناعي هو عدم القدرة على التنبؤ. هل سيختار النموذج العنصر الصحيح في كل مرة؟ يعالج ستيجهاند هذا باستخدام طريقة observe. لا تنفذ observe إجراءً؛ بل تُرجع قائمة بالإجراءات المحتملة التي تتطابق مع التعليمات.

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

الكائن action المُعاد هو وصف قابل للتسلسل للعملية التي ينوي ستيجهاند تنفيذها. يمكنك فحصه، وتسجيله، والأهم من ذلك، إعادته مباشرة إلى 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);
}

توفر استراتيجية التخزين المؤقت هذه العديد من الفوائد:

الموثوقية: تضمن تنفيذ نفس الإجراء بالضبط في كل مرة، مما يزيل التباين في نموذج الذكاء الاصطناعي.
السرعة: تتجاوز الحاجة إلى استدعاء الذكاء الاصطناعي، مما يجعل الأتمتة أسرع بكثير.
التكلفة: توفر في استدعاءات API للنموذج اللغوي الأساسي، مما يقلل التكاليف التشغيلية.

`extract`: استخراج البيانات الذكي

استخراج البيانات من صفحة ويب باستخدام الأدوات التقليدية يتضمن كتابة محددات CSS أو XPath لتحديد البيانات بدقة. هذا شكل آخر من أشكال الارتباط الهش بواجهة المستخدم. طريقة extract في ستيجهاند تحدث ثورة في هذه العملية من خلال السماح لك بتحديد ما تريد استخراجه باللغة الطبيعية.

يمكنك اختياريًا توفير مخطط Zod لضمان أن يكون الإخراج منظمًا بشكل صحيح. Zod هي مكتبة شائعة لتصريح مخططات التحقق من صحتها في TypeScript، وتكاملها هنا يغير قواعد اللعبة.

تخيل أنك على صفحة طلب سحب (pull request) في GitHub وتريد الحصول على اسم المستخدم للمؤلف وعنوان طلب السحب. باستخدام 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}`);

يقرأ الذكاء الاصطناعي في ستيجهاند الصفحة، ويفهم السياق، ويملأ مخطط Zod بالبيانات المطلوبة. هذا أكثر قوة بكثير من الاعتماد على محددات مثل #pull_request_header .author التي يمكن أن تتغير في أي وقت. يمكنك حتى استخراج بيانات متداخلة معقدة، بما في ذلك مصفوفات من الكائنات، عن طريق تعريف مخطط Zod المناسب.

`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، مما يمنح المطورين إمكانية الوصول إلى أحدث إمكانيات الذكاء الاصطناعي بأقل قدر من الإعداد.

البدء: برنامج تعليمي مصغر لاستخدام فريق ستيجهاند

شاهد أنيرود يعرض إنشاء تطبيق متصفح لإنشاء مشروع ستيجهاند هنا:

أسرع طريقة لبدء مشروع ستيجهاند هي باستخدام أداة سطر الأوامر الخاصة بهم.

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

يقوم هذا بإنشاء مشروع جديد مع جميع التبعيات الضرورية، وملفات التكوين، ونموذج نص برمجي. ستحتاج إلى إضافة مفاتيح 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();

يوضح هذا المثال البسيط دورة الحياة بأكملها: التهيئة، التنقل، الإجراء، الاستخراج، والتنظيف. إنه نظيف، قابل للقراءة، ومرن بشكل ملحوظ للتغييرات في واجهة المستخدم على صفحة GitHub الرائجة.

الحكم: ما مدى جودته؟

بعد الغوص العميق في ميزاته وفلسفته، من الواضح أن ستيجهاند هو أكثر من مجرد أداة أتمتة أخرى. إنه إطار عمل مدروس وقوي ينجح في سد الفجوة بين الأتمتة التقليدية كثيفة الكود وعالم وكلاء الذكاء الاصطناعي الجديد الشجاع.

الإيجابيات:

تجربة المطور: من خلال البناء فوق بلاي رايت، يقدم واجهة برمجة تطبيقات مألوفة للعديد من المطورين. إضافة act وextract تجعل كتابة نصوص الأتمتة أسرع وأكثر سهولة.
المرونة: النصوص البرمجية أقل هشاشة بكثير وأكثر مقاومة لتغييرات واجهة المستخدم، مما يقلل بشكل كبير من عبء الصيانة.
التحكم والقدرة على التنبؤ: آلية observe والتخزين المؤقت هي حل رائع لمشكلة عدم القدرة على التنبؤ في الذكاء الاصطناعي، مما يجعلها قابلة للاستخدام في حالات الإنتاج.
القوة والمرونة: مزيج استدعاءات act الذرية، ومخططات extract الذكية، والوكيل (agent) عالي المستوى يوفر مجموعة من الأدوات المناسبة لأي مهمة أتمتة متصفح تقريبًا.
استخراج البيانات المنظم: التكامل مع Zod للاستخراج هو ميزة بارزة، مما يجعل استخراج البيانات أسهل وأكثر موثوقية من أي وقت مضى.

السلبيات المحتملة:

الاعتماد على نماذج LLMs: جودة الأتمتة مرتبطة بأداء نماذج الذكاء الاصطناعي الأساسية. بينما نماذج اليوم قادرة بشكل لا يصدق، إلا أنها ليست مثالية.
التكلفة: استدعاءات API للنماذج القوية ليست مجانية. بينما تساعد استراتيجية التخزين المؤقت في تخفيف ذلك، يمكن أن يؤدي الاستخدام عالي الحجم إلى تكبد تكاليف.
منحنى التعلم: بينما هو أبسط من بلاي رايت الخام للعديد من المهام، لا يزال المطورون بحاجة إلى فهم المفاهيم الأساسية لـ act وobserve وextract ومتى يتم استخدام كل منها. التفكير من حيث "الإجراءات الذرية" مقابل "الأهداف عالية المستوى" هو مهارة جديدة.

الخلاصة

إذًا، ما مدى جودة ستيجهاند؟ إنه جيد بشكل استثنائي. إنه ليس حلًا سحريًا، ولكنه يمثل قفزة كبيرة إلى الأمام في أتمتة المتصفحات. يمكّن المطورين من بناء أتمتات أكثر قوة وذكاءً وقدرة بجهد أقل. من خلال منحك خيار كتابة كود منخفض المستوى عندما تحتاج إلى الدقة واستخدام الذكاء الاصطناعي عالي المستوى عندما تحتاج إلى المرونة، يوفر ستيجهاند مجموعة أدوات عملية وقوية للمطور الحديث.

إذا كنت مهندس ضمان جودة سئمت من تحديث المحددات، أو عالم بيانات يبحث عن طريقة أفضل لاستخراج البيانات من الويب، أو مطورًا يبني مهام سير عمل معقدة قائمة على المتصفح، فإن ستيجهاند لا يستحق مجرد إلقاء نظرة - بل قد يصبح أداتك المفضلة الجديدة. ينجح في تحقيق وعده، مما يجعله منافسًا رائدًا للقب "إطار عمل أتمتة المتصفح بالذكاء الاصطناعي".

💡