webapp-testing
Testen lokaler Webanwendungen mit Playwright
Également disponible depuis: ZhanlinCui,AutumnsGrove,Azeem-2,DYAI2025,Cam10001110101,7Spade,7Spade,sickn33,ComposioHQ,davila7,ArtemisAI
Das Testen lokaler Webanwendungen erfordert Browser-Automierung, Screenshots und UI-Verifizierung. Dieses Toolkit bietet Playwright-Skripte für Frontend-Tests, DOM-Inspektion und Konsolenprotokollierung.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "webapp-testing". Take a screenshot of the app and list all buttons
Résultat attendu:
- Screenshot saved to /tmp/inspect.png
- Found 5 buttons:
- [0] Submit
- [1] Cancel
- [2] Settings
- [3] Help
- [4] [hidden]
Utilisation de "webapp-testing". Debug why form submission is not working
Résultat attendu:
- Console logs captured:
- [error] Cannot read property 'submit' of undefined
- [error] Form validation failed: email required
- [warning] Deprecation: Use .closest() instead of .parents()
- Screenshot saved: /mnt/user-data/outputs/form_debug.png
Audit de sécurité
SûrOfficial Anthropic skill with minimal attack surface. Uses subprocess and socket APIs only for local server management. All file operations restricted to /tmp and /mnt/user-data/outputs. No external network calls.
Facteurs de risque
⚡ Contient des scripts (1)
🌐 Accès réseau (1)
📁 Accès au système de fichiers (2)
⚙️ Commandes externes (1)
Score de qualité
Ce que vous pouvez construire
UI-Funktionalität verifizieren
Testen Sie, dass Buttons, Formulare und Navigation in Ihrer lokalen Entwicklungsumgebung korrekt funktionieren.
Automatisierte UI-Regressionstests
Erstellen Sie wiederholbare Playwright-Skripte zur Verifizierung des Frontend-Verhaltens bei Codeänderungen.
Konsolenfehler erfassen
Führen Sie Browser-Automatisierung aus, um Konsolenprotokolle zu erfassen und JavaScript-Fehler in lokalen Apps zu identifizieren.
Essayez ces prompts
Machen Sie einen Screenshot der laufenden App unter localhost:5173 und speichern Sie ihn unter /tmp/inspect.png.
Finden Sie alle Buttons, Links und Eingabefelder auf der Seite unter localhost:3000 und listen Sie sie mit ihrem Text oder Label auf.
Navigieren Sie zur App, erfassen Sie alle Konsolennachrichten und speichern Sie sie in einer Protokolldatei zum Debuggen.
Starten Sie den Backend-Server auf Port 3000 und das Frontend auf Port 5173, und führen Sie dann element_discovery.py aus, um zu verifizieren, dass der Full-Stack funktioniert.
Bonnes pratiques
- Verwenden Sie das gebündelte with_server.py-Skript zur automatischen Server-Lebenszyklusverwaltung
- Warten Sie immer auf den networkidle-Zustand vor der Inspektion dynamischer Webanwendungen
- Schließen Sie Browser-Instanzen ordnungsgemäß nach Abschluss der Automatisierung
Éviter
- Inspizieren Sie das DOM nicht, bevor Sie auf networkidle bei dynamischen Anwendungen gewartet haben
- Lassen Sie keine Browser-Prozesse nach Skriptabschluss laufen
- Überspringen Sie nicht die Verwendung von sync_playwright für einfache Automatisierungsaufgaben
Foire aux questions
Welche Browser werden unterstützt?
Was ist die maximale Testdauer?
Kann ich entfernte Produktions-URLs testen?
Werden meine Testdaten sicher gespeichert?
Warum schlägt meine DOM-Inspektion fehl?
Wie unterscheidet sich dies von Selenium?
Détails du développeur
Structure de fichiers