الدرس 26 — دليل OpenClaw مهارة Agent Browser: أتمتة متصفح متقدمة للتعامل مع الصفحات الديناميكية وحالات تسجيل الدخول (2026)

الهدف: تثبيت مهارة Agent Browser، واستخدام لقطات Accessibility Tree ومراجع ref للتحكم الدقيق في عناصر الصفحة، والتعامل مع الصفحات التي تتطلب عرضاً بـ JavaScript أو تسجيل دخول.

الفرق بين Agent Browser وأدوات المتصفح المدمجة

إذا واجهتك مشكلة في استخراج صفحات ذات عرض ديناميكي بـ JavaScript، أو كنت بحاجة لمحاكاة تسجيل الدخول، فأنت بحاجة للترقية من الدرس 04 إلى Agent Browser.

المفهوم الأساسي: ما هو Accessibility Tree؟

أساس درس Agent Browser هو فهم سبب عدم الاعتماد على لقطات الشاشة.

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

Accessibility Tree (شجرة إمكانية الوصول) هو الوصف الهيكلي المُنظَّم الذي يحتفظ به المتصفح لدعم أدوات المساعدة (كقارئات الشاشة)، ويتضمن لكل عنصر:

• الدور (button، input، link، heading...)
• المحتوى النصي
• معرّف ref فريد
• الحالة (مرئي، معطّل، محدد...)

مثال على مقطع:

[ref=e23] button "تسجيل الدخول" (enabled)
[ref=e24] input type="text" placeholder="البريد الإلكتروني" value=""
[ref=e25] input type="password" placeholder="كلمة المرور" value=""
[ref=e26] checkbox "تذكّرني" (unchecked)

مع ref، يتحول النقر إلى click ref=e23، لا يفشل أياً كان تكبير الصفحة. هذا هو سبب تفوق Agent Browser على نهج لقطة الشاشة في الدقة.

الخطوة الأولى: تثبيت التبعيات (Playwright)

تعتمد مهارة Agent Browser على متصفح Playwright اللاواجهي:

npm install -g playwright
npx playwright install chromium

للتحقق من التثبيت:

npx playwright --version
# يُخرج رقم الإصدار مثل 1.41.0

إذا كنت معتاداً على Puppeteer يمكنك استخدامه أيضاً:

npm install -g puppeteer

ستكتشف المهارة تلقائياً برنامج تشغيل المتصفح المثبت.

الخطوة الثانية: تثبيت المهارة

/install @matrixy/agent-browser-clawdbot

للتحقق:

pnpm openclaw skills list
# يجب أن يظهر agent-browser-clawdbot في القائمة

الخطوة الثالثة: الاستخدام الأساسي — التنقل والحصول على هيكل الصفحة

الإجراء الأساسي لاستخراج صفحات ذات عرض ديناميكي:

افتح https://example.com بـ Agent Browser وأعطني لقطة من هيكل الصفحة

التنفيذ في الخلفية:

/browser navigate https://example.com
/browser snapshot

مثال على نتيجة الإرجاع (مقطع من Accessibility Tree):

[ref=e1]  heading "Example Domain" level=1
[ref=e2]  paragraph "This domain is for use in illustrative examples…"
[ref=e3]  link "More information…" href="https://www.iana.org/domains/example"

بخلاف الدرس 04، هذا ليس لقطة شاشة بل نص منظَّم، يستطيع الذكاء الاصطناعي تحديد أي عنصر بدقة.

الخطوة الرابعة: النقر الدقيق (باستخدام مرجع ref)

بعد الحصول على اللقطة، تشغيل العناصر بمرجع ref لا بإحداثيات:

انقر رابط "مزيد من المعلومات" في الصفحة

سيجد OpenClaw العنصر [ref=e3] المقابل وينفّذ:

/browser click ref=e3

ملء نموذج (عملية مركّبة):

اكتب "دليل OpenClaw" في مربع البحث ثم انقر زر البحث

التنفيذ المقابل:

/browser type ref=e12 text="دليل OpenClaw"
/browser click ref=e15

هذا جوهر درس تشغيل Agent Browser بـ Accessibility Tree — جميع العمليات تعتمد على ref، لا على الإحداثيات.

الخطوة الخامسة: معالجة تسجيل الدخول (حفظ الـ session)

السير القياسي لمحاكاة تسجيل الدخول بمتصفح لاواجهي:

سجّل الدخول في https://app.example.com بـ Agent Browser،
البريد: user@example.com، كلمة المرور: mypassword،
احفظ الـ session بعد نجاح تسجيل الدخول

خطوات التنفيذ في OpenClaw:

/browser navigate https://app.example.com/login
/browser snapshot
# يجد حقل البريد [ref=e24] وحقل كلمة المرور [ref=e25]
/browser type ref=e24 text="user@example.com"
/browser type ref=e25 text="mypassword"
/browser click ref=e23  # زر تسجيل الدخول
/browser save-session --name "example-app"

بعد حفظ الـ session، يُعاد استخدامه مباشرةً في العمليات اللاحقة على نفس الموقع:

/browser load-session --name "example-app"
/browser navigate https://app.example.com/dashboard

الخطوة السادسة: استراتيجيات الانتظار للصفحات الديناميكية

أكثر مشكلة شيوعاً في أتمتة المواقع التي تتطلب عرضاً بـ JavaScript هي "أخذ لقطة قبل اكتمال تحميل المحتوى". يُوفّر Agent Browser عدة استراتيجيات انتظار:

انتظار اكتمال طلبات الشبكة (مناسب لتطبيقات SPA المُشغَّلة بـ API):

/browser navigate https://app.example.com/data-table --wait-for network-idle

انتظار ظهور عنصر محدد (مناسب للمحتوى الذي يُحمَّل بشكل غير متزامن):

/browser wait-for-element --text "اكتمل تحميل البيانات"
/browser wait-for-element --ref-role "table"

تأخير ثابت (حل احتياطي):

/browser wait 2000

الخطوة السابعة: تطبيق فعلي — ملء وإرسال نموذج تلقائياً

مثال كامل على إرسال نموذج بمتصفح لاواجهي:

افتح https://forms.example.com/contact بـ Agent Browser،
أدخل المعلومات التالية وأرسل:
- الاسم: محمد الأحمد
- البريد الإلكتروني: mohammed@company.com
- الرسالة: أودّ الاستفسار عن برنامج الشراكة المؤسسية لشركتكم، أرجو ترتيب لقاء مع فريق المبيعات.

سير تنفيذ OpenClaw:

/browser navigate https://forms.example.com/contact
/browser snapshot
# تعرّف على ref حقول النموذج

/browser type ref=e10 text="محمد الأحمد"
/browser type ref=e11 text="mohammed@company.com"
/browser type ref=e12 text="أودّ الاستفسار عن برنامج الشراكة المؤسسية لشركتكم، أرجو ترتيب لقاء مع فريق المبيعات."
/browser click ref=e20  # زر الإرسال

/browser wait-for-element --text "تم الإرسال بنجاح"
/browser snapshot  # تأكيد نتيجة الإرسال

الأسئلة الشائعة

ما الفرق بين OpenClaw Agent Browser وأتمتة المتصفح في الدرس 04؟

أدوات المتصفح المدمجة في الدرس 04 تعمل على أساس لقطة الشاشة والإحداثيات، مناسبة للاستخراج السريع لمحتوى الصفحات الثابتة، سهلة الإعداد وجاهزة فور التثبيت. Agent Browser يستخدم Playwright لتشغيل Chrome اللاواجهي، ويفهم هيكل الصفحة عبر Accessibility Tree لا لقطة الشاشة، يدعم الصفحات الديناميكية ذات عرض JavaScript وحفظ حالة تسجيل الدخول وإعادة استخدام cookie، ودقته أعلى. إذا احتجت فقط قراءة صفحة ويب ثابتة، يكفي الدرس 04؛ وإذا احتجت تسجيل الدخول وملء النماذج وتشغيل تطبيقات SPA، فأنت بحاجة لـ Agent Browser.

هل تستطيع مهارة Agent Browser التعامل مع المواقع التي تتطلب تسجيل دخول؟

نعم. يدعم Agent Browser سير تسجيل الدخول الكامل: التنقل لصفحة تسجيل الدخول → إدخال بيانات الاعتماد → الإرسال → حفظ الـ session. تتضمن الـ session المحفوظة بيانات cookie وlocalStorage، وتُحمَّل مباشرةً في المرة التالية للعملية على نفس الموقع دون الحاجة لتسجيل دخول جديد. تُخزَّن الـ session مُشفَّرة محلياً في ~/.openclaw/sessions/ ولا تُرفع لأي سحابة. ملاحظة: بعض المواقع تكشف خصائص المتصفح الآلي (Bot Detection)، وعند مواجهة هذا يمكنك تفعيل وضع stealth في إعدادات المهارة.

ما هو Accessibility Tree ولماذا هو أفضل من لقطة الشاشة؟

Accessibility Tree شجرة هيكل الصفحة التي يحتفظ بها المتصفح لأدوات المساعدة كقارئات الشاشة، لكل عنصر UI معرّف ref فريد ونوع دور ومحتوى نصي. أسباب تفوقه على لقطة الشاشة ثلاثة: أولاً، مرجع ref لا يتأثر بالتمرير أو تغيير الحجم فاستقرار العمليات أعلى بكثير من الإحداثيات؛ ثانياً، المحتوى النصي مفهوم مباشرةً للذكاء الاصطناعي دون الحاجة لـ OCR؛ ثالثاً، يمكن الوصول لحالة العناصر المخفية أو غير المكتملة الظهور لتقدير حالة التحميل. باختصار: لقطة الشاشة تُخبر الذكاء الاصطناعي "كيف تبدو الصفحة"، وAccess Tree يُخبره "ما عناصر الصفحة واسم كل منها".

هل يلزم تثبيت Chrome منفصل عند التثبيت؟

لا يلزم تثبيت Chrome النظام منفصلاً. عند تنفيذ npx playwright install chromium، يُنزَّل ملف Chromium ثنائي مستقل (حوالي 150 ميغابايت) معزول تماماً عن متصفح النظام ولا يؤثر على Chrome اليومي. إذا كان Chrome مثبتاً على النظام وأردت إعادة استخدامه، يمكنك تحديد executablePath بمسار Chrome المحلي في إعداد مهارة Agent Browser، لكن هذا عادةً غير ضروري.

الخطوات التالية

• العودة لقائمة جميع الدروس — استعراض جميع دروس OpenClaw
• الدرس 25 — استخدام API Gateway للاتصال بـ 100+ خدمة SaaS بدون إعداد