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

playwright-skill

بواسطة testdino-hq · testdino-hq/playwright-skill

مهارة Claude Code تُعلّم أفضل ممارسات Playwright — المحددات، وحجب الشبكة، وعارض التتبع، والمعالجة المتوازية — من فريق TestDino.

تجهز مهارة TestDino Playwright الخاص بـ Claude Code بأنماط الاختبار الموجهة نحو Playwright: المحددات المستندة إلى الأدوار، وحجب الشبكة، والإعدادات المسبقة، والتقاط التتبع، والمعالجة المتوازية، وإعادة المحاولات، وإعادة استخدام حالة المصادقة. مبنية على تجربة منصة الاختبار لدى TestDino، فإنها توجه توليد الكود في Claude نحو اختبارات End-to-End القابلة للصيانة.

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

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

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

عرض مباشر

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

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

التثبيت

اختر العميل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كيفية كتابة أول اختبار End-to-End قابل للصيانة

👤 المطورون الذين يضيفون Playwright إلى مشروع للمرة الأولى ⏱ ~30 min beginner

متى تستخدمه: لديك عنوان URL للمرحلة المرحلية وتدفق تسجيل دخول؛ تريد اختبارًا قويًا واحدًا قبل التوسع.

المتطلبات الأساسية
  • تثبيت المهارة — git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill
  • تثبيت @playwright/test — npm init playwright@latest
الخطوات
  1. وصف التدفق
    اكتب اختبار Playwright لتسجيل الدخول على staging.example.com: البريد الإلكتروني، كلمة المرور، توقع عنوان لوحة التحكم. استخدم المحددات المستندة إلى الأدوار فقط.✓ تم النسخ
    → اختبار باستخدام getByRole, getByLabel؛ بدون .class أو xpath
  2. إضافة إعداد مسبق لإعادة استخدام المصادقة
    حول تسجيل الدخول إلى إعداد مسبق قابل لإعادة الاستخدام بحيث تتخطى الاختبارات الأخرى تسجيل الدخول.✓ تم النسخ
    → إعداد مسبق مستند إلى storageState + globalSetup
  3. ضمان الاستقرار
    قم بتدقيق الاختبار للبحث عن الأنماط المضادة لـ waitFor*؛ انتقل إلى التأكيدات الموجهة للويب أولاً.✓ تم النسخ
    → expect(locator).toBeVisible() بدلاً من waitForSelector

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

المزالق
  • Claude يصل إلى page.waitForTimeout — أخبر المهارة بشكل صريح: لا انتظارات عشوائية، استخدم التأكيدات الموجهة للويب أولاً

محاكاة API خلفي لاختبار حالات حدية في الواجهة الأمامية

👤 مهندسو الواجهة الأمامية الذين يختبرون حالات فارغة/خطأ/تحميل ⏱ ~25 min intermediate

متى تستخدمه: لا يمكنك بسهولة وضع الخلفية الحقيقية في كل حالة.

الخطوات
  1. محاكاة نقطة النهاية
    محاكاة GET /api/orders للإرجاع إلى مصفوفة فارغة، ثم أكد على أن الحالة الفارغة تُعرض.✓ تم النسخ
    → route.fulfill مع نص JSON؛ تأكيد على عنصر الحالة الفارغة
  2. تنويع الاستجابات لكل اختبار
    حدد معاملات المحاكاة: اختبار واحد لخطأ 500، واحد للمهلة الزمنية، واحد للبيانات الجزئية.✓ تم النسخ
    → ثلاثة اختبارات تشترك في مساعد

النتيجة: تغطية الحالات الحدية دون لمس الخلفية.

المزالق
  • محاكاة تسرب عبر الاختبارات — قم بالإعداد في beforeEach أو نطاق الإعداد المسبق، وليس في hook على مستوى الوحدة

تصحيح اختبار غير مستقر باستخدام عارض التتبع

👤 المهندسون الذين يرتبون مجموعة اختبارات غير مستقرة في CI ⏱ ~45 min intermediate

متى تستخدمه: يمر الاختبار محليًا، ويفشل بنسبة 5% من الوقت في CI.

الخطوات
  1. التقاط التتبع عند إعادة المحاولة
    قم بتكوين التتبع: 'on-first-retry' في playwright.config.ts.✓ تم النسخ
    → Config diff
  2. تحليل التتبع
    قم بتنزيل trace.zip من تشغيل CI الفاشل؛ أرشدني خلال الاختلاف عن التشغيل الناجح.✓ تم النسخ
    → فرق ملموس في توقيت الشبكة/DOM
  3. الإصلاح
    بناءً على التتبع، اقترح الحد الأدنى من التغييرات لتحقيق الاستقرار.✓ تم النسخ
    → تغيير محدد للمحدد أو التأكيد، وليس نوم عام

النتيجة: اختبار مستقر مع جذر معلَّق.

المزالق
  • معالجة عدم الاستقرار بزيادة المهل الزمنية — معظم حالات عدم الاستقرار هي شروط تنافس مخفية — عادة ما يكشف التتبع عن await مفقود

التركيبات

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

playwright-skill-2 + seo-audit-skill

Playwright يلتقط الصفحات، ويعمل تدقيق SEO على HTML المعروض للتطبيقات الثقيلة بـ JS

استخدم Playwright للمصادقة والتقاط الصفحات المسجلة الدخول، ثم قم بتشغيل seo-audit على كل منها.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
Locator patterns - كتابة محددات جديدة 0
Network stubbing - اختبار حالات حدية في الواجهة الأمامية 0
Fixtures & auth reuse - توسيع مجموعة الاختبارات بعد 5 اختبارات 0
Trace analysis trace.zip تصحيح حالات عدم الاستقرار 0
Parallelism & sharding - مجموعات تعمل لأكثر من 5 دقائق في CI 0

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

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

حصة API
بلا
الرموز لكل استدعاء
توليد الاختبار: رموز 3-8k
التكلفة المالية
مجاني
نصيحة
قم بإنشاء اختبار واحد يدويًا، احفظه كنموذج، واجعل Claude يتبع النموذج للآخرين.

الأمان

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

تخزين بيانات الاعتماد: بيانات اعتماد الاختبار في .env (عبر dotenv). لا تلتزم بـ storageState.json بمصادقة الإنتاج.
نقل البيانات الخارجي: تختبر الاختبارات عنوان URL المستهدف. لا توجد استدعاءات لجهات خارجية من المهارة.

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

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

الاختبار غير مستقر في CI فقط

تفعيل التتبع: 'on-first-retry' وتحليل التتبع من المحاولة الفاشلة.

تحقق: npx playwright show-trace trace.zip
getByRole لا يجد عنصرًا موجودًا بوضوح

قد يفتقد العنصر إلى اسم يمكن الوصول إليه. استخدم مفتش Playwright لرؤية الدور/الاسم المحسوب.

تحقق: npx playwright test --ui
الإعداد المسبق لتسجيل الدخول يعمل محليًا، يفشل في CI

قد تحتاج CI إلى --headed=false وتثبيت المتصفح الصريح. قم بتشغيل npx playwright install --with-deps في CI.

البدائل

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

البديلمتى تستخدمهاالمقايضة
Cypressتفضل تجربة Cypress المطور DX وتصحيح الأخطاء في المتصفح الحقيقيفلسفة محدد مختلفة؛ توازي أقل

المزيد

الموارد

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

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

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