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

webapp-testing

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

Testen Sie Web-Apps mit Playwright-Automatisierung

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

Manuelles Testen von Web-Anwendungen ist langwierig und fehleranfällig. Dieses Toolkit bietet Playwright-basierte Automatisierung zum Testen lokaler Web-Apps, Erfassen von Screenshots und Debuggen von Frontend-Verhalten.

يدعم: Claude Codex Code(CC)
⚠️ 68 ضعيف
1

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "webapp-testing". Testen Sie meine React-App auf Port 5173. Finden Sie alle Schaltflächen und erstellen Sie einen Screenshot.

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

  • Navigiert zu http://localhost:5173 und auf Netzwerk-Idle gewartet
  • 4 Schaltflächen gefunden: Submit, Cancel, Save Changes, Delete Account
  • Vollständiger Seiten-Screenshot gespeichert unter /tmp/page_discovery.png

استخدام "webapp-testing". Debuggen Sie das Login-Formular in meiner lokalen App. Erfassen Sie Konsolenfehler.

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

  • Server auf Port 3000 gestartet
  • 3 Konsolenfehler erfasst: Uncaught ReferenceError, TypeError in auth.js
  • Protokolle gespeichert unter /tmp/login-debug.log
  • Screenshot des Fehlerzustands gespeichert unter /tmp/login-error.png

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

مخاطر منخفضة
v5 • 1/16/2026

Legitimate web testing toolkit using Playwright. Static findings are false positives: LICENSE.txt cryptographic warnings are standard legal text, subprocess usage is user-controlled for local dev servers, markdown backticks in SKILL.md are documentation formatting. No data exfiltration, credential theft, or persistence mechanisms detected.

7
الملفات التي تم فحصها
814
الأسطر التي تم تحليلها
5
النتائج
5
إجمالي عمليات التدقيق
مشكلات متوسطة المخاطر (1)
scripts/with_server.py:69-74
Shell execution with user-controlled commands
with_server.py uses subprocess.Popen with shell=True to execute server commands provided via CLI. This is intentional for supporting compound shell commands. Commands are user-provided for local development.

عوامل الخطر

⚡ يحتوي على سكربتات (1)
scripts/with_server.py:1-106
🌐 الوصول إلى الشبكة (1)
examples/console_logging.py:5
📁 الوصول إلى نظام الملفات (1)
examples/element_discovery.py:37-38
⚙️ الأوامر الخارجية (1)
scripts/with_server.py:69-74
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

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

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

Testen Sie React-, Vue-, Svelte-Apps

Automatisieren Sie Interaktionstests für Single-Page-Anwendungen während der Entwicklung.

Erstellen Sie End-to-End-Test-Suites

Erstellen Sie automatisierte UI-Tests, die Formularübermittlungen und Benutzerabläufe überprüfen.

Debuggen Sie Frontend-Probleme aus der Ferne

Erstellen Sie Screenshots und Konsolenprotokolle, um JavaScript-Fehler zu diagnostizieren.

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

Entwicklungsserver starten 
Verwenden Sie den webapp-testing Skill, um einen Entwicklungsserver auf Port 5173 mit npm run dev zu starten, und führen Sie dann ein Playwright-Skript aus, um zu überprüfen, ob die Startseite korrekt geladen wird.
UI-Elemente finden 
Verwenden Sie webapp-testing, um zu http://localhost:3000 zu navigieren, auf Netzwerk-Idle zu warten, und listen Sie dann alle Schaltflächen, Links und Eingabefelder auf der Seite auf.
Bug-Screenshot erstellen 
Starten Sie den Entwicklungsserver auf Port 5173, navigieren Sie zum Dashboard, und erstellen Sie einen vollständigen Seiten-Screenshot, wenn die Seite geladen wird. Speichern Sie den Screenshot unter /tmp/dashboard.png.
Debug-Konsolenfehler 
Verwenden Sie webapp-testing, um http://localhost:5173 zu besuchen, alle Konsolenmeldungen zu erfassen, und speichern Sie sie unter /tmp/console.log zum Debugging.

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

  • Warten Sie immer auf den networkidle-Status, bevor Sie dynamische Web-Anwendungen inspizieren
  • Verwenden Sie das with_server.py-Hilfsskript, um den Server-Lebenszyklus automatisch zu verwalten
  • Führen Sie Skripte zuerst mit dem Flag --help aus, um die verfügbaren Optionen zu verstehen

تجنب

  • Inspizieren Sie keine DOM-Elemente, bevor die Seite fertig geladen ist
  • Vergessen Sie nicht, den Browser nach Abschluss der Automatisierung zu schließen
  • Verwenden Sie keine hartcodierten Selektoren, ohne sie zuerst dynamisch zu entdecken

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

Welche Browser werden unterstützt?
Dieser Skill verwendet standardmäßig Chromium im Headless-Modus. Playwright unterstützt auch Firefox und WebKit.
Kann ich Produktions-Websites testen?
Dieser Skill ist für lokale Entwicklungsserver konzipiert. Das Testen von Produktions-Websites kann gegen Nutzungsbedingungen verstoßen.
Wie führe ich mehrere Server gleichzeitig aus?
Verwenden Sie mehrere --server und --port Flags. Beispiel: --server npm run dev --port 5173 --server python api.py --port 3000.
Sind meine Daten sicher bei der Verwendung dieses Skills?
Ja. Dieser Skill läuft lokal auf Ihrem Computer. Er greift nur auf Dateien und Server zu, die Sie explizit angeben.
Warum erfasst mein Screenshot nicht die gesamte Seite?
Stellen Sie sicher, dass Sie full_page=True im Screenshot-Aufruf verwenden und vor der Aufnahme auf networkidle warten.
Wie unterscheidet sich dies von Selenium oder Puppeteer?
Playwright bietet bessere Zuverlässigkeit, schnellere Ausführung und integrierte Unterstützung für moderne Web-Features.

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

المؤلف

ArtemisAI

الترخيص

Complete terms in LICENSE.txt

المستودع

https://github.com/ArtemisAI/code-execution-with-MCP/tree/main/skills/webapp-testing

مرجع

main

بنية الملفات

📁 examples/

📄 console_logging.py

📄 element_discovery.py

📄 static_html_automation.py

📁 scripts/

📄 with_server.py

📄 LICENSE.txt

📄 SKILL.md