Usando Claude para Automatizar el Control de Calidad de Aplicaciones Móviles con Capacitor WebViews

Un desarrollador documentó cómo enseñó a Claude a realizar control de calidad automatizado para una aplicación móvil construida con Capacitor. La aplicación utiliza React envuelto en capas nativas (WebView en Android, WKWebView en iOS) con arquitectura de interfaz de usuario impulsada por servidor, permitiendo que una base de código funcione en plataformas web, iOS y Android.

Desafío y Solución de Pruebas

Las aplicaciones de Capacitor existen en una brecha de pruebas: Playwright no puede acceder a la capa nativa, mientras que XCTest y Espresso no pueden interactuar con el HTML dentro de los WebViews. El desarrollador creó un script en Python que usa Claude para controlar ambas plataformas móviles, tomar capturas de pantalla, analizarlas en busca de problemas y presentar informes de errores automáticamente.

Detalles de Implementación en Android

La configuración de Android tomó 90 minutos. Pasos clave:

• Corrección de conectividad: adb reverse tcp:3000 tcp:3000 y adb reverse tcp:8080 tcp:8080 (necesita reejecutarse después de reiniciar el emulador)
• Acceso a Herramientas de Desarrollo de WebView: Encontrar socket con adb shell "cat /proc/net/unix" | grep webview_devtools_remote
• Redirigir a puerto local: adb forward tcp:9223 localabstract:$WV_SOCKET
• Acceso completo al Protocolo de Herramientas de Desarrollo de Chrome mediante curl http://localhost:9223/json

El script recorre las 25 pantallas de la aplicación en unos 90 segundos usando CDP para navegación y autenticación (inyectando JWT en localStorage) y adb shell screencap para capturas de pantalla.

Análisis e Informes de Errores

Las capturas de pantalla se analizan en busca de problemas visuales: diseños rotos, mensajes de error, imágenes faltantes, pantallas en blanco y superposición de la barra de estado. Cuando se encuentran problemas, el sistema:

• Se autentica como zabriskie_bot
• Sube capturas de pantalla a S3
• Presenta informes de errores en el foro de producción con formato: [Android QA] Shows Hub: El botón RSVP se superpone al texto del lugar

El sistema conoce estados esperados: las respuestas "Prohibido" para no miembros en páginas de equipo no son errores, los círculos de avatar vacíos no son errores, y el texto "Vista previa" en configuraciones de perfil es un problema cosmético conocido.

Implementación en iOS

La configuración de iOS tomó más de seis horas, destacando diferencias en las herramientas de automatización móvil. El artículo señala este contraste pero proporciona menos detalles técnicos específicos sobre la implementación de iOS en comparación con Android.

Implementación

Todo el sistema de control de calidad se ejecuta como una tarea programada cada mañana a las 8:47 AM.