Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

إجراء اختبار واجهة المستخدم آليًا باستخدام Antigravity (AGY) CLI وBrowserMCP وPlaywright وBrowser Agent

1. مقدمة

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

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

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

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

ما ستتعرّف عليه

ما هو Antigravity CLI وكيف يتناسب مع منظومة Antigravity المتكاملة
ما هو بروتوكول سياق النموذج (MCP) ولماذا يُحدث تغييرًا جذريًا؟
كيف تتيح BrowserMCP لوكلاء الذكاء الاصطناعي التحكّم في متصفّحات الويب؟
كيفية إجراء اختبارات واجهة المستخدم الآلية من Antigravity CLI
فهم مهارات الوكيل ومزاياها
تعليم وكيل كيفية استخدام Playwright مع مهارة
التعرّف على وكيل المتصفّح المضمّن في Antigravity
حالات استخدام أخرى للتحكّم في المتصفّح

المهام التي ستنفّذها

يستفيد هذا الدرس التطبيقي حول الترميز من Antigravity CLI وأدوات MCP ومهارات الوكيل وتطبيق React التجريبي.

عليك إجراء ما يلي:

إعداد بيئة التطوير
استكشاف تطبيق تجريبي يحتاج إلى اختبار
استخدِم Antigravity CLI للتفاعل مع التطبيق من خلال BrowserMCP.
علِّم وكيلك كيفية استخدام Playwright من خلال مهارة وكيل.

2. منظومة Antigravity المتكاملة

في مايو 2026، أوقفت Google مجموعة Antigravity الجديدة، ما أدّى إلى إجراء إصلاح شامل لـ Antigravity وتقسيمها إلى المنتجات الأربعة التالية:

‫Antigravity 2.0، وهي الآن بيئة "إنشاء" مخصّصة تعتمد على الوكيل على الكمبيوتر المكتبي، ولا تتضمّن في حد ذاتها بيئة تطوير متكاملة (IDE). بدلاً من ذلك، نتفاعل الآن فقط مع مدير الوكيل. تهدف هذه الواجهة إلى إطلاق عصر "تحويل الأفكار إلى منتجات" باستخدام الوكلاء، بدون الحاجة إلى الاهتمام بالرمز البرمجي. ستنال هذه الميزة إعجاب العديد من المنشئين الذين ليس لديهم خبرة في البرمجة.
بيئة تطوير متكاملة (IDE) في Antigravity، والتي تمنحنا بيئة ترميز مألوفة أكثر تشبه VS Code، وهي متوافقة مع أداة Antigravity. يمكننا هنا الاستعانة بوكيل في عملية التطوير، ونرى الرمز البرمجي دائمًا. سيشعر المبرمجون بالراحة هنا.
‫Antigravity SDK، التي تمنحك أدوات Antigravity، ولكنها معروضة كحزمة SDK لوكيل Python. من خلال الاستيراد من google.antigravity، يمكننا الاستفادة من إمكانات Antigravity آليًا.
‫Antigravity CLI، وهو التطوّر التالي لـ Gemini CLI الرائع للغاية. لا يزال بإمكانك التفاعل مع نماذج Gemini من خلال سطر الأوامر. لكن تم إنشاء أداة Antigravity CLI الجديدة باستخدام لغة Go، ويمكنك ملاحظة ذلك، فهي أسرع بكثير من Gemini CLI، سواء أثناء بدء التشغيل أو في الاستخدام العام. يستفيد من "أداة" الوكيل نفسها المستخدَمة في Antigravity 2.0 وبيئة التطوير المتكاملة (IDE)، ما يتيح إعدادات وتكوينات مشتركة في مجموعة Antigravity.

على الرغم من أنّ هذا المختبر يركّز على استخدام Antigravity CLI، يمكن أيضًا تنفيذ كل ما في هذا المختبر باستخدام Agy IDE أو Agy 2.0.

3- المتطلبات الأساسية

قبل أن ننتقل إلى التفاصيل الشيّقة، لنحرص على توفّر كل ما تحتاج إليه.

الأدوات

تفترض هذه الميزة الاختبارية أنّ لديك ما يلي:

متصفح Chrome
Node.js
Antigravity CLI
Git

لاستخدام Antigravity CLI، عليك المصادقة باستخدام Google. عند تشغيل agy لأول مرة، سيُطلب منك تلقائيًا تسجيل الدخول باستخدام حساب Google من خلال متصفّح الويب التلقائي. يتضمّن هذا الخيار حصة مجانية كبيرة من استخدام Gemini ولا يتطلّب مشروعًا على Google Cloud. إذا كان لديك مفتاح Gemini API أو مشروع على Google Cloud، يمكنك إعداد ذلك أيضًا.

تفترض التعليمات أنّك تعمل في بيئة Linux (أو نظام فرعي من Linux في Windows) أو macOS. إذا كنت تستخدم نظام التشغيل Windows (مثلي)، يمكنك اتّباع الخطوات باستخدام WSL.

(يُرجى العِلم أنّ BrowserMCP لن يعمل من Google Cloud Shell، لأنّه سيتصل فقط بمتصفّح محلي يعمل على الجهاز نفسه).

إعداد بيئة التطوير

لقد أنشأتُ مستودعًا تجريبيًا على GitHub. ويتضمّن تطبيقًا نموذجيًا يمكننا استخدامه لاختبار واجهة المستخدم. يمكنك استنساخه من خلال تنفيذ الأمر التالي من الوحدة الطرفية المحلية:

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

يتوفّر ملف Makefile لتسهيل إعداد البيئة اللازمة لتشغيل التطبيق التجريبي. لنشغّله لتهيئة بيئتنا:

make install

# Or if you don't have make
npm install --prefix demo-app

4. تطبيقنا التجريبي

التطبيق الذي نختبره اليوم هو The Dazbo Omni-Dash، وهو لوحة بيانات مستقبلية ذات تصميم داكن لإدارة بيانات قياس أمان النظام عن بُعد. (نعم، تم ترميزها بشكل حدسي!)

لماذا هذا التطبيق؟

تم تصميم هذه الأداة لتوفير مساحة اختبار واقعية تتضمّن ما يلي:

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

تشغيل التطبيق

لبدء التطبيق، ما عليك سوى تنفيذ الأمر التالي:

make dev

# Or if you don't have make
npm run dev --prefix demo-app

من المفترض أن يبدأ خادم التطوير بسرعة كبيرة، وسيكون التطبيق متاحًا على http://localhost:5173.

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

5- التحدّي الذي يواجهه اختبار واجهة المستخدم

من المعروف أنّ اختبارات واجهة المستخدم التقليدية يصعب إجراؤها بشكل صحيح، ويصعب الحفاظ عليها. تشمل المشاكل الشائعة ما يلي:

صعوبة التعلّم: يتطلّب من المطوّرين استثمار الكثير من الوقت لإتقان اللغات المعقّدة الخاصة بمجال معيّن والميزات الخاصة بإطار عمل معيّن (مثل Selenium أو Playwright) لمجرد تنفيذ تفاعل أساسي تلقائيًا.
أدوات الاختيار والتشغيل الآلي الهشة: تعتمد البرامج النصية التقليدية على بنى DOM ثابتة (مثل div > div > button) أو تصنيفات نصية محددة. ماذا يحدث إذا أعدت تسمية زر "تسجيل الخروج" إلى "تسجيل الخروج"؟ أو نقلت زرًا إلى قائمة مختلفة تمامًا؟ أو غيّرت بنية HTML؟ ستتوقف أدوات الاختبار التقليدية عند إجراء هذه الإجراءات، ما يؤدي إلى صيانة مستمرة للبرامج النصية.
اختبار "التقلب": الاختبارات التي تجتاز إحدى الدقائق وتفشل في الدقيقة التالية بسبب مشاكل في التوقيت أو ظروف السباق أو بطء تحميل مواد العرض
تطابق البيئة: مواجهة صعوبة في تكرار حالات التطبيق التي يصعب تكرارها، بالإضافة إلى عبء تنظيف بيانات الاختبار.

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

لحلّ هذه المشاكل، نحتاج إلى طريقة اختبار تركّز على النية بدلاً من التنفيذ.

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

6. MCP to the Rescue

بروتوكول سياق النموذج (MCP) هو معيار مفتوح يتيح لنماذج الذكاء الاصطناعي والوكلاء التفاعل مع الأدوات وواجهات برمجة التطبيقات والبيانات الخارجية. يمكن اعتبارها المحوّل العام الذي يتيح للنماذج والوكلاء العثور على الأدوات التي يمكنهم الوصول إليها وتنفيذها.

في السابق، كان دمج النماذج اللغوية الكبيرة (LLM) مع البيانات والأدوات الخارجية يتطلّب من المطوّرين كتابة عمليات ربط مخصّصة ومبرمَجة بشكل ثابت لواجهة برمجة التطبيقات لكل مصدر بيانات جديد، ما يؤدي إلى إنشاء مشكلة دمج غير مستدامة من النوع "M x N" حيث يؤدي كل نموذج وأداة جديدة إلى مضاعفة عبء الصيانة. يحلّ "بروتوكول سياق النموذج" (MCP) هذه المشكلة من خلال إزالة الحاجة إلى كتابة رمز برمجي محدّد لتنظيم هذه الإمكانات. وبدلاً من البرمجة الصريحة لسير عمل التنفيذ المعقّد، يمكن للمطوّرين الاعتماد على النموذج اللغوي الكبير لتفسير طلبات المستخدمين باللغة الطبيعية والاستدلال بشكل ديناميكي على الأدوات التي يجب استخدامها أثناء التنفيذ.

عندما يرسل المستخدم أمرًا بلغة طبيعية (مثل "انتقِل إلى localhost:5173، وسجِّل الدخول بصفتك "المشرف"، ثم انقر على الزر "إرسال")، يكتشف النموذج اللغوي الكبير الإمكانات المتاحة وينشئ طلبًا منظَّمًا لاستخدام أداة معيّنة. يعمل برنامج MCP كأداة ترجمة، حيث يوجّه هذا الطلب إلى خادم MCP المحدّد الذي ينفّذ الإجراء أو يستردّ البيانات ويعيد السياق إلى النموذج. ويتيح ذلك للذكاء الاصطناعي العمل بشكل مستقل بدون أن يضطر المطوّر إلى ترميز مسار التنفيذ المحدّد.

بما أنّ بروتوكول سياق النموذج (MCP) يتيح إنشاء معيار عالمي، يُشار إليه غالبًا باسم "USB-C لتطبيقات الذكاء الاصطناعي"، فهو يتيح إعادة استخدام واسعة النطاق. يمكن للمطوّرين إنشاء خادم MCP مرة واحدة، ويمكن لأي مضيف ذكاء اصطناعي متوافق مع MCP الاتصال به على الفور، ما يحلّ مشكلة التكامل M x N. لن تحتاج بعد الآن إلى إنشاء جسور مخصّصة لواجهة برمجة التطبيقات لكل منصة، بل يمكنك الاستفادة من منظومة خوادم MCP الجاهزة والمفتوحة المصدر للخدمات الشائعة، مثل GitHub وSlack وقواعد البيانات وغيرها، وربطها مباشرةً بسير عملك المستند إلى الوكلاء. تضمن هذه البنية المعيارية الجاهزة للاستخدام أنّه في حال بدّلت موفّري النماذج اللغوية الكبيرة أو حدّثت أدواتك لاحقًا، ستبقى البنية الأساسية للتكامل بدون أي تغيير.

7. التشغيل الآلي باستخدام BrowserMCP

ما هي BrowserMCP؟

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

في ما يلي بعض إمكاناته:

يمكنه الانتقال إلى عناوين URL.
يمكنه فحص نموذج المستند (DOM).
يمكنه النقر على الأزرار وكتابة النصوص في النماذج.
يمكنه السحب والإفلات.
يمكنه قراءة سجلّات وحدة تحكّم المتصفّح.
السرعة: يتم تنفيذ عملية التشغيل الآلي محليًا على جهازك.

تثبيت Browser MCP

لاستخدام BrowserMCP، عليك إجراء ما يلي:

ثبِّت إضافة BrowserMCP في Chrome (أو أي متصفّح مستند إلى Chromium).
اضبط خادم MCP يدويًا في إعدادات Antigravity.

لتثبيت الإضافة، ما عليك سوى اتّباع التعليمات هنا، ولن يستغرق ذلك سوى بضع ثوانٍ. وبعد تثبيتها، انقر على "ربط" في الإضافة للسماح للوكيل بالتحكّم في علامة التبويب الحالية (من الواضح أنّك تريد أن تكون علامة التبويب الحالية هي التي يتم تشغيل التطبيق التجريبي فيها).

بعد ذلك، نضبط خادم MCP الفعلي في Antigravity. وننفّذ ذلك من خلال إضافة تعريف خادم browsermcp إلى ملف mcp_config.json العام.

أنشئ الملف ~/.gemini/config/mcp_config.json أو عدِّله وأضِف الإعدادات التالية:

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

للحصول على شرح تفصيلي حول إعداد خوادم MCP والمهارات في نظام Antigravity المتكامل، يُرجى الاطّلاع على الموارد التالية:

الاختبار باستخدام BrowserMCP

والآن، لننتقل إلى الجزء الممتع. أولاً، لنشغّل واجهة سطر الأوامر Antigravity CLI (من خلال تنفيذ agy) في جلسة وحدة طرفية جديدة. (تذكَّر أنّ التطبيق التجريبي يعمل في جلسة الوحدة الطرفية الأولية). داخل واجهة المستخدم النصية التفاعلية، اكتب /mcp للتحقّق من قائمة الأدوات النشطة والتأكّد من توفّر browsermcp.

إذا لم تكن قد بدأت تشغيل التطبيق التجريبي في وقت سابق، يمكنك تشغيله الآن باتّباع الخطوات التالية:

make dev

إذا لم يسبق لك إجراء ذلك، عليك فتح التطبيق في متصفّح Chrome وربط إضافة BrowserMCP في علامة التبويب هذه. اتّبِع الرابط من الأمر run. بعد ذلك، انقر على رمز إضافة BrowserMCP ثم على "ربط".

يمكننا الآن استخدام واجهة سطر الأوامر Agy لتنفيذ اختبار. انسخ هذا الطلب والصقه في واجهة سطر الأوامر:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

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

السماح لواجهة سطر الأوامر بتشغيل جميع أدوات BrowserMCP لهذه الجلسة بعد ذلك، ارجع إلى المتصفّح وشاهِد التفاعلات الآلية تحدث.

في ما يلي بعض الملاحظات حول الطلب أعلاه:

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

يبدو رائعًا، أليس كذلك؟

لقد انتهينا من استخدام BrowserMCP في الوقت الحالي، لذا يُرجى إيقافه في متصفّحك.

8. التشغيل الآلي باستخدام Skills وPlaywright

قيود BrowserMCP

‫BrowserMCP أداة رائعة، ولكن لها بعض القيود. على سبيل المثال:

يتطلّب ذلك توفّر جلسة متصفّح حالية مع ربط إضافة BrowserMCP. (لا يؤدي ذلك إلى إنشاء جلسات جديدة).
ولا تتوافق مع المتصفّحات غير المستندة إلى Chromium.
يتطلّب ذلك تشغيل عملية متصفّح منفصلة على الجهاز نفسه الذي يتم تشغيل خادم MCP عليه.
لا يمكنها العمل مع نظام الملفات المحلي. على سبيل المثال، لا يمكنه إنشاء ملفات محلية لتقديم لقطات شاشة كدليل، أو تنزيل ملفات من تطبيق الويب وتخزينها، مثل ملف PDF القابل للتنزيل.
وهي غير حتمية، إذ ستحاول تنفيذ الإجراءات التي تطلب منها تنفيذها، ولكن قد يؤدي ظهور نافذة منبثقة غير متوقّعة إلى إيقاف التفاعل.
لا تتوافق مع التشغيل "بدون واجهة مستخدم رسومية"، ما يعني أنّه لا يمكن تشغيلها في مسار CI/CD بدون نافذة متصفّح حقيقية.

Playwright

‫Playwright هي أداة أكثر تطورًا، وهي إطار عمل راسخ ومفتوح المصدر لأتمتة المتصفّح واختباره. ويمكنها تنفيذ العديد من المهام التي لا يمكن لأداة BrowserMCP تنفيذها، بما في ذلك جميع النقاط التي ذكرتها أعلاه.

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

ولكن مع هذه الإمكانية الإضافية، يصبح منحنى التعلّم أكثر صعوبة.

المهارات

لحسن الحظ، لسنا بحاجة إلى تعلُّم كيفية استخدام Playwright مباشرةً، بل يمكننا استخدام مهارة وكيل.

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

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

يمكنك التفكير في الأمر على أنّه مثل المشهد في فيلم The Matrix: ينظر العميل إلى مشكلة، ويدرك أنّه بحاجة إلى معرفة Playwright، وينزّل المهارة، وفجأة: "أنا أعرف الكونغ فو". ميكروفون كبير على حاملة خبير فوري

إذا أردت معرفة المزيد عن المهارات، يمكنك الاطّلاع على ما يلي:

لماذا تُعدّ "المهارات" مثالية للعبة Playwright؟

يُعدّ استخدام مهارة هنا خيارًا رائعًا، فبرنامج Playwright فعّال للغاية، ولكن قد يكون تركيبه صعبًا. من خلال منح الوكيل مهارة Playwright، لن نقلق بشأن أن يقدّم نموذج اللغة الكبير (LLM) تركيبًا قديمًا أو يكتب أدوات اختيار هشة، بل سنمنحه دليلًا منسّقًا وموثوقًا حول كيفية استخدام Playwright بشكل صحيح.

سأستخدم Playwright CLI والمهارة المرتبطة بها.

من خلال هذا النهج، نثبّت واجهة سطر الأوامر Playwright CLI على الجهاز، ثم نزوّد الوكيل بالمعلومات التي يحتاج إليها للاستفادة منها. لتجنُّب أي التباس، أودّ التأكيد على أنّني لن أثبّت أي خادم MCP في Playwright.

جارٍ التثبيت

لنبدأ أولاً بتثبيت واجهة سطر الأوامر مفتوحة المصدر Microsoft Playwright. إذا لم يسبق لك إجراء ذلك، اخرج من واجهة سطر الأوامر التفاعلية عن طريق كتابة /quit``. بعد ذلك، في نافذة الوحدة الطرفية:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

والآن، لنضِف المهارة. سيؤدي هذا الأمر إلى تنزيل المجلد الفرعي للمهارة مباشرةً من GitHub إلى مجلد مهارات Gemini:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

الآن يمكننا اختباره.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

من المفترض أن يؤدي ذلك إلى إنشاء جلسة متصفّح، يتم فتحها على عنوان URL المحدّد.

أريد أيضًا أن يتمكّن Gemini من استخدام Playwright في وضع "الواجهة الرسومية"، أي مع واجهة مستخدم مرئية. لكنّ المهارة لا تخبر Gemini بكيفية تنفيذ ذلك. لذلك، أضفتُ الأسطر التالية إلى ~/.gemini/skills/playwright-cli/SKILL.md في القسم Core:

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

الاختبار باستخدام Playwright

كما كان من قبل، علينا تشغيل التطبيق (إذا لم يكن قيد التشغيل). ويمكنك إجراء ذلك من جلسة الوحدة الطرفية الأولية:

make dev

بعد ذلك، في جلسة الوحدة الطرفية الأخرى، لنوقِف مؤقتًا BrowserMCP لكي لا يختلط على الوكيل الأدوات التي يجب استخدامها. أعِد تشغيل Antigravity CLI (agy). يمكننا إيقاف خادم browsermcp مؤقتًا مباشرةً من خلال واجهة المستخدم المستندة إلى النصوص:

اكتب /mcp داخل مربّع الطلب لفتح لوحة إدارة MCP.
استخدِم مفاتيح الأسهم (للأعلى/للأسفل) لاختيار browsermcp واضغط على Enter أو Return.
انتقِل إلى اليسار لاختيار "إيقاف" واضغط على Enter لإيقافها.

سنطلب الآن من البرنامج التجريبي الانتقال إلى تطبيقنا باستخدام Playwright، ولكن على عكس BrowserMCP، لسنا بحاجة إلى تشغيل المتصفح أولاً، إذ سيتولّى Playwright ذلك من خلال عملية محلية.

أدخِل هذا الطلب في واجهة سطر الأوامر (CLI) الخاصة بـ Agy:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(وكما هو الحال دائمًا، سيطلب منك واجهة سطر الأوامر الحصول على إذن قبل تشغيل أي أدوات).

ما هو المختلف هنا؟

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

بعد ذلك بوقت قصير، من المفترض أن يظهر ملف dashboard.png في مجلد الإخراج.

يُرجى العِلم أنّك سترى عمليات تنفيذ استدعاءات الأدوات في واجهة سطر الأوامر Agy، ولكن لن ترى واجهة مستخدم المتصفّح، لأنّ Playwright يعمل في "وضع بلا واجهة مستخدم رسومية" تلقائيًا.

ولكن إذا أعدت التشغيل باستخدام هذا الطلب المعدَّل، ستتمكّن من رؤية واجهة المستخدم أيضًا:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

يجب أن تبدو مخرجات واجهة سطر الأوامر Agy على النحو التالي:

أليس هذا رائعًا؟

9- وكيل المتصفّح المضمّن في Antigravity

تتضمّن منصة Google Antigravity وكيل متصفّح مدمجًا ( وكيل متصفّح فرعي) يوفّر إمكانية التشغيل الآلي للمتصفّح بدون الحاجة إلى تثبيت أداة منفصلة، مثل Playwright CLI.

طريقة العمل

للتحكّم في المتصفّح، يعمل وكيل المتصفّح المضمّن مباشرةً من خلال بروتوكول أدوات مطوّري البرامج في Chrome (CDP)، ما يزيل الحاجة إلى أي إضافات متصفّح أو مكوّنات إضافية وسيطة في Antigravity 2.0 وIDE.

عند تشغيل Antigravity، يتم ربطها بنسخة Chrome من خلال منفذ تصحيح أخطاء محلي عبر اتصال WebSocket. تتم ترجمة التعليمات العامة من الوكيل مباشرةً إلى أوامر CDP منخفضة المستوى التي:

التلاعب بنموذج المستند (DOM) للصفحة (مثل النقر على العناصر أو إدخال نص)
التحكّم في حالة المتصفّح وبدء التنقّل
تسجيل إطارات وبيانات مرئية في الوقت الفعلي

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

مدى توفّر الأداة

لا يتوفّر وكيل المتصفّح المضمّن بعد في واجهة سطر الأوامر (CLI) من Antigravity التي تعتمد على استخدام سطر الأوامر أولاً (Agy CLI). ومع ذلك، يمكنك استخدامها بدون أي إعدادات إضافية في Antigravity IDE وAntigravity 2.0 اليوم. نأمل أن تتوفّر ميزة دعم وكيل المتصفّح في Agy CLI في إصدار مستقبلي.

ملاحظة لمستخدمي نظام التشغيل الفرعي لنظام التشغيل Linux في Windows (WSL): أصبح تشغيل Browser Agent في Antigravity ضمن نظام التشغيل الفرعي لنظام التشغيل Linux في Windows أسهل بكثير من السابق. بدلاً من التعامل مع توجيه الشبكة المعقّد وإعادة توجيه المنفذ، ما عليك سوى تفعيل وضع الشبكة "المعكوس" في إعدادات WSL. للحصول على شرح كامل خطوة بخطوة، يُرجى الاطّلاع على الدليل حلّ المشاكل في WSL باستخدام Google Antigravity: الإصدار 2.0 من Agy وAgy IDE Edition.

10. حالات الاستخدام الأخرى لأتمتة المتصفح

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

إذا كنت بصدد إنشاء وكلاء الذكاء الاصطناعي الخاصين بك، إليك بعض الطرق التي يمكنك من خلالها استخدام أدوات مثل BrowserMCP أو Playwright CLI لتنفيذ المهام الصعبة:

مساعد البحث الشخصي: تخيَّل أنك توجّه وكيلك إلى عنوان URL معيّن وتطلب منه البحث في موضوع ما، ولكن الموقع الإلكتروني يتطلب تسجيل الدخول والتنقّل في قوائم معقّدة. بدلاً من كتابة برنامج مخصّص لاستخراج البيانات من الويب قد لا يعمل في الأسبوع التالي، ما عليك سوى أن تطلب من وكيلك تسجيل الدخول والانتقال إلى البيانات وتلخيصها لك.
المدمج "المتعدد المهام": لدينا جميعًا أنظمة إنترانت قديمة لا تتضمّن واجهات برمجة تطبيقات، وهي الأنظمة التي عليك فيها نسخ البيانات يدويًا من النظام (أ) ولصقها في نموذج في النظام (ب). يمكن أن يعمل وكيل مزوّد بأداة أتمتة المتصفّح كأداة ربط شاملة، حيث يقرأ شاشة النظام القديم ويملأ النموذج في النظام الجديد.
التصنيف والمعالجة الآليان: هل تلقّيت تنبيهًا من المستوى P1 من نظام الرصد في الساعة 3 صباحًا؟ يمكن للوكيل فتح عنوان URL الخاص بلوحة البيانات تلقائيًا، وقراءة الرسوم البيانية أو السجلات (باستخدام إمكانات الرؤية المتعددة الوسائط)، ونشر ملخّص مباشرةً في قناة Slack، ما يوفّر لك دقائق ثمينة أثناء وقوع حادث.

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

11. الخاتمة

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

لقد تعلّمت ما يلي:

لا يجب أن يكون اختبار واجهة المستخدم أمرًا صعبًا: من خلال التركيز على الغرض من الاختبار بدلاً من تنفيذ نموذج DOM المعرَّض للخطأ، يمكننا تقليل تكاليف الصيانة بشكل كبير.
بروتوكول سياق النموذج (MCP) يمنح الوكلاء إمكانية وصول شاملة وجاهزة للاستخدام إلى الأدوات والبيانات والبيئات.
BrowserMCP هي أداة رائعة تتيح لك الاستفادة من إمكانات بالذكاء الاصطناعي الوكيل في جلسات Chrome الحالية والمحلية.
تتيح لك المهارات وواجهة سطر الأوامر في Playwright إجراء اختبارات مبرمَجة جديدة قابلة للتكرار ومحدّدة، وكل ذلك بفضل أسلوب الكشف التدريجي.
تتجاوز أداة Antigravity's Browser Subagent كل ذلك خطوةً إضافية من خلال توفير ميزة التنقّل المستقل والمتعدّد الوسائط وتسجيل القطع الأثرية فورًا.

يمكنك الآن أتمتة المهام المملّة.

12. روابط مفيدة

إذا أردت التعرّف أكثر على الأدوات والمفاهيم التي تناولناها اليوم، يمكنك الاطّلاع على المراجع التالية:

رمز المستودع

مستودع agentic-ui-testing على GitHub: يُرجى إضافة نجمة إلى المستودع إذا كان هذا الدرس التطبيقي حول الترميز مفيدًا لك.

الأدوات والأُطر الأساسية

المفاهيم والمهارات المستندة إلى الذكاء الاصطناعي الوكيل

غير ذلك