Comment Corriger 90% des Erreurs dans Claude Code

Le présentateur explique comment l'équipe a amélioré sa méthode de construction d'applications grâce au lancement récent de l'extension Chrome de Claude Code. Il contraste cette nouvelle extension avec les outils MCP précédents comme Playwright et Puppeteer, qui souffraient de problèmes graves incluant une fenêtre de contexte gonflée, des dossiers de projet remplis de captures d'écran aléatoires et une incapacité générale à compléter les actions sur les applications. Le présentateur était antérieurement skeptique concernant les tests automatisés avec l'IA, mais l'extension Chrome a changé sa perspective car elle offre un potentiel significativement supérieur aux outils précédents. Cette nouvelle extension est maintenant disponible comme MCP intégré dans Claude Code.

Une parenthèse professionnelle présente Automata, une entreprise qui met en œuvre les workflows d'IA enseignés aux millions de personnes pour construire des applications et des sites web plus rapidement. Automata agit comme un copilote technique transformant des concepts en solutions fonctionnelles sans nécessiter d'embauche ou de gestion d'équipe interne. Le présentateur invite les spectateurs intéressés à les contacter à hello@automata.dev. Après cette introduction commerciale, la vidéo revient au sujet principal des problèmes à corriger pour utiliser efficacement l'extension Chrome de Claude Code dans les tests d'application.

Le présentateur identifie le problème majeur que Claude effectue trop d'étapes séquentielles pour des tâches simples, particulièrement lors du test visuel des pages web. Lorsque Claude teste une page d'accueil, il effectue des opérations de défilement pour chaque section et capture plusieurs captures d'écran, puis les assemble pour une analyse section par section. Cette approche est inefficace car elle consomme énormément de tokens. La solution proposée est d'utiliser une capture d'écran pleine page qui économise tous ces tokens inutiles. Le présentateur a implémenté un script utilisant différents outils web pour les captures pleine page et l'a intégré dans une commande slash personnalisée.

Le deuxième problème majeur identifié est que les outils MCP chargent une énorme quantité de contenu à la fois pour des tâches simples. Au lieu de charger des divs spécifiques, Claude charge souvent tout le HTML à l'intérieur de la balise main, qui contient une quantité massive de tokens même quand ce n'est pas nécessaire. Cette pratique consomme une grande partie de la fenêtre de contexte et peut gonfler même les tâches les plus simples considérablement. Pour résoudre ce problème, le présentateur a ajouté des instructions dans le fichier Claude.md sur la gestion appropriée du contexte en utilisant l'extension Chrome. Maintenant, toute extraction est précisément limitée et ne gonfle pas le contexte avec des informations inutiles.

Un autre problème critique est que Claude perd beaucoup de temps quand il rencontre des sites web contenant des pop-ups indésirables comme les avis de cookies et autres invites similaires. Claude utilise les mêmes séquences inefficaces de capture d'écran et de défilement pour gérer ces obstacles. Pour résoudre ce problème, le présentateur a créé un script JavaScript qui inclut les sélecteurs de boutons « fermer » les plus courants et les motifs pour fermer les bannières de cookies. Ce script trouve automatiquement ces sélecteurs dans le code et exécute des fonctions pour fermer les pop-ups sans intervention. Des instructions ont été ajoutées au fichier Claude.md pour qu'il exécute ce script en premier avant d'accéder au contenu principal.

Pour des raisons de sécurité, Claude a été intentionnellement limité pour effectuer des captures ou compléter l'authentification en votre nom. Si un site web requiert une connexion ou une vérification CAPTCHA, Claude ne peut pas compléter ce processus automatiquement. Le présentateur recommande que les utilisateurs s'authentifient déjà avant de donner une tâche à Claude lorsqu'ils travaillent sur des sites nécessitant une connexion. De cette façon, Claude ne sera pas bloqué et ne gaspillera pas de temps à essayer de contourner ces obstacles de sécurité. Cette limitation est une protection importante contre les abus de sécurité même si elle réduit l'automatisation complète.

Le présentateur explique pourquoi il préfère l'intégration Chrome native de Claude Code à Puppeteer et autres MCPs. L'extension Chrome est un outil natif construit par les développeurs de Claude Code eux-mêmes, offrant une meilleure intégration avec un contrôle et des fonctionnalités améliorés. Les MCPs traditionnels sont concentrés sur les tests dans des environnements séparés qui ne maintiennent aucune session, sont problématiques à installer et encombrent les dossiers de projet avec des captures d'écran. L'intégration Chrome permet à Claude d'interagir avec les comptes connectés et des services comme Google Docs et Google Sheets, tout en conservant les informations de session. Le présentateur note que les intégrations de navigateur utilisent beaucoup de contexte car elles sont plus gourmandes en calcul que les appels d'outils réguliers.

L'extension Chrome présente plusieurs limitations techniques que le présentateur met en évidence. Premièrement, elle ne fonctionne qu'avec Chrome et non avec d'autres navigateurs Chromium comme prévu initialement. Deuxièmement, pour les utilisateurs avec plusieurs profils Chrome, l'extension ouvre continuellement les mauvais profils, ce qui est une frustration que le présentateur espère voir corrigée bientôt. Troisièmement, les extensions Chrome sont limitées par Manifest V3 et peuvent être bloquées si elles tournent trop longtemps. Cela signifie que les tests de bout en bout longs peuvent causer le blocage de la session par Chrome, forçant l'utilisateur à relancer manuellement le processus.

Pour contourner les limitations de Manifest V3 et le blocage de session, le présentateur a adopté une stratégie de diviser les tests en plusieurs fichiers de test couvrant différents aspects de l'application au lieu de tests de bout en bout monolithiques. Chaque fichier de test contient des informations détaillées incluant les niveaux de priorité, les préconditions, les étapes de test et les résultats attendus. Un guide de test et un readme documentent comment mener ces tests et fournissent une documentation centralisée. Pour gérer les limites du contexte, le présentateur a ajouté des instructions dans Claude.md demandant la création d'un document de rapport de test complet après chaque fichier de test.

Pour optimiser complètement le processus de test, le présentateur a créé une commande slash personnalisée qui teste de manière guidée et crée une documentation bien structurée après les tests, en suivant les instructions du fichier Claude.md. Cette commande inclut des instructions pour surveiller le contexte avant de commencer une tâche, assurant que le contexte ne soit pas perdu en cours de route et ne se compacte pendant le travail. Lorsque l'utilisateur lance le processus de test avec la commande personnalisée, Claude commence automatiquement à tester en suivant les instructions exactes, identifie les problèmes indépendamment et utilise le navigateur et tous les outils nécessaires. Claude interagit automatiquement avec les éléments, peut détecter des erreurs identifiables en lisant la sortie de la console et documente les tests à la fin.

Le présentateur conclut la vidéo en remerciant les spectateurs de leur écoute et en invitant ceux qui souhaitent soutenir la chaîne à utiliser le bouton Super Merci pour aider à la création continue de vidéos similaires. Il termine par un appel standard pour les spectateurs à rester engagés avec la chaîne pour les prochaines vidéos, établissant une relation continue avec son audience et encourageant le soutien communautaire.