/ الدليل / الملعب / Playwright
← كل الخوادم ↗ GitHub
● رسمي microsoft ⚡ فوري

Playwright

بواسطة microsoft · microsoft/playwright-mcp

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

Playwright MCP الرسمي من Microsoft. فتح المتصفحات (Chromium و Firefox و WebKit)، التنقل والنقر والكتابة وملء النماذج واعتراض الشبكة. مبني على شجرة إمكانية الوصول بحيث يقرأ Claude المحتوى الدلالي مباشرة — لا يلزم OCR.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

playwright.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "playwright",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "playwright": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add playwright -- npx -y @playwright/mcp@latest

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: Playwright

اختبار دخان نشر الإنتاج في 60 ثانية

👤 مهندسو DevOps ومديرو الإصدارات ⏱ ~5 min intermediate

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

المتطلبات الأساسية
  • بيانات اعتماد حساب الاختبار (استخدم حسابًا مخصصًا للضمان الجودة وليس مستخدمًا حقيقيًا) — قم بتخزينها في متغيرات البيئة أو في مطالبتك نفسها
الخطوات
  1. افتح الصفحة الرئيسية وتحقق من تحميلها
    افتح https://app.example.com. تحقق من أن الصفحة تعيد 200 وأن H1 يقول 'Welcome' وأن زر تسجيل الدخول مرئي.✓ تم النسخ
    → نجاح/فشل مع لقطة شاشة إذا فشل
  2. قم بتشغيل تدفق تسجيل الدخول → الإجراء الأساسي → تسجيل الخروج
    سجل الدخول باسم [email protected] / [password]. ثم أنشئ مشروعًا جديدًا يسمى 'smoke-test-<timestamp>'. ثم احذفه. ثم سجل الخروج.✓ تم النسخ
    → ينجح كل خطوة؛ إذا فشل أي منها، لقطة شاشة + DOM dump
  3. تشخيص أي فشل
    إذا فشلت خطوة ما، التقط لقطة الصفحة وأخبرني بما هو مختلف عن خط الأساس العامل.✓ تم النسخ
    → عنصر محدد أو طلب شبكة معطل

النتيجة: الثقة (أو الذعر السريع) بشأن نشرك في أقل من دقيقة، دون الحاجة إلى مجموعة E2E كاملة.

المزالق
  • بيانات الاختبار المرمزة تتراكم وتلوث الإنتاج — استخدم دائمًا طوابع زمنية فريدة في بيانات الاختبار وقم بالتنظيف في نهاية التدفق
  • جلسة المتصفح تستمر بين الأشواط، مما يخفي الأخطاء التي تحتاج إلى حالة نظيفة — قم بالتشغيل مع --browser-context: incognito أو امسح ملفات تعريف الارتباط بين الأشواط
اجمعها مع: sentry

تدقيق موقعك على 5 عروض عرض وتقرير الأعطال

👤 مهندسو Frontend والمصممون ⏱ ~15 min intermediate

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

الخطوات
  1. افتح الصفحة على 5 عروض عرض (320 و 375 و 768 و 1024 و 1440)
    افتح https://example.com على viewports 320×568 و 375×812 و 768×1024 و 1024×768 و 1440×900. خذ لقطة شاشة كاملة الصفحة لكل منها.✓ تم النسخ
    → 5 لقطات شاشة محفوظة
  2. كشف الفيضان الأفقي في كل عرض
    لكل عرض، اذكر أي عناصر حيث scrollWidth > viewportWidth. هذه تسبب التمرير الأفقي وتبدو مكسورة.✓ تم النسخ
    → قائمة CSS selectors المخالفة لكل عرض
  3. اقترح إصلاحات
    لكل عنصر فيضان، احصل على CSS المحسوب وقترح أصغر إصلاح (ربما max-width أو overflow-wrap أو تعديل breakpoint).✓ تم النسخ
    → diff قابل للتنفيذ لكل عنصر

النتيجة: قائمة إصلاحات مصنفة بأولويات مع selectors محددة، مناسبة لتقديمها كـ PR واحد.

المزالق
  • المستخدمون الحقيقيون لديهم أشرطة التمرير (15px على Windows)، والتي لا يحاكيها المتصفح بدون رأس بشكل افتراضي — الاختبار مع --browser=chromium و --browser=webkit؛ العروض مهمة أكثر مما تعتقد
اجمعها مع: chrome-devtools · filesystem

كشط البيانات التي تتطلب مصادقة

👤 محللو البيانات والباحثون ⏱ ~20 min advanced

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

المتطلبات الأساسية
  • بيانات اعتماد صحيحة للهدف — استخدم حساب الخدمة وليس حسابك الشخصي أبدًا
الخطوات
  1. سجل الدخول
    افتح https://target.example.com/login. ملء حقل البريد الإلكتروني باستخدام [email] وكلمة المرور بـ [password]. قدّم.✓ تم النسخ
    → جلسة مؤكدة — هبطت على عنوان لوحة التحكم
  2. انتقل إلى صفحة البيانات
    انقر على قسم التقارير. انتظر جدول البيانات للعرض.✓ تم النسخ
    → الجدول مرئي في DOM
  3. استخرج البيانات
    اقرأ كل صف من جدول التقرير. إرجاع كـ JSON مع كل عمود كمفتاح.✓ تم النسخ
    → مجموعة بيانات كاملة كـ JSON

النتيجة: بيانات منظمة لم تكن تستطيع الحصول عليها بـ HTTP scraper بسيط، جاهزة للإسقاط في جدول بيانات أو قاعدة بيانات.

المزالق
  • تم تمكين MFA وكسر التدفق — قم بإعداد كلمة مرور خاصة بالتطبيق إذا كانت الخدمة تدعمها، أو استخدم رمز API طويل الأجل بدلاً من ذلك
  • تظهر Captchas بعد عمليات تسجيل دخول متعددة — استخدم سياق متصفح دائم (--user-data-dir) بحيث يتم إعادة استخدام ملفات تعريف الارتباط ولا تؤدي إلى تفعيل بوابات captcha
اجمعها مع: postgres · filesystem

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

playwright + filesystem

كشط موقع، حفظ محتوى كل صفحة على القرص لـ RAG في وضع عدم الاتصال

قم بالزحف إلى docs.stripe.com بدءًا من /api، احفظ كل صفحة كملف Markdown تحت ./knowledge/stripe/{path}.md.✓ تم النسخ
playwright + chrome-devtools

اختبار الأداء + الاختبار الوظيفي في تدفق واحد — تحقق من تحميل الصفحة بشكل صحيح وسريع

افتح صفحة الهبوط الخاصة بي. تحقق من H1، ثم التقط آثار Lighthouse وأخبرني ما إذا كانت LCP أقل من ثانيتين.✓ تم النسخ
playwright + sentry

إعادة إنتاج خطأ الإنتاج المبلغ عنه في Sentry بإعادة تشغيل breadcrumbs المستخدم

Sentry issue WEB-3a91 يقول أن المستخدم نقر على X ثم Y ثم تحطم. أعد إنتاج هذا التسلسل بالضبط في Playwright وتأكد.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
browser_navigate url: str التنقل إلى عنوان — الإجراء الأول لأي تدفق 1 page load
browser_snapshot احصل على عرض منظم لجميع العناصر التفاعلية (روابط وأزرار ومدخلات) free
browser_click ref: str (from snapshot) | selector: str انقر على عنصر يتم تحديده بواسطة snapshot ref أو CSS selector free
browser_type ref, text, submit?: bool ملء حقل الإدخال؛ مع submit:true يضغط أيضًا على Enter free
browser_screenshot fullPage?: bool, path?: str التقط الأدلة البصرية — التصحيح أو المراجعة disk space
browser_evaluate script: str تشغيل JS عشوائي في سياق الصفحة — استخدم بحذر، فضّل الأدوات المحددة free
browser_network_requests فحص ما يحمله الصفحة؛ مفيد للعثور على نقاط نهاية API المخفية free

التكلفة والحدود

تكلفة التشغيل

حصة API
مجاني — يعمل محليًا، فقط موارد جهازك
الرموز لكل استدعاء
اللقطات هي 500-3000 tokens حسب تعقيد الصفحة
التكلفة المالية
مجاني. تحميل ملفات المتصفح مرة واحدة (~300MB Chromium).
نصيحة
استخدم browser_snapshot بدلاً من لقطات الشاشة — إنه أرخص بـ 100 مرة من حيث tokens وأكثر موثوقية للعمل عليه من Claude.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: مرر عبر متغيرات البيئة؛ لا تضع أبدًا بيانات اعتماد الإنتاج الحقيقية في المطالب
نقل البيانات الخارجي: تتصل المتصفحات بأي عناوين URL تتنقل إليها. لا توجد بيانات telemetry لـ Microsoft.

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

Element not found / TimeoutError

لم تنته الصفحة من التصيير. أضف انتظارًا صريحًا: browser_wait_for(selector) أو browser_wait_for(text='...') قبل الإجراء.

تحقق: خذ لقطة أولاً لترى ما هو فعلاً على الصفحة
Browser fails to launch on Linux

قم بتثبيت deps OS: npx playwright install-deps. شائع في Docker — استخدم صورة Playwright الرسمية كقاعدة.

تحقق: playwright --version
All navigations fail with net::ERR_*

مشكلة الحماية الرملية للشبكة. قم بالتشغيل باستخدام --no-sandbox إذا كنت في Docker، أو تحقق من جدار الحماية / الخادم الوكيل.

Site detects automation and shows captcha

استخدم --browser-type=firefox (أقل كشفًا من Chromium بدون رأس)، أو قم بالتشغيل مع الرأس إذا كان ذلك مناسبًا. بعض المواقع مقاومة للروبوتات عن قصد — احترم ذلك.

البدائل

Playwright مقابل البدائل

البديلمتى تستخدمهاالمقايضة
puppeteer MCPتحتاج فقط إلى Chromium وتريد API أبسط قليلاًChromium فقط؛ لا Firefox/WebKit؛ مجتمع أصغر الآن
Firecrawl MCPتحتاج فقط لاستخراج المحتوى، وليس التفاعل مع الصفحةمستضاف (يكلف أرصدة) لكن بدون بنية تحتية؛ لا يمكن النقر عبر التدفقات
Browserbase MCPتحتاج إلى تشغيل البرامج الثابتة للمتصفح من سياق serverless (بدون متصفح محلي)خدمة مستضافة بأسعار في الدقيقة؛ رائعة للوكلاء في الإنتاج

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills