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

1. مقدمة

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

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

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

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

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

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

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

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

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

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

الأدوات

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

متصفح Chrome
Nodejs
Gemini CLI
Git

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

تفترض التعليمات أنّك تعمل في بيئة 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

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

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

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

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

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

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

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

make dev

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

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

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

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

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

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

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

5- ‫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 وقواعد البيانات وغيرها، وربطها مباشرةً بسير عملك المستند إلى الوكلاء. تضمن هذه البنية المعيارية الجاهزة للاستخدام أنّه في حال بدّلت مقدّمي نماذج اللغات الكبيرة أو عدّلت أدواتك لاحقًا، ستظل البنية الأساسية لعملية الدمج بدون أي تغيير.

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

ما هي BrowserMCP؟

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

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

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

تثبيت Browser MCP

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

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

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

بعد ذلك، علينا إضافة خادم BrowserMCP الفعلي إلى برنامجك. في Gemini CLI، يصبح ذلك سهلاً للغاية. ما عليك سوى تثبيت الإضافة:

gemini extensions install https://github.com/derailed-dash/browsermcp-ext

الاختبار باستخدام 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 CLI والمهارة المرتبطة به.

من خلال هذا النهج، نثبّت واجهة سطر الأوامر 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 record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

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

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

8. ولكن هناك أيضًا "برنامج شركاء المحتوى" في "أدوات مطوّري البرامج في Chrome"!

"أدوات مطوّري البرامج في Chrome" هي مجموعة من أدوات المطوّرين على الويب المُدمَجة في متصفّح Chrome والمخصّصة لتطوير الويب وتصحيح الأخطاء. تم طرحها منذ زمن بعيد. أقصد وحدة التحكّم التي يمكنك التفاعل معها عند فتح "المزيد من الأدوات" -> "أدوات المطوّرين" في Chrome.

ولكنّه يتضمّن الآن خادم MCP خاصًا به، وهو ما لم يكن متاحًا عند التفكير في أتمتة المتصفّح من Gemini CLI في العام الماضي. ولكن يمكنك الآن إجراء كل ما يمكنك إجراؤه باستخدام BrowserMCP ومعظم ما يمكنك إجراؤه باستخدام Playwright، بدون تثبيت أي شيء في المتصفح وبدون تثبيت واجهة سطر أوامر محلية.

لنجرّب ذلك.

في الوقت الحالي، تأكّدنا من أنّها تعمل في Google Cloud Shell. لذا، سنستخدم في هذا الجزء Google Cloud Shell في Google Cloud Console.

افتح وحدة التحكّم وافتح جلسة Cloud Shell. من هناك:

# Clone the sample app - like we did before
git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

# Build the application - like we did before
make install

# Install the Chrome DevTools MCP server Gemini CLI Extension
gemini extensions install https://github.com/ChromeDevTools/chrome-devtools-mcp

الآن، علينا تثبيت ملف Chrome قابل للتنفيذ في Cloud Shell:

# Get the latest executable for Ubuntu
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

# Install it
sudo apt install ./google-chrome-stable_current_amd64.deb -y

# Check it and get the executable path
which google-chrome

# Cleanup
rm google-chrome-stable_current_amd64.deb

الخطوة الأخيرة هي إخبار خادم MCP في "أدوات مطوّري البرامج في Chrome" بمكان العثور على ملف Chrome التنفيذي. يمكننا إجراء ذلك من خلال ضبط الخيار executable-path في إعدادات خادم MCP على headless. يمكننا إجراء ذلك من خلال تعديل الملف ~/.gemini/extensions/chrome-devtools-mcp/gemini-extension.json:

{
  "name": "chrome-devtools-mcp",
  "version": "latest",
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executable-path=/usr/bin/google-chrome",
        "--headless"
      ]
    }
  }
}

رائع! يجب أن يكون كل شيء جاهزًا. شغِّل gemini من Cloud Shell، وتأكَّد من أنّ خادم MCP يعمل باستخدام الأمر /mcp list، كما فعلنا سابقًا.

أخيرًا، نحن مستعدون لاختبارها باستخدام طلب.

لنجرّب طريقة مختلفة قليلاً. في هذه المرة، سنطلب من Gemini CLI تشغيل التطبيق التجريبي والاتصال به:

Launch my demo application with `make dev`. Then, using Chrome DevTools MCP, connect to the application at  the exposed localhost URL. 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.

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

بعد بضع ثوانٍ، من المفترض أن يعرض Gemini CLI النتائج في الجدول، وسيتم حفظ لقطة الشاشة. يمكنك المتابعة وتنزيل لقطة الشاشة من Cloud Shell للتأكّد من أنّها تبدو جيدة.

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

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

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

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

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

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

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

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

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

11. الخاتمة

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

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

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

يمكنك الآن المضي قدمًا وأتمتة المهام المملّة.

روابط مفيدة

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

رمز المستودع

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

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

مستودع GitHub الخاص بـ BrowserMCP
مستندات BrowserMCP
إضافة BrowserMCP في Gemini CLI - يُرجى إضافة نجمة إلى المستودع إذا كان هذا الدرس التطبيقي حول الترميز مفيدًا لك.
Playwright
Google AI Studio
أدوات مطوّري البرامج في Chrome
إضافة MCP في "أدوات مطوّري البرامج في Chrome"

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

غير ذلك