Playwright MCP واستهلاك التوكنات: نصائح الإعداد وهل هو آمن؟

يمنح Playwright MCP وكيل الذكاء الاصطناعي يدين حقيقيتين للتحكم في المتصفح، ويحتسب عليك تكلفة كل نظرة إلى الصفحة. وقد أُفيد بأن مهمة نموذجية واحدة تستهلك نحو 114,000 توكن عبر خادم MCP، قبل أن ينتهي الوكيل حتى من النقر. ويمكن للخادم نفسه أن يعمل داخل متصفح يحتفظ بجلساتك المسجّل فيها الدخول. لذلك فالسؤالان في مربع البحث مشروعان: كيف تبقي استهلاك التوكنات في Playwright MCP تحت السيطرة، وهل تشغيله آمن؟ فيما يلي ستجد الأعلام الدقيقة، وإعدادًا يمكنك لصقه، ومقارنة مع Playwright CLI، وحكمًا مباشرًا حول المخاطر.

💡 الإجابة المختصرة: أوقف لقطات الشاشة، واترك القدرات الاختيارية معطّلة، وشغّل ملفًا تعريفيًا معزولًا، ولا توجّه الوكيل أبدًا نحو حسابات لا تستطيع خسارتها. أما للجلسات البرمجية الطويلة، فالخيار الأرخص هو استخدام Playwright CLI.

لماذا يستهلك Playwright MCP التوكنات

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

تصل اللقطات بعد كل إجراء

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

قدّرت المقارنة التي أجراها فريق Playwright بنفسه، كما نقلتها عدة مقالات، أن المهمة النموذجية تستهلك نحو 114,000 توكن عند استخدام MCP، مقابل نحو 27,000 توكن عند استخدام CLI، أي بفارق يقارب 4 أضعاف. تعامل مع هذه الأرقام على أنها تقديرات تقريبية، لأن حجم الصفحة يغيّر كل شيء.

يُظهر بلاغ عام عن خطأ في Chrome DevTools MCP ذي الصلة نمط الفشل نفسه: إذ قفز السياق من نحو 31,000 إلى 242,000 توكن بعد نقرة واحدة على صفحة ثقيلة. أداة مختلفة والجاني واحد. شجرة الصفحة هي ما يرفع التكلفة، لا النقرة.

تُحمَّل تعريفات الأدوات قبل أن تكتب

يأتي كل خادم MCP مع مخططات أدواته، ويحمّلها المضيف في السياق عند بدء الجلسة. وقد قاس أحد الممارسين 28.1 ألف توكن، أي 14.1 بالمئة من النافذة، لتعريفات الأدوات عبر عدة خوادم في Claude Code. يحتوي Playwright MCP على قائمة طويلة من الأدوات، وتضيف كل قدرة اختيارية المزيد. كما أن بعض المضيفين يفرضون حدودًا، فمثلًا يحصر Cursor الأدوات في 40 أداة عبر كل الخوادم.

💡 نصيحة: إذا لم تكن تتصفح في هذه الجلسة، فعطّل خادم Playwright. فالخادم الخامل ما زال يكلّفك توكنات المخططات.

إعداد يُبقي السياق صغيرًا

الإعداد الافتراضي

هذه هي الكتلة القياسية لأي مضيف يقرأ قسم mcpServers:

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

نسخ الأمر النصي

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

أضفه إلى Claude Code

claude mcp add playwright -- npx @playwright/mcp@latest --headless --isolated

نسخ الأمر النصي

كل ما يأتي بعد الشرطتين المزدوجتين هو أمر تشغيل الخادم. شغّل /mcp داخل Claude Code للتأكد من الاتصال. وإذا تعذّر البدء، فتحقق من تثبيت Node.js وأن npx موجود في PATH.

إعداد أخف للبداية

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--isolated",
        "--image-responses=omit",
        "--allowed-origins=https://example.com;https://staging.example.com"
      ]
    }
  }
}

نسخ الأمر النصي

إليك ما يفعله كل علم:

• --headless يشغّل المتصفح دون نافذة. والافتراضي هو نافذة مرئية.
• --isolated يبقي الملف التعريفي في الذاكرة، فتختفي ملفات تعريف الارتباط عند انتهاء الجلسة.
• --image-responses=omit يزيل لقطات الشاشة من استجابات الأدوات.
• --allowed-origins يقبل مصادر مفصولة بفواصل منقوطة. استبدلها بنطاقاتك.

أعلام تقلّل استهلاك التوكنات

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

أسقط الصور أولًا

يقبل --image-responses القيم allow أو omit أو only، والافتراضي هو allow. في المهام الكثيفة بالنصوص، مثل قراءة جدول أسعار أو ملء نموذج، يمثّل omit توفيرًا مجانيًا. لكنه يخفّض الفاتورة ولا يحلّ المشكلة، فلقطة إمكانية الوصول تبقى أكبر تكلفة.

أما --snapshot-mode none فأداة فظة. استخدمه فقط حين يقود الوكيل الصفحة عبر نصوص برمجية، لأن النموذج الذي لا يرى الصفحة سيخمّن.

تقييد القدرات بالحدود

يفعّل العلم --caps مجموعات الأدوات الاختيارية: vision لإجراءات الفأرة المعتمدة على الإحداثيات، وpdf، وdevtools، وconfig، وnetwork، وstorage، وtesting. أبقها معطّلة حتى تحتاجها مهمة ما. وتفعّل مجموعة testing أدوات التحقق، لذا شغّلها فقط في الجلسات التي تكتب فيها اختبارات.

3 أخطاء شائعة

1. جلسات الماراثون. تتراكم اللقطات ولا تغادر أبدًا. ابدأ جلسة جديدة لكل مهمة.
2. لقطات شاشة لمهام نصية. إذا كانت الإجابة موجودة في الصفحة كنص، فالصورة عبء لا فائدة منه.
3. النقر على ما كان يمكن كتابته كنص برمجي. اطلب من الوكيل كتابة اختبار Playwright مرة واحدة، ثم شغّله باستخدام npx playwright test. يطبع التشغيل بضعة أسطر بدلًا من عشرات الأشجار.

Playwright MCP مقابل Playwright CLI

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

أرقام معلنة

تأتي هذه الأرقام من تحليلات لاختبار فريق Playwright المعياري ومن ممارسين، وليست من اختبار أجريته بنفسي، لذا قِس مهمتك بنفسك قبل أن تبني سير عملك على أساسها.

متى يبقى MCP الخيار الأفضل

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

قاعدة بسيطة تعمل جيدًا: اختبر باستخدام MCP، ثم حوّل التدفق إلى نص برمجي وشغّله من CLI.

هل Playwright MCP آمن فعلًا؟

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

حقن الأوامر من صفحات الويب

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

ما يساعد:

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

الملفات التعريفية المسجّلة للدخول ترفع المخاطر

يحتفظ المتصفح افتراضيًا بملف تعريفي دائم على القرص، ويحدد --user-data-dir مكانه، فتبقى ملفات تعريف الارتباط بين الجلسات. أما الخيار --extension فيذهب أبعد، إذ يتصل بنسخة Edge أو Chrome مفتوحة لديك بالفعل. ووكيل مخترَق في هذا الوضع يتصرف باسمك في كل موقع سجلت الدخول إليه. وفي أي شيء يمسّ تسجيل الدخول، استخدم --isolated مع حساب مؤقت.

لماذا لا تُعد مرشّحات المصادر جدرانًا

يقبل --allowed-origins و--blocked-origins قوائم مفصولة بفواصل منقوطة، والافتراضي يسمح بكل شيء. وهما يقلّصان الضوضاء والطلبات الشاردة، لكنهما ليسا حدًّا أمنيًا. وينطبق الأمر نفسه على --secrets، الذي يشير إلى ملف dotenv لإخفاء السلاسل الحساسة في الاستجابات: مفيد، لكنه ليس ضمانًا. واترك --allow-unrestricted-file-access معطّلًا، لأنه يسمح بعناوين file:// والوصول خارج مساحة عملك.

قائمة التشديد للاستخدام اليومي

الملف التعريفي المعزول أولًا

• ابدأ بـ --isolated حتى لا يبقى شيء.
• تحتاج إلى تسجيل دخول؟ أنشئ حسابًا تجريبيًا، واحفظ حالته، وحمّلها باستخدام --storage-state.
• أبقِ كلمات المرور خارج أوامرك النصية. استخدم --secrets مع ملف dotenv حتى تُخفى القيم.
• ثبّت إصدارًا محددًا بدلًا من @latest، حتى لا يغيّر أي إصدار جديد سلوكه دون علمك.

Docker دون كشف المنافذ

لمتصفح مؤقت لا يلمس ملفك التعريفي على المضيف، يقدّم README هذا الأمر:

docker run -i --rm --init --pull=always mcr.microsoft.com/playwright/mcp

نسخ الأمر النصي

أما لخدمة HTTP طويلة الأمد، فيعرض مثال README نشر المنفذ 8931 وربط --host 0.0.0.0 داخل الحاوية. انشره على loopback فقط، حتى لا تصل إليه الأجهزة الأخرى على شبكتك:

docker run -d -i --rm --init --pull=always \
  --entrypoint node --name playwright -p 127.0.0.1:8931:8931 \
  mcr.microsoft.com/playwright/mcp \
  /app/cli.js --headless --browser chromium --no-sandbox --port 8931 --host 0.0.0.0

نسخ الأمر النصي

يعطّل العلم --no-sandbox صندوق Chromium الرملي الخاص بالمتصفح، لذا تصبح الحاوية حدّك. ولا تربط مجلدات مضيف حساسة بداخلها.

💡 الحكم: شغّل Playwright MCP كما تستعين بمقاول في منزلك، لا كفرد من العائلة. امنحه غرفة واحدة (ملفًا تعريفيًا معزولًا)، ومهمة قصيرة، ومن يراقبه.

كيف تستخدم Sonnet 5 على PicassoIA

يصلح النموذج اللغوي كعينين ثانيتين رخيصتين لمراجعة إعداد MCP. وClaude Sonnet 5 على PicassoIA مُدرج لمهام البرمجة، ما يناسب مراجعة الإعداد جيدًا.

1. افتح صفحة Claude Sonnet 5 على PicassoIA.
2. الصق إعداد MCP الخاص بك مع وضع عناصر نائبة بدل القيم الحقيقية، واوصف المهمة في جملة واحدة، مثل "اقرأ جدول أسعار مرة في الأسبوع".
3. اسأل: "أي الأعلام يمكنني حذفها لتقليل التوكنات، وأي المخاطر تبقى؟"
4. اطلب التدفق نفسه كنص اختبار Playwright، حتى تشغّله من CLI بدلًا من دفع ثمن اللقطات في كل خطوة.
5. تحقق من كل علم يقترحه مقابل README الخاص بـ Playwright MCP قبل أن تضيفه. فالنماذج تختلق خيارات أحيانًا.

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

نماذج أخرى تستحق التجربة في المهمة نفسها:

• GPT 5.6 Sol للمهام البرمجية الأثقل.
• Gemini 3.5 Flash للفحوص السريعة منخفضة المخاطر.
• Kimi K2.6 للتخطيط بأسلوب الوكلاء.

💡 تحذير: لا تلصق أبدًا ملفات .env أو توكنات API أو ملفات تعريف الارتباط في أي مربع دردشة. استبدلها بعناصر نائبة أولًا.

ولا يقتصر MCP على المتصفحات وحدها. فلدى PicassoIA موصّل خاص به لـ Claude يعرض توليد الصور وتعديلها وتوليد الفيديو عبر عدد قليل من الأدوات، ما يُبقي عبء المخططات صغيرًا مقارنة بخادم يعرض قائمة طويلة من أدوات المتصفح.

أنشئ صورك الخاصة بعد ذلك

تقرأ وكلاء المتصفح الويب، لكن مقالاتك ومنتجاتك ومنشوراتك ما زالت تحتاج إلى صور تلفت الانتباه من أول نظرة. ويضع Picasso IA نماذج صور واقعية كالصور الفوتوغرافية على بعد نقرة، فتنتقل من فكرة إلى مرئي نهائي في دقائق.

ابدأ باستخدام PicassoIA Image للحصول على مسودة أولى سريعة، ثم شغّل الأمر النصي نفسه عبر Seedream 5 Pro وقارن النتائج جنبًا إلى جنب.

صيغة للأمر النصي تعمل جيدًا: الشخص + المكان + الضوء + العدسة. مثلًا:

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

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