أتمتة اختبار واجهة المستخدم باستخدام Gemini CLI وBrowserMCP وPlaywright

1. مقدمة

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

ماذا لو كان بإمكانك أن تخبر أحد العملاء بما تريد اختباره بلغة طبيعية، وينفّذ ذلك على الفور؟

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

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

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

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

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

2. المتطلبات الأساسية

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

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

الأدوات

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

متصفح Chrome
‫Gemini CLI (الذي يعتمد بدوره على nodejs)
Git

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

(يُرجى العِلم أنّ

لن يعمل BrowserMCP من Google Cloud Shell

، لأنّه لن يتصل إلا بمتصفّح محلي يعمل على الجهاز نفسه).

إنشاء مشروع على Google Cloud

إذا كان لديك مفتاح Gemini API، يمكنك استخدامه وتخطّي هذه الخطوة.

بخلاف ذلك، ستحتاج إلى مشروع على Google Cloud لمتابعة الخطوات. لن ننشر أي خدمات من Google Cloud، ولكنّك تحتاج إلى المشروع لربط مفتاح Gemini API. (يجب أن يكون لديك مفتاح API لاستخدام Gemini).

إذا كنت على دراية بخدمة Google Cloud، يمكنك إنشاء مشروع جديد هنا. بدلاً من ذلك، يمكنك إنشاء مشروع على السحابة الإلكترونية من داخل Google AI Studio مباشرةً.

إنشاء مفتاح Gemini API بدون أي تكلفة

الآن، عليك إنشاء مفتاح Gemini API في Google AI Studio. انقر على "الحصول على مفتاح API".

سيظهر لك شيء مثل ما يلي:

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

يمكنك هنا اختيار مشروع حالي على Google Cloud أو إنشاء مشروع جديد. لقد أنشأتُ هنا مشروعًا جديدًا باسم agentic-ui-demo:

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

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

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

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

بعد ذلك، أنشِئ نسخة من ملف .env.template النموذجي باسم .env. يمكنك إجراء ذلك في أداة التعديل أو تشغيل الأمر التالي:

cp .env.template .env

عدِّل ملف ‎ .env هذا باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك. (تذكَّر: لا تسجّل ملف ‎ .env مطلقًا باستخدام معلومات مثل مفتاح واجهة برمجة التطبيقات!) أسهل طريقة للقيام بذلك هي فتحها في أداة التعديل.

لنحمّل الآن متغير البيئة:

source .env

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

make install

3- تطبيقنا التجريبي

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

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

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

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

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

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

make dev

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

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

4. تحدّي اختبار واجهة المستخدم

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

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

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

5- ‫MCP to the Rescue

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

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

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

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

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

ما هي BrowserMCP؟

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

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

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

تثبيت Browser MCP

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

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

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

بعد ذلك، علينا إضافة إعدادات MCP إلى برنامجنا:

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

أين يمكن ضبط هذا الإعداد؟ حسنًا، يعتمد ذلك على وكيلك. على سبيل المثال، في Gemini CLI: ~/.gemini/settings.json. وستظهر على النحو التالي:

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

والآن، لننتقل إلى الميزة السحرية. أولاً، لنشغّل Gemini CLI (من خلال تنفيذ gemini) في جلسة نافذة أوامر جديدة. (تذكَّر أنّ التطبيق التجريبي يعمل في جلسة الوحدة الطرفية الأولية). داخل Gemini CLI، شغِّل /mcp للتأكّد من تثبيته بشكلٍ صحيح. من المفترض أن تظهر لك قائمة بالأدوات، مثل ما يلي:

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

make dev

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

يمكننا الآن استخدام Gemini CLI لتنفيذ اختبار. انسخ هذا الطلب والصقه في Gemini CLI:

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.

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

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

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

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

رائع، أليس كذلك؟

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

7. الأتمتة باستخدام Skills وPlaywright

قيود BrowserMCP

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

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

Playwright

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

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

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

المهارات

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

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

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

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

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

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

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

سأستفيد من واجهة سطر الأوامر في Playwright والمهارة المرتبطة بها.

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

جارٍ التثبيت

لنبدأ أولاً بتثبيت واجهة سطر الأوامر مفتوحة المصدر Microsoft Playwright. إذا لم يسبق لك إجراء ذلك، اخرج من Gemini CLI بكتابة /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 لكي لا يختلط على البرنامج المساعد الأدوات التي يجب استخدامها. أعِد تشغيل Gemini CLI، ثم نفِّذ الأمر التالي:

/mcp disable browsermcp

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

أدخِل الطلب التالي في Gemini CLI:

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.

(وكما هو الحال دائمًا، سيطلب منك Gemini CLI الإذن قبل تشغيل أي أدوات).

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

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

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

يُرجى العِلم أنّك سترى عمليات تنفيذ طلبات الأدوات في Gemini CLI، ولكن لن تظهر لك واجهة مستخدم المتصفّح. ويرجع ذلك إلى أنّ 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 present them back to me in a markdown table.

بعد فترة قصيرة، من المفترض أن تبدو مخرجات Gemini CLI على النحو التالي:

ألم يكن ذلك رائعًا؟

8. يمكنك إجراء ذلك في Antigravity Out of the Box!

يتضمّن Google Antigravity Browser Subagent الذي يوفّر إمكانات مشابهة لواجهة سطر الأوامر في Playwright. عندما تطلب من "Gemini في Antigravity" إنشاء عنوان URL بشكل تفاعلي، سيتم إنشاء هذا الوكيل الفرعي تلقائيًا.

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

ملاحظة لمستخدمي "نظام التشغيل الفرعي في Windows" (WSL): قد يكون تشغيل Browser Agent في Antigravity أمرًا صعبًا. لقد تمكّنت من تشغيلها، ولكنّني أجد أنّ الوكيل الفرعي غير متسق وغير موثوق به في هذه البيئة. هذا أحد الأسباب التي تجعلني أفضّل واجهة سطر الأوامر في Playwright.

9- حالات الاستخدام الأخرى لأتمتة المتصفّح

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

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

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

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

10. الخاتمة

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

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

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

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

روابط مفيدة

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

رمز المستودع

مستودع GitHub الخاص بأداة agentic-ui-testing

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

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

غير ذلك

العمل باستخدام Google Antigravity في "نظام التشغيل الفرعي لنظام التشغيل Windows"