playwright-skill

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

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

أنماط المحددات المستندة إلى الأدوار والمحددات الميسرة (تجنب هشاشة CSS/XPath)
حجب الشبكة وأنماط محاكاة الاستجابات
الإعدادات المسبقة لإعادة استخدام حالة المصادقة عبر الاختبارات
التقاط التتبع + سير عمل تصحيح الأخطاء عبر عارض التتبع
إرشادات التوازي والتقسيم
تخفيف عدم الاستقرار: التأكيدات الموجهة للويب أولاً، سياسة إعادة المحاولات

عرض مباشر

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

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

0/0

التثبيت

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

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

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

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

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

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

الخطوات

وصف التدفق

اكتب اختبار Playwright لتسجيل الدخول على staging.example.com: البريد الإلكتروني، كلمة المرور، توقع عنوان لوحة التحكم. استخدم المحددات المستندة إلى الأدوار فقط.✓ تم النسخ

→ اختبار باستخدام getByRole, getByLabel؛ بدون .class أو xpath
إضافة إعداد مسبق لإعادة استخدام المصادقة

حول تسجيل الدخول إلى إعداد مسبق قابل لإعادة الاستخدام بحيث تتخطى الاختبارات الأخرى تسجيل الدخول.✓ تم النسخ

→ إعداد مسبق مستند إلى storageState + globalSetup
ضمان الاستقرار

قم بتدقيق الاختبار للبحث عن الأنماط المضادة لـ waitFor*؛ انتقل إلى التأكيدات الموجهة للويب أولاً.✓ تم النسخ

→ expect(locator).toBeVisible() بدلاً من waitForSelector

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

المزالق

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

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

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

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

الخطوات

محاكاة نقطة النهاية

محاكاة GET /api/orders للإرجاع إلى مصفوفة فارغة، ثم أكد على أن الحالة الفارغة تُعرض.✓ تم النسخ

→ route.fulfill مع نص JSON؛ تأكيد على عنصر الحالة الفارغة
تنويع الاستجابات لكل اختبار

حدد معاملات المحاكاة: اختبار واحد لخطأ 500، واحد للمهلة الزمنية، واحد للبيانات الجزئية.✓ تم النسخ

→ ثلاثة اختبارات تشترك في مساعد

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

المزالق

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

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

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

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

الخطوات

التقاط التتبع عند إعادة المحاولة

قم بتكوين التتبع: 'on-first-retry' في playwright.config.ts.✓ تم النسخ

→ Config diff
تحليل التتبع

قم بتنزيل trace.zip من تشغيل CI الفاشل؛ أرشدني خلال الاختلاف عن التشغيل الناجح.✓ تم النسخ

→ فرق ملموس في توقيت الشبكة/DOM
الإصلاح

بناءً على التتبع، اقترح الحد الأدنى من التغييرات لتحقيق الاستقرار.✓ تم النسخ

→ تغيير محدد للمحدد أو التأكيد، وليس نوم عام

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

المزالق

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

التركيبات

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

playwright-skill-2 + seo-audit-skill

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

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

الأدوات

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

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

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

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

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

الأمان

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

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

نقل البيانات الخارجي: تختبر الاختبارات عنوان URL المستهدف. لا توجد استدعاءات لجهات خارجية من المهارة.

يحتوي storageState.json على ملفات تعريف الجلسة. تجاهله وعدم تحميله كمصدر CI علنًا.

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

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

الاختبار غير مستقر في 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.

البدائل