Automatisez les audits QA de site web avec la compétence Playwright

Livrez en toute confiance en automatisant vos audits UI

Les tests manuels sont lents, fastidieux et sujets aux erreurs, ce qui freine l’élan. Chaque fois que je pousse une modification, je craignais autrefois des liens cassés ou des erreurs de console cachées en plein jour sur le site de production. Cela représente des heures de clics manuels chaque semaine juste pour maintenir un niveau de qualité minimal.

J’ai commencé à utiliser la compétence webapp-testing pour déléguer ce travail à Eigent. En combinant l’automatisation de Playwright avec le workflow agentique d’Eigent, je peux désormais lancer un audit complet du site — y compris des instantanés visuels et des vérifications des journaux — avec une seule instruction.

Voici comment j’ai configuré le workflow pour tester le site Eigent.ai.

1Préparer le script de test

Je commence par définir la logique de test dans un script Python. Grâce à l’API asynchrone de Playwright, je peux suivre les messages de la console et les échecs réseau pendant la navigation. Ce script agit comme le cerveau de l’opération, indiquant précisément à Eigent ce qu’il faut vérifier — des liens de navigation spécifiques jusqu’aux captures d’écran pleine page.

2Configurer les écouteurs d’erreurs

L’un des aspects les plus précieux de ce workflow est la détection des échecs silencieux. J’ai configuré le script pour écouter les erreurs de la console du navigateur et les requêtes réseau échouées. Cela permet à Eigent d’enregistrer des problèmes techniques comme le jeton PostHog manquant que j’ai trouvé — une mauvaise configuration facile à manquer lors d’une vérification manuelle.

3Naviguer sur le site de manière autonome

Eigent prend la main sur la navigation. Il commence sur la page d’accueil et identifie les liens de navigation principaux comme Environments et Enterprise. En cliquant à travers ces sections et en attendant que le réseau soit inactif, il s’assure que chaque transition de page est fluide et que le contenu se charge comme prévu.

4Capturer des instantanés visuels

Les captures d’écran sont le meilleur moyen de vérifier la cohérence de l’UI entre les pages. Pendant le test, Eigent prend automatiquement des instantanés pleine page de la page d’accueil et des sections internes. J’ai capturé plusieurs vues, notamment :

• Page d’accueil : /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
• Page Environments : /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
• Page Enterprise : /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png

5Générer le rapport automatisé

Une fois la navigation terminée, Eigent compile tout dans un rapport Markdown. Celui-ci comprend un résumé des constatations, une liste des erreurs de console et les chemins absolus de toutes les captures d’écran réalisées. Avoir toutes ces données au même endroit rend le processus de revue instantané.

6Analyser les résultats

J’examine la sortie pour identifier d’éventuels blocages critiques. Lors de cette exécution, l’audit a détecté une erreur d’initialisation PostHog et a signalé un asset vidéo interrompu à task_splitting.mp4. Ce ne sont pas seulement des bugs — ce sont des opportunités d’améliorer l’expérience utilisateur avant même qu’un client ne les voie.

Faire évoluer la qualité sans faire évoluer l’effort

Il ne s’agit pas seulement de détecter quelques erreurs de console. Ce workflow montre comment Eigent transforme un outil technique comme Playwright en partenaire qualité autonome. Au lieu d’écrire et de maintenir des suites de tests complexes pour chaque changement mineur de l’UI, je peux simplement indiquer une URL à Eigent et recevoir un rapport complet en retour.

Automatiser les parties « ennuyeuses » du QA permet aux développeurs de se concentrer sur la création de fonctionnalités tout en garantissant que le site existant reste parfaitement fiable.

Ce qu’il faut essayer ensuite

Chacune de ces actions exploite la même compétence webapp-testing — aucune configuration supplémentaire n’est requise.

Conseils pour de meilleurs résultats

• Utilisez les états d’attente networkidle. Cela garantit que les assets asynchrones et les scripts de suivi ont terminé leur chargement avant qu’Eigent ne prenne une capture d’écran ou ne vérifie les erreurs.
• Filtrez les requêtes abandonnées. De nombreux navigateurs interrompent des requêtes lors d’une navigation rapide ou du chargement différé. Les filtrer vous aide à vous concentrer sur les vrais 404 et les erreurs serveur.
• Soyez précis sur les rôles. Lorsque vous demandez à Eigent de cliquer sur des boutons, utilisez des sélecteurs basés sur les rôles comme link ou button pour rendre les tests plus robustes face aux changements de CSS.