كيفية استخدام Claude Code مع Playwright MCP: دليل الإعداد الكامل

ما هو Playwright MCP؟

يمنح خادم Playwright MCP أي عميل Model Context Protocol قوى أتمتة المتصفح. بدلاً من طلب ذكاء اصطناعي “النظر إلى” البكسل، يعيد الخادم لقطات إمكانية وصول منظمة للصفحة، ويتفاعل النموذج مع العناصر من خلال معرّف المراجع. هذا يجعل الحلقة سريعة وحتمية وخالية من تكاليف نموذج الرؤية. يعمل مع VS Code و Cursor و Windsurf و Claude Desktop و Claude Code وأي عميل MCP آخر.

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

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

قبل أن تبدأ، تأكد من أن لديك:

• Node.js 18 أو أحدث مثبت
• Claude Code مثبت وقمت بتسجيل الدخول (قم بتشغيل claude في محطة العمل الخاصة بك للتحقق)
• محطة عمل تشعر بالراحة عند العمل بها

هذا كل شيء - يقوم Playwright MCP بتنزيل ملفات ثنائية المتصفح الخاصة به عند التشغيل الأول.

هل أنت مستعد لتنمية عملك؟

ابدأ تجربتك المجانية اليوم وشاهد النتائج في غضون أيام.

طلب عرض توضيحي تسجيل الدخول

إعداد تكامل Playwright MCP

يتطلب ربط Playwright MCP مع Claude Code أمرًا واحدًا فقط. اتبع هذه الخطوات لتوصيله:

إضافة خادم Playwright MCP

افتح محطة العمل الخاصة بك وقم بتشغيل:

claude mcp add playwright npx @playwright/mcp@latest

يسجل هذا خادم MCP جديد يسمى playwright الذي يطلقه Claude Code عبر npx كلما احتاج إلى أدوات المتصفح. يقوم الاستدعاء الأول بتنزيل الحزمة وملفات ثنائية المتصفح المطلوبة، لذا أعط لها دقيقة في المرة الأولى.

التحقق من الاتصال

ابدأ جلسة Claude Code جديدة وقم بتشغيل أمر /mcp:

claude

/mcp

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

اختياري: استخدم تكوين JSON بدلاً من ذلك

إذا كنت تفضل تعديل ملفات التكوين مباشرة، يمكن إضافة نفس الخادم إلى ~/.claude.json (أو .mcp.json محدود النطاق للمشروع) باستخدام تنسيق MCP القياسي:

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

أعد تشغيل Claude Code بعد تعديل الملف وسيظهر الخادم في /mcp.

تفاعلك الأول مع أتمتة المتصفح في Claude Code

مع توصيل الخادم، يمكن لموجهاتك الآن قيادة متصفح حقيقي. جرب التفاعل القانوني الأول من وثائق Playwright:

تنقل إلى https://demo.playwright.dev/todomvc وأضف بعض عناصر todo.

سيفتح Claude Code المتصفح ويطلب لقطة إمكانية وصول للصفحة ويحدد موقع الإدخال من خلال مرجع العنصر ويكتب كل todo ويؤكد النتيجة لك في محطة العمل.

تنبيه حول المتصفح الذي يفتح: بشكل افتراضي، يطلق هذا Chromium في الوضع مع الرأس. لتغييره، أضف علامات إلى args في تكوين MCP الخاص بك وأعد تشغيل Claude Code: --headless لإخفاء النافذة، أو --browser=firefox|webkit|msedge لتبديل المحركات.

كيف تعمل لقطات إمكانية الوصول

عند تشغيل أداة Playwright MCP، تعيد لقطة منظمة للصفحة - أدوار العناصر والمحتوى النصي ومعرّفات المراجع - بدلاً من البكسل. يقرأ Claude اللقطة ويستخدم مراجع مثل ref=e5 للكتابة في مربع النص أو ref=e10 لتبديل خانة الاختيار. لا دفع بكسل، لا محددات CSS هشة - فقط حالة صفحة منظمة يمكن للنموذج أن يفكر فيها.

انضم إلى نشرتنا الإخبارية

احصل على أحدث النصائح والاتجاهات والعروض مجانًا.

عنوان البريد الإلكتروني

اشترك

الإمكانيات الأساسية التي يمكنك استخدامها من Claude Code

بمجرد توصيل Playwright MCP، تعمل نفس الموجهات التي ستعطيها لزميل في Claude Code:

• التنقل: “انتقل إلى example.com” و “رجع” و “أعد تحميل الصفحة”.
• النقر والكتابة: “انقر على زر الإرسال” و “ملء حقل البريد الإلكتروني باستخدام test@example.com ”.
• لقطات الشاشة: “التقط لقطة شاشة لقسم التسعير”.
• لوحة المفاتيح والماوس: اضغط على المفاتيح والتحويم والسحب والإفلات.
• علامات التبويب والحوارات: افتح علامات تبويب جديدة وقم بالتبديل بينها وقبول الإشعارات أو رفضها.
• مراقبة الشبكة: “قائمة الطلبات المقدمة منذ تحميل الصفحة”.
• التنبيهات: “التنبيه على نقطة نهاية /api/users للعودة بمصفوفة فارغة”.
• حالة التخزين: احفظ جلسات المصادقة في ملف وأعد تحميلها لاحقًا.

بالنسبة لسير العمل الذي يحتاج إلى أكثر من استدعاء أداة واحد، يمكنك طلب Claude Code لاستدعاء browser_run_code وتنفيذ سكريبت Playwright مضمن - مفيد للتأكيدات واستخراج البيانات أو أي شيء يستفيد من بضعة أسطر من التعليمات البرمجية الضرورية.

خيارات التكوين المفيدة

لدى Playwright MCP حفنة من العلامات التي تستحق المعرفة. أضفها إلى مصفوفة args في التكوين الخاص بك (أو إلى أمر claude mcp add بعد --).

وضع بدون رأس

يعمل المتصفح مع الرأس بشكل افتراضي حتى تتمكن من مشاهدة ما يحدث. للتشغيل بدون رأس - مفيد لـ CI أو أصداف بعيدة - مرر --headless:

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

اختر متصفحًا

قم بتبديل المحركات باستخدام علم --browser. القيم المدعومة هي chrome و firefox و webkit و msedge:

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

أنماط الملف الشخصي

يدعم Playwright MCP ثلاثة أنماط ملف شخصي:

• دائم (افتراضي): تستمر حالة تسجيل الدخول والملفات بين الجلسات.
• معزول: مرر --isolated لبدء كل جلسة نظيفة، اختياريًا بذور باستخدام --storage-state.
• ملحق المتصفح: مرر --extension للإرفاق بعلامات تبويب المتصفح الموجودة لديك عبر ملحق Playwright MCP Bridge.

خادم HTTP مستقل

إذا كنت بحاجة إلى تشغيل متصفح مع رأس في مكان ما بدون عرض متصل (أو من عامل IDE)، فقم بتشغيل الخادم بشكل منفصل والاتصال عبر HTTP.

افتح محطة عمل ثانية - اتركها تعمل طوال الجلسة - وابدأ الخادم هناك:

npx @playwright/mcp@latest --port 8931

اترك تلك المحطة مفتوحة. هذا ما يكشف المتصفح على localhost:8931 حتى تتمكن من عرض الجلسة في المتصفح الخاص بك ولديك Claude Code شيء للاتصال به. إغلاق المحطة يوقف الخادم.

ثم، في المحطة حيث تقوم بتشغيل Claude Code، وجهه إلى نقطة النهاية بتحديث التكوين الخاص بك:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

سير العمل العملي يستحق السرقة

بمجرد توصيل Playwright MCP، يمكن لـ Claude Code التعامل مع سقالات الاختبار الشاملة والتكاثرات الخلل والتحقق من التنبيهات والتنبيهات والاختبارات الدخانية - أي شيء ينطوي على قيادة متصفح والإبلاغ عودة.

شيئان يجعلان تلك الموجهات تعمل بالفعل في الممارسة. أولاً، CLAUDE.md في جذر المشروع الخاص بك يوثق عنوان URL المرحلة والبيانات المرحلة والاتفاقيات التي يجب أن يتبعها الوكيل - بدونها، “تسجيل الدخول كمستخدم العرض التوضيحي” ليس له شيء يرسيه. ثانيًا، إذا كنت تريد Claude Code لسحب السياق من المشاكل أو التذاكر، فقم بتوصيل خادم MCP ثانٍ لذلك - خادم GitHub MCP هو الاختيار الشائع. تخطي كليهما و Claude Code سوف (بشكل معقول) يسأل ما هي المشكلة #482.

لماذا جعل Claude Code مع Playwright MCP؟

عدد قليل من الأسباب التي تجعل هذا الجمع يصعب التغلب عليه:

• محطة عمل أصلية: كل شيء يحدث حيث تعمل بالفعل. لا تبديل السياق إلى منفذ اختبار منفصل.
• إمكانية الوصول أولاً: تتفوق اللقطات على لقطات الشاشة من حيث السرعة والموثوقية، وتعمل بدون نموذج رؤية.
• Playwright الحقيقي تحت الغطاء: أي شيء يمكنك القيام به مع Playwright في الكود، يمكنك القيام به هنا - متعدد المتصفحات والتنبيهات وحالة التخزين والمزيد.
• قابل للتركيب مع خوادم MCP الأخرى: كومة Playwright جنبًا إلى جنب مع GitHub أو قاعدة البيانات أو خادم MCP المراقبة الخاص بك و Claude Code يمكنه نقل العمل من طرف إلى طرف عبر جميعها.
• معيار مفتوح: MCP محمول. نفس خادم Playwright يعمل في Cursor و VS Code و Windsurf و Claude Desktop إذا قمت بتبديل العملاء.

أضف الخادم وقم بتشغيل /mcp للتأكد، وموجهك التالي “اختبر صفحة تسجيل الدخول” يصبح جلسة متصفح حقيقية - مدفوعة بواسطة Claude Code ومراقبة (أو لا) في الوضع مع الرأس وقابلة للتحقق من خلال لقطات إمكانية الوصول.