/ الدليل / الملعب / playwright-skill
← كل الخوادم ↗ GitHub
● مجتمع lackeyjb ⚡ فوري

playwright-skill

بواسطة lackeyjb · lackeyjb/playwright-skill

Claude يكتب وينفذ سكريبتات Playwright مخصصة عند الطلب — متصفح مرئي، نتائج حقيقية — لا حاجة لحفظ مكتبة اختبار معدة مسبقاً.

بدلاً من شحن وظائف مساعدة ثابتة، تعلم هذه المهارة Claude كتابة كود Playwright مخصص لكل مهمة وتنفيذه عبر run.js. يعمل المتصفح بشكل مرئي بشكل افتراضي حتى تتمكن من المراقبة. تحمل مستندات Playwright API على الطلب حتى يكون لدى Claude السياق دون استهلاك موارد النافذة.

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

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

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

عرض مباشر

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

playwright-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "playwright-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "playwright-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "playwright-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "playwright-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "playwright-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/lackeyjb/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "playwright-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/lackeyjb/playwright-skill",
          "~/.claude/skills/playwright-skill"
        ]
      }
    }
  }
}

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

claude mcp add playwright-skill -- git clone https://github.com/lackeyjb/playwright-skill ~/.claude/skills/playwright-skill

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

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

استخدامات عملية: playwright-skill

كتابة اختبار smoke لتدفق التسجيل عند الطلب

👤 المطورون الذين يريدون اختباراً دون كتابة Playwright يدويّاً ⏱ ~10 min beginner

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

المتطلبات الأساسية
  • Node + Playwright قابلة للتثبيت — ستقوم المهارة بتثبيت المتصفحات عبر npx playwright install إذا كانت مفقودة
الخطوات
  1. وصف التدفق
    استخدم مهارة playwright. افتح localhost:3000، قم بالتسجيل باستخدام [email protected] / Pass123!، تحقق من أننا وصلنا إلى /dashboard.✓ تم النسخ
    → Claude يكتب سكريبت Playwright، ينفذه بشكل مرئي، يبلغ عن النجاح/الفشل
  2. تصحيح الأخطاء بشكل تفاعلي
    فشل عند إدخال البريد الإلكتروني — أضف لقطة شاشة قبل الخطأ مباشرة.✓ تم النسخ
    → التشغيل التالي يلتقط ويعيد لقطة الشاشة

النتيجة: اختبار smoke لمرة واحدة يمكنك حفظه اختياريّاً كمواصفة دائمة.

المزالق
  • المحددات المختارة هشة (مثل nth-child) — اطلب من Claude تفضيل محددات role/label
اجمعها مع: filesystem

فحص سريع للعرض المستجيب عبر 3 طرق عرض

👤 مطورو الواجهة الأمامية الذين يتحققون من تغيير التخطيط ⏱ ~5 min beginner

متى تستخدمه: قمت بتغيير الرأس وتريد رؤية كيفية العرض على سطح المكتب والجهاز اللوحي والجوال.

الخطوات
  1. طلب لقطات الشاشة
    استخدم playwright لأخذ لقطة شاشة localhost:3000 بعرض 1440 و768 و390. احفظها.✓ تم النسخ
    → تم حفظ 3 PNGs وإعادة المسارات

النتيجة: ثلاث لقطات شاشة للمراجعة البصرية السريعة.

المزالق
  • لقطات الشاشة لا تنتظر الخطوط/الصور — أضف انتظار networkidle قبل الالتقاط
اجمعها مع: filesystem

التركيبات

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

playwright-skill + filesystem

احفظ مواصفات الاختبار ولقطات الشاشة جنباً إلى جنب مع الكود الذي تختبره

اكتب اختبار smoke واحفظه تحت tests/e2e/signup.spec.js.✓ تم النسخ
playwright-skill + github

نفذ الاختبار، أوقف سير العمل، أنشر النتائج على PR

نفذ مواصفة playwright ضد معاينة النشر، ثم أنشر النتائج كتعليق على PR #42.✓ تم النسخ
playwright-skill + ios-simulator-skill

Playwright للويب، ios-simulator-skill للتطبيقات الأصلية — استخدم كليهما في جلسة اختبار متعددة المنصات

نفذ تدفق playwright الويب وتدفق ios-simulator الأصلي بالتسلسل، أبلغ عن كليهما.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
Custom Playwright script generation task description أي طلب أتمتة متصفح 0
run.js executor script path بعد توليد السكريبت 0
Headed/headless toggle flag CI مقابل تصحيح الأخطاء المحلي 0

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

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

حصة API
لا شيء
الرموز لكل استدعاء
1-5k لكل تشغيل اختبار، اعتماداً على كمية مرجع Playwright التي يسحبها Claude
التكلفة المالية
مجاني — تحتاج فقط إلى Node + متصفحات Playwright على القرص
نصيحة
حافظ على التعليمات مركزة؛ لا تطلب 'اختبر كل شيء' في مرة واحدة.

الأمان

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

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

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

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

'browserType.launch: Executable doesn't exist'

قم بتشغيل npx playwright install chromium

تحقق: npx playwright --version
Selector fails intermittently

انتقل إلى محددات role/label؛ أضف انتظارات await expect(...).toBeVisible().

Script hangs

من المحتمل أن Claude نسي إغلاق المتصفح. أخبره دائماً بالالتفاف في try/finally مع await browser.close().

البدائل

playwright-skill مقابل البدائل

البديلمتى تستخدمهاالمقايضة
playwright MCPتريد أدوات MCP منظمة (click, fill, snapshot) بدلاً من توليد الكودMCP يجرد الكود؛ هذه المهارة تكتب سكريبتات حقيقية يمكنك إعادة استخدامها
Puppeteer skills / chrome-devtools MCPسير عمل Chrome فقط، ميزات بروتوكول DevToolsأقل عبر المتصفحات

المزيد

الموارد

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

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

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