Utilisation de Claude pour automatiser le contrôle qualité d'applications mobiles avec les WebViews Capacitor

Un développeur a documenté comment il a appris à Claude à effectuer des tests de qualité automatisés pour une application mobile construite avec Capacitor. L'application utilise React encapsulé dans des shells natifs (WebView sur Android, WKWebView sur iOS) avec une architecture d'interface utilisateur pilotée par serveur, permettant à une seule base de code de fonctionner sur les plateformes web, iOS et Android.

Défi et Solution de Test

Les applications Capacitor se trouvent dans un vide de test : Playwright ne peut pas accéder au shell natif, tandis que XCTest et Espresso ne peuvent pas interagir avec le HTML à l'intérieur des WebViews. Le développeur a créé un script Python qui utilise Claude pour piloter les deux plateformes mobiles, prendre des captures d'écran, les analyser pour détecter des problèmes et soumettre automatiquement des rapports de bugs.

Détails de l'Implémentation Android

La configuration Android a pris 90 minutes. Étapes clés :

• Correction de connectivité : adb reverse tcp:3000 tcp:3000 et adb reverse tcp:8080 tcp:8080 (nécessite un redémarrage après le redémarrage de l'émulateur)
• Accès aux DevTools WebView : Trouver le socket avec adb shell "cat /proc/net/unix" | grep webview_devtools_remote
• Rediriger vers le port local : adb forward tcp:9223 localabstract:$WV_SOCKET
• Accès complet au Chrome DevTools Protocol via curl http://localhost:9223/json

Le script parcourt les 25 écrans de l'application en environ 90 secondes en utilisant CDP pour la navigation et l'authentification (injection de JWT dans localStorage) et adb shell screencap pour les captures d'écran.

Analyse et Signalement de Bugs

Les captures d'écran sont analysées pour détecter des problèmes visuels : mises en page cassées, messages d'erreur, images manquantes, écrans vides et chevauchement de la barre d'état. Lorsque des problèmes sont détectés, le système :

• S'authentifie en tant que zabriskie_bot
• Télécharge les captures d'écran vers S3
• Soumet des rapports de bugs au forum de production avec le format : [Android QA] Shows Hub : Le bouton RSVP chevauche le texte du lieu

Le système connaît les états attendus : les réponses "Forbidden" pour les non-membres sur les pages d'équipage ne sont pas des bugs, les cercles d'avatar vides ne sont pas des bugs, et le texte "Preview" dans les paramètres de profil est un problème cosmétique connu.

Implémentation iOS

La configuration iOS a pris plus de six heures, mettant en évidence les différences dans les outils d'automatisation mobile. L'article note ce contraste mais fournit moins de détails techniques spécifiques sur l'implémentation iOS par rapport à Android.

Déploiement

L'ensemble du système de QA s'exécute comme une tâche planifiée chaque matin à 8h47.