Playwright MCP: دليل عملي لاختبار المواقع بوكلاء الذكاء الاصطناعي

يربط خادم Playwright MCP من Microsoft وكلاء مثل Claude Code وCodex وCursor ووكيل Copilot في VS Code بإطار أتمتة المتصفح Playwright. أنصح باستخدامه للفحوص الاستكشافية والتحقيق في الأعطال، ثم تحويل النتائج المهمة إلى اختبارات تخضع للمراجعة ويمكن تكرارها.

ما الذي يتيحه Playwright MCP فعليًا؟

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

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

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

للتعرّف على بقية الأدوات التي يمكن أن تكمل هذا الإعداد، راجع دليلنا إلى أفضل خوادم MCP لعام 2026.

كيف تضيفه إلى Claude Code أو Codex أو Cursor أو VS Code؟

تحتاج إلى Node.js 18 أو إصدار أحدث وعميل يدعم MCP. الأوامر والإعدادات التالية منقولة كما هي من أمثلة ملف README لدى Microsoft. اختر التعليمات الخاصة بعميلك؛ فهذه طرق تثبيت بديلة، وليست خطوات متتابعة تُنفّذها في جميع المحررات. المتطلبات والإعداد

Claude Code

نفّذ الأمر التالي كما هو:

claude mcp add playwright npx @playwright/mcp@latest

Codex

نفّذ الأمر التالي كما هو:

codex mcp add playwright npx "@playwright/mcp@latest"

ويمكنك بدلًا من ذلك إضافة الإعداد التالي إلى ~/.codex/config.toml:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

Cursor

اتبع طريقة الإعداد اليدوي في README: Cursor Settings -> MCP -> Add new MCP Server. اختر اسمًا، وحدّد النوع command، ثم أدخل:

npx @playwright/mcp@latest

استخدم Edit لفحص الإعدادات أو إضافة معاملات. ويوفّر README أيضًا زر التثبيت في Cursor.

VS Code

استخدم أمر واجهة سطر الأوامر في VS Code كما هو:

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

بعدها يصبح الخادم متاحًا لوكيل GitHub Copilot داخل VS Code. ويتضمن README من Microsoft أيضًا روابط لأزرار التثبيت ودليل إعداد MCP في VS Code.

إعداد JSON المشترك

للعملاء الذين يستخدمون إعداد JSON القياسي الوارد في README، هذا هو المثال كما ورد:

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

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

اختيار المتصفح والطريقة التي يقرأ بها الوكيل الصفحة

ابدأ بنافذة متصفح ظاهرة، وملف تعريف معزول، ولقطات لبنية الصفحة. أضف الخيارات إلى قائمة معاملات الخادم بعد @playwright/mcp@latest. مصدر هذه الخيارات هو مرجع الإعدادات لدى Microsoft.

الفرق بين اللقطات والرؤية يتعلق بطريقة التفاعل. في المسار الافتراضي، استخدم browser_snapshot لتحديد العناصر المستهدفة. تلتقط browser_take_screenshot دليلًا بصريًا، لكن التقاط صورة للشاشة لا يفعّل بحد ذاته النقر بالإحداثيات. عند استخدام --caps=vision، يسرد README الأدوات browser_mouse_click_xy وbrowser_mouse_down وbrowser_mouse_drag_xy وbrowser_mouse_move_xy وbrowser_mouse_up وbrowser_mouse_wheel. ويجب أن يدعم العميل والنموذج استخدام الصور المُعادة في الاستدلال البصري. مرجع الأدوات

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

أهم الأدوات أثناء اختبار المتصفح

تغطي مجموعة الأدوات الأساسية التنقل والتفاعل وجمع الأدلة. يجمع الجدول التالي أدوات الأتمتة الأساسية والتبويبات الواردة في README بحسب المهمة التي تكلّف بها الوكيل. قائمة الأدوات من Microsoft

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

تحتاج القدرات الإضافية إلى تفعيل صريح. يسرد جدول الخيارات vision وpdf وdevtools، كما توثّق أقسام الأدوات صراحةً config وnetwork وstorage وtesting:

• PDF: يضيف --caps=pdf الأداة browser_pdf_save.
• أدلة تصحيح الأخطاء: يتضمن --caps=devtools تتبّع التنفيذ والفيديو وتسجيل الإجراءات والتعليقات التوضيحية وتمييز العناصر واستئناف التنفيذ المتوقف مؤقتًا. فمثلًا، تبدأ browser_start_tracing تسجيل التتبّع وتنهيه browser_stop_tracing.
• شروط التحقق: يضيف --caps=testing الأدوات browser_generate_locator وbrowser_verify_element_visible وbrowser_verify_list_visible وbrowser_verify_text_visible وbrowser_verify_value. يحدّد شرط التحقق ما يجب أن يكون صحيحًا.
• محاكاة الشبكة: يضيف --caps=network الأدوات browser_network_state_set وbrowser_route وbrowser_route_list وbrowser_unroute لاختبار انقطاع الاتصال ومحاكاة الطلبات.
• التخزين: يضيف --caps=storage فحص ملفات تعريف الارتباط والتخزين المحلي وتخزين الجلسة وتعديلها، إلى جانب browser_storage_state وbrowser_set_storage_state.
• الإعدادات الفعلية: يضيف --caps=config الأداة browser_get_config.

هذه هي المجموعات الموثّقة في README، ولا يعني ذلك أن كل عميل يتيح كل أداة فورًا. إذا غابت أداة، فقارن قائمة أدوات الحزمة المثبتة والقدرات المفعّلة بما يورده README. الوصف الكامل للأدوات

ثلاث مهام عملية تستحق إسنادها إليه

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

التأكد من سلامة مسار إتمام الشراء

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

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

فحص الموقع بعد نشر التحديث

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

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

اختبار النماذج ببيانات تجريبية

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

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

مثال تطبيقي: مسار شراء كضيف يتعطل قبل الدفع

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

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

أعطِ وكيلك التعليمات التالية، واستبدل الرابط بين القوسين المربعين برابط التطبيق التجريبي لديك:

يجب ضبط العزل في إعداد الخادم باستخدام --isolated؛ فذكره في التعليمات وحدها لا يضبط الخادم.

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

نموذج توضيحي لتقرير الوكيل:

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

أين تظهر الحدود، وما الذي يستطيع وكيل المتصفح الوصول إليه؟

أضعف الفحوص هي التي تبدأ بهدف مبهم أو في بيئة غير آمنة. عبارة «افحص إتمام الشراء» تترك للوكيل اختراع معايير النجاح. أما «تأكد من أن بيانات الشحن الصحيحة تتيح الوصول إلى صفحة الدفع، دون إرسال دفعة» فمهمة يمكن مراجعة نتيجتها.

توقّع الحدود العملية التالية:

• بنية صفحة غامضة: تقل فائدة الوصف البنيوي حين تفتقر عناصر التحكم إلى أسماء أو تعتمد الواجهة بكثافة على عناصر الرسم. أنصح بإصلاح تسميات إمكانية الوصول في التطبيقات التي تملكها، والاستعانة بالأدلة البصرية حين لا تكفي البنية.
• حالة متغيرة: قد تؤدي إعادة العرض أو نافذة منبثقة أو عملية انتقال متأخرة إلى إبطال الافتراض التالي للوكيل. افحص الحالة الناتجة، وانتظر النص أو الانتقال المقصود قبل المتابعة.
• تعارض ملفات التعريف: لا يمكن لملف تعريف دائم أن يخدم أكثر من مثيل متصفح واحد في الوقت نفسه. توصي Microsoft بجلسات معزولة أو بقيم مختلفة لـ --user-data-dir للعملاء المتزامنين الذين يتشاركون مساحة عمل.
• اختلاف البيئة: يدعم تنفيذ Docker الوارد في README متصفح Chromium دون واجهة فقط. لا تفترض أن جميع خيارات المتصفح في جدول واجهة سطر الأوامر العام تعمل داخل تلك الحاوية.
• تغطية غير مكتملة: الوصول إلى صفحة لا يثبت سلامة كل قواعد التحقق أو المتصفحات أو الأجهزة أو النتائج في الواجهة الخلفية. كما أن لقطة الشاشة لا تثبت حفظ الطلب على نحو صحيح. هذه حدود سير العمل المقترح للفحص.

قيود ملفات التعريف وDocker موثقة في README من Microsoft.

تعامل مع صلاحية الوصول إلى المتصفح بوصفها وصولًا فعليًا. توضح Microsoft صراحةً أن Playwright MCP لا يشكّل حدًا أمنيًا عازلًا. يحتفظ ملف التعريف الافتراضي بحالة المتصفح، ويمكن لإضافة Chrome/Edge الاختيارية الاتصال بالتبويبات الحالية والجلسات التي سُجّل الدخول فيها. للمهام الواردة هنا، استخدم جلسة معزولة بلا ملفات تعريف ارتباط مستوردة أو اتصال بمتصفحك اليومي. ملفات التعريف وسلوك الإضافة

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

يستحق الوصول إلى الملفات العناية نفسها. يقيّد الإعداد الافتراضي الموثّق الوصول إلى الملفات ضمن جذور مساحات العمل، ويحظر التنقل إلى file://، بينما يخفف --allow-unrestricted-file-access هذه القيود. تصف Microsoft فحوص الملفات بأنها ضوابط وقائية، لا عزلًا أمنيًا محكمًا. والأهم أن browser_run_code_unsafe ينفّذ JavaScript داخل عملية الخادم وبنطاق الوصول المتاح لتلك العملية. اضبط استخدام هذه الأداة عبر أذونات العميل، وقيّد بيئة الخادم. مخطط الإعدادات والأدوات

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

أيّها تختار: Playwright MCP أم Chrome DevTools MCP أم Browserbase؟

اختر بحسب المهمة والمكان الذي تريد تشغيل المتصفح فيه. تتداخل هذه المنتجات في بعض الوظائف، لكنها لا تؤدي أدوارًا يمكن استبدال أحدها بالآخر ببساطة.

تتيح Microsoft أيضًا --cdp-endpoint للاتصال بنقطة اتصال متصفح. لذا فإن الواجهة التي يستخدمها الوكيل ومكان تشغيل المتصفح قراران منفصلان. Browserbase ليس اسمًا آخر لخادم Microsoft. ويتناول دليلنا إلى أفضل المتصفحات لوكلاء الذكاء الاصطناعي هذا الاختيار الأوسع.

حساب التكلفة وفكرتان لبناء خدمة مفيدة

المقارنة المفيدة للتكلفة هي بين طريقة الفحص الحالية لديك وسير العمل المؤتمت بكامل عناصره. مستودع Playwright MCP مرخّص بموجب Apache؛ لكن تثبيته لا يوفّر نموذج الوكيل أو موارد الحوسبة أو تجهيزات الاختبار أو المراجعة البشرية.

احسبها بأرقامك:

• قبل الأتمتة: ساعات الفحص اليدوي × تكلفة ساعة العمل شاملة الأعباء، مضافًا إليها أي اشتراكات اختبار حالية.
• بعد الأتمتة: استخدام الوكيل + البنية التحتية للمتصفح + المراجعة البشرية + صيانة تجهيزات الاختبار والاختبارات.

وللاستناد إلى سعر استضافة محدد، تعرض Browserbase خطة Developer بسعر $20 شهريًا يشمل 100 ساعة متصفح، ثم $0.12 لكل ساعة متصفح. هذه رسوم البنية التحتية للمتصفح، وليست التكلفة الكاملة لاختبار مسار شراء يجريه وكيل. أسعار Browserbase

الفرصة الأبرز: خدمة اختبار قبول الإصدارات

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

الإشارة إلى الطلب محدودة: تُظهر تقديرات الكلمات المفتاحية لدى DataForSEO للسوق الأمريكية باللغة الإنجليزية، التي جرى جلبها في أكتوبر 2026، 110 عمليات بحث شهريًا عن “automated browser testing” و10 عن “checkout testing”. تقيس هذه الأرقام عمليات البحث، لا المشترين. وهي تدعم تجربة خدمة محددة مع العملاء الحاليين قبل الاستثمار في منتج برمجي واسع النطاق.

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

الفرصة الثانية: أداة لفحص النماذج في بيئة الاختبار

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

تقدّر مجموعة بيانات DataForSEO نفسها، الخاصة بالسوق الأمريكية واللغة الإنجليزية، حجم البحث عن “website form testing” بـ 10 عمليات بحث شهريًا. هذه إشارة ضعيفة إذا أردت الاعتماد عليها وحدها لاكتساب العملاء. أوصي ببيع الخدمة إضافةً إلى صيانة المواقع، ثم التحقق من تكرار الطلب قبل بناء منتج مستقل.

التحدي هنا هو النظام المستقبِل. ظهور صفحة توحي بالنجاح لا يثبت وصول بيانات العميل المحتمل إلى وجهتها. يحتاج الحد الأدنى من المنتج القابل للتطبيق إلى نقطة نهاية للاختبار أو وسيلة أخرى مأذون بها للتحقق من الاستلام، إلى جانب أدلة المتصفح.

أسئلة شائعة أثناء الإعداد

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

إذا أردت سير عمل لفحص المتصفح مصممًا حول عملية إصدار التحديثات لديك، فنحن نبني وكلاء ذكاء اصطناعي لسير العمل في الشركات.