Habilidades webapp-testing
📦

webapp-testing

Riesgo bajo ⚙️ Comandos externos📁 Acceso al sistema de archivos

Prueba de Aplicaciones Web con Automatización Playwright

También disponible en: 7Spade,DYAI2025,davila7,ArtemisAI,7Spade,Azeem-2,anthropics,ComposioHQ,Cam10001110101,AutumnsGrove

Las pruebas de aplicaciones web locales requieren automatización de navegador confiable sin configuración manual. Este toolkit proporciona scripts de Playwright y utilidades de gestión de servidores para optimizar los flujos de trabajo de pruebas frontend.

Soporta: Claude Codex Code(CC)
🥉 73 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "webapp-testing". Descubre todos los elementos interactivos en localhost:5173

Resultado esperado:

  • Se encontraron 12 botones: [0] Enviar, [1] Cancelar, [2] Iniciar sesión...
  • Se encontraron 8 enlaces: - Dashboard -> /dashboard, - Perfil -> /profile...
  • Se encontraron 5 campos de entrada: - email (email), - password (password)...
  • Captura de pantalla guardada en /tmp/page_discovery.png

Usando "webapp-testing". Capturar logs de consola durante el flujo de usuario

Resultado esperado:

  • Consola: [log] Aplicación inicializada
  • Consola: [warning] Uso de API obsoleta
  • Consola: [error] Error al cargar recurso: net::ERR_CONNECTION_REFUSED
  • Se capturaron 15 mensajes de consola. Logs guardados en outputs/console.log

Auditoría de seguridad

Riesgo bajo
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
Archivos escaneados
310
Líneas analizadas
3
hallazgos
1
Auditorías totales
Problemas de riesgo bajo (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.

Factores de riesgo

⚙️ Comandos externos (2)
scripts/with_server.py:69-74 scripts/with_server.py:88-89
📁 Acceso al sistema de archivos (2)
examples/console_logging.py:31-32 examples/element_discovery.py:37-38
Auditado por: claude

Puntuación de calidad

45
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
88
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

Pruebas de Regresión Frontend

Automatiza la verificación de componentes de UI después de cambios en el código para detectar cambios disruptivos antes del despliegue.

Validación del Servidor de Desarrollo

Inicia automáticamente servidores backend y frontend, ejecuta pruebas de integración y luego limpia los recursos.

Depuración de Logs de Consola

Captura y analiza la salida de la consola del navegador para identificar errores y advertencias de JavaScript durante los flujos de usuario.

Prueba estos prompts

Navegación Básica de Página 
Navega a mi aplicación React local en localhost:3000, espera a que la página se cargue completamente y toma una captura de pantalla de la página de inicio.
Descubrimiento de Elementos 
Visita mi aplicación web y lista todos los botones, enlaces y campos de formulario en la página actual con su contenido de texto y atributos.
Captura de Logs de Consola 
Ejecuta mi script de automatización capturando todos los mensajes de la consola del navegador. Guarda los logs en un archivo y reporta cualquier error o advertencia encontrado.
Prueba de Integración Completa 
Inicia mi servidor backend en el puerto 8000 y frontend en el puerto 5173, luego ejecuta mi script de prueba Playwright que inicia sesión, navega al dashboard y verifica que los elementos clave estén presentes. Limpia los servidores después de completar las pruebas.

Mejores prácticas

  • Espera siempre al estado networkidle antes de interactuar con páginas dinámicas para asegurar que JavaScript se ha ejecutado completamente
  • Usa el script auxiliar with_server.py para gestionar el ciclo de vida del servidor en lugar de iniciar y detener servidores manualmente
  • Ejecuta scripts con la bandera --help primero para entender las opciones disponibles antes de personalizar la lógica de automatización

Evitar

  • No inspecciones el DOM o tomes capturas de pantalla antes de esperar networkidle en aplicaciones dinámicas
  • Evita leer el código fuente de scripts en la ventana de contexto - usa la documentación --help e invoca como herramientas black-box
  • No uses tiempos de espera fijos como wait_for_timeout cuando se puede esperar por selectores específicos con wait_for_selector

Preguntas frecuentes

¿Cómo pruebo una aplicación que requiere autenticación?
Incluye pasos de inicio de sesión en tu script Playwright antes de navegar a páginas protegidas. Puedes almacenar credenciales en variables de entorno o usar la función de estado de almacenamiento de Playwright para reutilizar sesiones autenticadas.
¿Puedo probar múltiples servidores simultáneamente?
Sí, with_server.py admite múltiples pares --server y --port. Cada servidor se inicia en secuencia, espera a estar listo, luego ejecuta tu comando de prueba después de que todos los servidores estén listos.
¿Por qué fallan mis pruebas cuando la página tiene contenido dinámico?
Asegúrate de llamar a page.wait_for_load_state('networkidle') después de la navegación. Para elementos específicos, usa page.wait_for_selector() para esperar a que los elementos aparezcan antes de interactuar.
¿Cómo capturo capturas de pantalla del navegador para depuración visual?
Usa page.screenshot(path='filename.png', full_page=True) para capturar la página completa. Las capturas de pantalla se guardan en la ruta especificada y pueden verse después de la ejecución de la prueba.
¿Qué navegadores se admiten para pruebas?
Playwright admite Chromium, Firefox y WebKit. Este skill usa Chromium en modo headless por defecto por confiabilidad. Puedes modificar scripts para usar otros navegadores si es necesario.
¿Cómo instalo las dependencias requeridas?
Instala Playwright con pip install playwright, luego ejecuta playwright install para descargar los binarios del navegador. Asegúrate de que Python 3.7 o superior esté disponible en tu entorno.

Detalles del desarrollador

Licencia

Complete terms in LICENSE.txt

Repositorio

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

Ref.

main

Estructura de archivos

📁 examples/

📄 console_logging.py

📄 element_discovery.py

📄 static_html_automation.py

📁 scripts/

📄 with_server.py

📄 SKILL.md