playwright-skill

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

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

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

عرض مباشر

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

playwright-skill.replay ▶ جاهز

0/0

التثبيت

مستودع المؤلف · وثائق Claude Skills الرسمية

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

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

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

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

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

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

Node + Playwright قابلة للتثبيت — ستقوم المهارة بتثبيت المتصفحات عبر npx playwright install إذا كانت مفقودة

الخطوات

وصف التدفق

استخدم مهارة playwright. افتح localhost:3000، قم بالتسجيل باستخدام [email protected] / Pass123!، تحقق من أننا وصلنا إلى /dashboard.✓ تم النسخ

→ Claude يكتب سكريبت Playwright، ينفذه بشكل مرئي، يبلغ عن النجاح/الفشل
تصحيح الأخطاء بشكل تفاعلي

فشل عند إدخال البريد الإلكتروني — أضف لقطة شاشة قبل الخطأ مباشرة.✓ تم النسخ

→ التشغيل التالي يلتقط ويعيد لقطة الشاشة

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

المزالق

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

اجمعها مع: filesystem

العثور على جميع الروابط المعطلة في موقع التوثيق

👤 محافظو التوثيق ⏱ ~15 min intermediate

متى تستخدمه: تشك في تحلل الروابط بعد إعادة التنظيم.

الخطوات

وصف الزحف

استخدم playwright للزحف إلى https://docs.example.com حتى عمق 2، سجل كل رابط، وأعد 404s.✓ تم النسخ

→ Claude يكتب زاحف BFS، ينفذه، ينتج قائمة

النتيجة: قائمة مفرزة من الروابط الميتة لإصلاحها.

المزالق

الزاحف يضرب الموقع بقوة — حدد التزامن بـ 2-3 وأضف تأخيرات صغيرة

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

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

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

الخطوات

طلب لقطات الشاشة

استخدم 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	أي طلب أتمتة متصفح
run.js executor	script path	بعد توليد السكريبت
Headed/headless toggle	flag	CI مقابل تصحيح الأخطاء المحلي

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

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

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

الأمان

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

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

نقل البيانات الخارجي: فقط للمواقع التي تزورها الاختبارات

السكريبتات المولدة تعمل بصلاحيات العملية المحلية الكاملة — راجع قبل التشغيل ضد عناوين URL للإنتاج.

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

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

'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().

البدائل