المهارات webapp-testing
📦

webapp-testing

آمن ⚡ يحتوي على سكربتات⚙️ الأوامر الخارجية📁 الوصول إلى نظام الملفات

اختبار تطبيقات الويب باستخدام أتمتة Playwright

متاح أيضًا من: Azeem-2,7Spade,7Spade,ZhanlinCui,ArtemisAI,davila7,anthropics,DYAI2025,ComposioHQ,Cam10001110101,AutumnsGrove

يتطلب اختبار تطبيقات الويب المحلية إدارة الخوادم وأتمتة تفاعلات المتصفح. توفر هذه المهارة نصوص Playwright ومساعدين للخوادم لتبسيط سير عمل اختبار الواجهة الأمامية.

يدعم: Claude Codex Code(CC)
🥉 76 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "webapp-testing". اكتشاف جميع العناصر التفاعلية على صفحة تسجيل الدخول

النتيجة المتوقعة:

  • تم العثور على 3 حقول إدخال: email (type=email)، password (type=password)، remember (type=checkbox)
  • تم العثور على 2 زر: 'Sign In' (submit)، 'Forgot Password?' (link)
  • تم حفظ لقطة الشاشة إلى /tmp/login_page.png تعرض تخطيط النموذج

استخدام "webapp-testing". اختبار إرسال النموذج مع تشغيل الخادم

النتيجة المتوقعة:

  • تم بدء الخادم على المنفذ 3000
  • تم الانتقال إلى http://localhost:3000/login
  • تم ملء حقل البريد الإلكتروني بـ 'test@example.com'
  • تم ضغط زر تسجيل الدخول
  • تم التحقق من التنقل إلى /dashboard
  • تم إيقاف الخادم بشكل نظيف

التدقيق الأمني

آمن
v1 • 2/25/2026

Static analysis detected 42 patterns but all are false positives. LICENSE.txt URLs are standard Apache 2.0 license references. 'Weak cryptographic algorithm' findings incorrectly flagged license text and argparse code. subprocess usage in with_server.py is legitimate for server management. SKILL.md code blocks are documentation examples, not executable code. Skill is safe for publication.

3
الملفات التي تم فحصها
410
الأسطر التي تم تحليلها
4
النتائج
1
إجمالي عمليات التدقيق
مشكلات منخفضة المخاطر (1)
scripts/with_server.py:69-74
Subprocess execution with shell=True
with_server.py uses subprocess.Popen with shell=True to start development servers. This is expected behavior for a server management helper script that needs to support commands with cd and && operators.

عوامل الخطر

⚡ يحتوي على سكربتات
لم يتم تسجيل أي مواقع محددة
⚙️ الأوامر الخارجية (2)
scripts/with_server.py:69-74 scripts/with_server.py:88
📁 الوصول إلى نظام الملفات (1)
SKILL.md:71
تم تدقيقه بواسطة: claude

درجة الجودة

45
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

اختبار مكونات واجهة المستخدم لمطوري الواجهة الأمامية

أتمتة اختبار مكونات React أو Vue عن طريق بدء خادم التطوير والتحقق من سلوك واجهة المستخدم باستخدام نصوص Playwright.

اختبار التكامل الكامل

تشغيل خادم API الخلفي وخادم التطوير الأمامي في وقت واحد، ثم تنفيذ اختبارات من النهاية إلى النهاية على التطبيق المتكامل.

اكتشاف الانحدار المرئي

التقاط لقطات شاشة لحالات تطبيق الويب ومقارنتها مرئيًا لاكتشاف التغييرات غير المقصودة في واجهة المستخدم أثناء التطوير.

جرّب هذه الموجهات

اكتشاف عناصر HTML الأساسية 
استخدم مهارة اختبار تطبيقات الويب لفحص ملف HTML محلي والعثور على جميع عناصر الأزرار. انتقل إلى الملف، انتظر تحميل الصفحة، ثم سرد جميع الأزرار مع محتوى النص الخاص بها.
أتمتة خادم التطوير 
بدء خادم تطوير React على المنفذ 3000 باستخدام with_server.py، ثم كتابة نص Playwright الذي ينتقل إلى التطبيق، ويضغط على زر تسجيل الدخول، ويتأكد من ظهور لوحة المعلومات.
اختبار تكامل متعدد الخوادم 
استخدم with_server.py لبدء خلفية Python Flask على المنفذ 5000 وواجهة Vite الأمامية على المنفذ 5173. اكتب اختبارًا يرسل نموذجًا على الواجهة الأمامية ويتأكد من ظهور البيانات في استجابة الخلفية.
جلسة تصحيح الأخطاء المرئي 
انتقل إلى تطبيق ويب محلي، انتظر حتى networkidle، التقط لقطة شاشة للصفحة الكاملة إلى /tmp/debug.lua، واستخرج محتوى HTML للصفحة. حدد جميع حقول الإدخال وتسمياتAssociated الخاصة بها.

أفضل الممارسات

  • انتظر دائمًا حالة networkidle قبل فحص تطبيقات الويب الديناميكية
  • استخدم مساعد with_server.py كصندوق أسود - قم بتشغيل --help أولاً لفهم الاستخدام
  • التقط لقطات شاشة قبل فحص DOM للحصول على سياق تصحيح الأخطاء المرئي

تجنب

  • فحص DOM قبل انتظار networkidle على التطبيقات الثقيلة بـ JavaScript
  • قراءة كود المصدر النصي في السياق عندما يوفر --help معلومات استخدام كافية
  • استخدام روابط file:// للتطبيقات الديناميكية التي تتطلب خادمًا قيد التشغيل

الأسئلة المتكررة

هل أحتاج إلى تثبيت Playwright بشكل منفصل؟
نعم، قم بتثبيت Playwright باستخدام 'pip install playwright' وتشغيل 'playwright install' لتنزيل ملفات المتصفح الثنائية قبل استخدام هذه المهارة.
كيف أختبر ملف HTML ثابت بدون خادم؟
استخدم روابط file:// مباشرة في نص Playwright الخاص بك. انتقل إلى 'file:///path/to/file.html' بدون استخدام مساعد with_server.py.
هل يمكنني اختبار عدة خوادم في وقت واحد؟
نعم، يدعم with_server.py عدة أزواج من --server و --port. يبدأ كل خادم بشكل متسلسل وينتظر جاهزيته قبل بدء الخادم التالي.
ماذا لو استغرق خادمي أكثر من 30 ثانية للبدء؟
استخدم وسيطة --timeout لزيادة وقت الانتظار. مثال: --timeout 60 لمدة 60 ثانية لكل خادم.
لماذا استخدام الوضع بدون رأس لاختبار المتصفح؟
الوضع بدون رأس يعمل بشكل أسرع ويعمل في البيئات بدون شاشة. أزل headless=True إذا كنت بحاجة إلى مراقبة سلوك المتصفح مرئيًا.
كيف أقوم بتصحيح الاختبارات الفاشلة؟
استخدم page.snapshot() لالتقاط حالة الصفحة في نقاط الفشل. تمكين تسجيل وحدة التحكم في المتصفح لرؤية أخطاء JavaScript. قم التشغيل بـ headless=False لمراقبة سلوك المتصفح مرئيًا.

تفاصيل المطور

المؤلف

sickn33

الترخيص

Apache-2.0

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/webapp-testing

مرجع

main

بنية الملفات

📁 scripts/

📄 with_server.py

📄 LICENSE.txt

📄 SKILL.md