Compétences webapp-testing
📦

webapp-testing

Risque faible ⚙️ Commandes externes📁 Accès au système de fichiers

Tester les applications web avec l'automatisation Playwright

Également disponible depuis: 7Spade,DYAI2025,davila7,ArtemisAI,7Spade,Azeem-2,anthropics,ComposioHQ,Cam10001110101,AutumnsGrove

Le test local d'applications web nécessite une automatisation de navigateur fiable sans configuration manuelle. Cette boîte à outils fournit des scripts Playwright et des utilitaires de gestion de serveur pour rationaliser les flux de travail de test frontend.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "webapp-testing". Discover all interactive elements on localhost:5173

Résultat attendu:

  • Found 12 buttons: [0] Submit, [1] Cancel, [2] Login...
  • Found 8 links: - Dashboard -> /dashboard, - Profile -> /profile...
  • Found 5 input fields: - email (email), - password (password)...
  • Screenshot saved to /tmp/page_discovery.png

Utilisation de "webapp-testing". Capture console logs during user flow

Résultat attendu:

  • Console: [log] App initialized
  • Console: [warning] Deprecated API usage
  • Console: [error] Failed to load resource: net::ERR_CONNECTION_REFUSED
  • Captured 15 console messages. Logs saved to outputs/console.log

Audit de sécurité

Risque faible
v1 • 2/24/2026

Static analysis flagged 38 patterns, but manual review confirms all HIGH-severity findings are false positives. The 'weak cryptographic algorithm' detections are scanner errors on argparse code. Shell backtick findings are Markdown documentation formatting. Subprocess usage in with_server.py is intentional server management functionality requiring explicit CLI invocation. Hardcoded localhost URLs and temp file writes are expected for local testing toolkit.

5
Fichiers analysés
310
Lignes analysées
3
résultats
1
Total des audits
Problèmes à risque faible (1)
scripts/with_server.py:69-74
Subprocess with shell=True
with_server.py uses subprocess.Popen with shell=True to start development servers. This is intentional functionality for a server management helper script. Commands are passed via CLI arguments, requiring explicit user invocation. Risk is mitigated by design - users explicitly provide the server commands.

Facteurs de risque

⚙️ Commandes externes (2)
scripts/with_server.py:69-74 scripts/with_server.py:88-89
📁 Accès au système de fichiers (2)
examples/console_logging.py:31-32 examples/element_discovery.py:37-38
Audité par: claude

Score de qualité

45
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
88
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Tests de régression du frontend

Automatiser la vérification des composants UI après les modifications du code pour détecter les changements cassants avant le déploiement.

Validation du serveur de développement

Démarrer automatiquement les serveurs backend et frontend, exécuter les tests d'intégration, puis nettoyer les ressources.

Débogage des logs de console

Capturer et analyser la sortie de la console du navigateur pour identifier les erreurs et avertissements JavaScript pendant les flux utilisateur.

Essayez ces prompts

Navigation de base dans la page 
Naviguez vers mon application React locale sur localhost:3000, attendez que la page se charge complètement, et prenez une capture d'écran de la page d'accueil.
Découverte d'éléments 
Visitez mon application web et listez tous les boutons, liens et champs de formulaire sur la page actuelle avec leur contenu texte et leurs attributs.
Capture des logs de console 
Exécutez mon script d'automatisation tout en capturant tous les messages de la console du navigateur. Sauvegardez les logs dans un fichier et rapportez les erreurs ou avertissements trouvés.
Test d'intégration complet 
Démarrez mon serveur backend sur le port 8000 et le frontend sur le port 5173, puis exécutez mon script de test Playwright qui se connecte, navigue vers le tableau de bord et vérifie que les éléments clés sont présents. Nettoyez les serveurs après les tests.

Bonnes pratiques

  • Attendez toujours l'état networkidle avant d'interagir avec les pages dynamiques pour vous assurer que le JavaScript est complètement exécuté
  • Utilisez le script helper with_server.py pour gérer le cycle de vie du serveur au lieu de démarrer et arrêter manuellement les serveurs
  • Exécutez d'abord les scripts avec le flag --help pour comprendre les options disponibles avant de personnaliser la logique d'automatisation

Éviter

  • N'inspectez pas le DOM ou ne prenez pas de captures d'écran avant d'attendre networkidle sur les applications dynamiques
  • Évitez de lire le code source du script dans la fenêtre de contexte - utilisez la documentation --help et invoquez comme des outils en boîte noire
  • N'utilisez pas de timeouts fixes comme wait_for_timeout quand des sélecteurs spécifiques peuvent être attendus avec wait_for_selector

Foire aux questions

Comment tester une application nécessitant une authentification ?
Incluez les étapes de connexion dans votre script Playwright avant de naviguer vers les pages protégées. Vous pouvez stocker les identifiants dans des variables d'environnement ou utiliser la fonctionnalité d'état de stockage de Playwright pour réutiliser les sessions authentifiées.
Puis-je tester plusieurs serveurs simultanément ?
Oui, with_server.py prend en charge plusieurs paires --server et --port. Chaque serveur démarre en séquence, attend la disponibilité, puis exécute votre commande de test après que tous les serveurs sont prêts.
Pourquoi mes tests échouent-ils quand la page a du contenu dynamique ?
Assurez-vous d'appeler page.wait_for_load_state('networkidle') après la navigation. Pour des éléments spécifiques, utilisez page.wait_for_selector() pour attendre que les éléments apparaissent avant d'interagir.
Comment capturer des captures d'écran du navigateur pour le débogage visuel ?
Utilisez page.screenshot(path='filename.png', full_page=True) pour capturer la page entière. Les captures d'écran sont sauvegardées au chemin spécifié et peuvent être consultées après l'exécution du test.
Quels navigateurs sont pris en charge pour les tests ?
Playwright prend en charge Chromium, Firefox et WebKit. Cette compétence utilise Chromium par défaut en mode headless pour la fiabilité. Vous pouvez modifier les scripts pour utiliser d'autres navigateurs si nécessaire.
Comment installer les dépendances requises ?
Installez Playwright avec pip install playwright, puis exécutez playwright install pour télécharger les binaires du navigateur. Assurez-vous que Python 3.7 ou supérieur est disponible dans votre environnement.

Détails du développeur

Auteur

ZhanlinCui

Licence

Complete terms in LICENSE.txt

Dépôt

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/webapp-testing

Réf

main

Structure de fichiers

📁 examples/

📄 console_logging.py

📄 element_discovery.py

📄 static_html_automation.py

📁 scripts/

📄 with_server.py

📄 SKILL.md