Outils de Chrome pour des tests automatisés fluides

Les tests sont importants. Il est essentiel de vérifier que tout fonctionne comme prévu avant de fournir ce que vous avez créé aux utilisateurs, qu'il s'agisse d'un site ou d'une application entier, ou d'une nouvelle fonctionnalité. Cependant, de nombreux tests sont toujours effectués manuellement, lorsque des collègues ou des ingénieurs de test sont invités à consulter la nouvelle fonctionnalité et à signaler les problèmes.

Matthias Rohmer
Matthias Rohmer

Bien que ces tests manuels puissent révéler certaines catégories de problèmes, d'autres peuvent en manquer. Les personnes qui effectuent les tests peuvent passer à côté de cas limites ou ne pas réussir à tester un parcours particulier dans l'application. De plus, elles ne disposent pas de toutes les informations dont vous disposiez lors de l'écriture du code et ne connaissent pas les problèmes spécifiques que vous avez inclus dans du code pour éviter. Au fur et à mesure que le temps passe et que de nouvelles fonctionnalités sont ajoutées, vont-ils revenir en arrière et tester de nouveau tous les éléments qui étaient opérationnels pour s'assurer que les modifications ne fonctionnent pas correctement ?

C'est la raison pour laquelle l'équipe Chrome considère l'importance des tests automatisés. En utilisant une suite de tests qui teste de manière fiable et répétée les failles de votre fonctionnalité, vous pouvez être sûr que chaque petit détail est testé, maintenant et après le développement ultérieur. Vos connaissances en tant que développeur d'une fonctionnalité sont encapsulées dans un test.

Cependant, nous savons que les tests automatisés peuvent être difficiles. Pour vous faciliter la tâche, l'équipe Chrome met à votre disposition les outils et conseils ci-dessous.

Marionnettiste

Puppeteer est une bibliothèque Node.js. Il vous permet d'automatiser Chrome, Chromium et Firefox avec une API de haut niveau facile à utiliser.

Bien que cette API soit initialement basée sur le protocole Chrome DevTools, l'objectif est de faire du nouveau protocole WebDriver BiDi avancé la base de Puppeteer d'ici la fin de l'année. WebDriver BiDi, co-créé par tous les principaux fournisseurs de navigateurs, simplifie de nombreux cas d'utilisation de l'automatisation et permet d'en activer de nombreux nouveaux. De plus, il est compatible avec plusieurs navigateurs.

.

Mais il n'est pas nécessaire d'attendre. L'API de Puppeteer offre déjà de nombreux cas d'utilisation d'automatisation, ce qui ne s'améliorera qu'avec WebDriver BiDi. Des tests à l'exploration visuelle, en passant par l'automatisation des processus, vous pouvez faire beaucoup de choses avec des fonctionnalités telles que les interactions avec les pages, l'interception des requêtes et les captures d'écran. Vous pouvez même l'utiliser pour tester vos modèles d'IA Web dans le cloud à l'aide de WebGPU et WebGL.

Puppeteer est également utilisé par des outils tels que WebdriverIO, un framework de test de navigateur complet et l'outil d'analyse Privacy Sandbox, ce qui vous permet de mieux comprendre l'utilisation des cookies et des données utilisateur sur votre site.

Chrome sans interface graphique

Si vous avez déjà automatisé Chrome à l'aide de Puppeteer, vous avez peut-être découvert qu'aucune fenêtre de navigateur ne s'affiche pendant l'exécution des tests. Par défaut, Puppeteer démarre Chrome en mode Headless. Cela signifie qu'il n'y a pas de véritable fenêtre de navigateur pendant l'exécution de l'automatisation.

Mais saviez-vous que le mode headless de Chrome n'était pas seulement Chrome sans fenêtre, mais en fait une version de Chrome entièrement gérée séparément ? Pendant longtemps, cela a été source de confusion et de mal à dépister les bugs et les problèmes.

À partir de Chrome 112, nous avons lancé un nouveau mode headless, désormais basé sur le même codebase que Chrome standard. Cela ne se contente pas de réduire les confusions précédentes, mais permet également de créer des fonctionnalités qui n'étaient pas possibles auparavant, comme l'utilisation d'extensions pendant l'automatisation.

Puppeteer utilise ce nouveau mode headless par défaut depuis la version 22. Si vous utilisez Chrome Headless par le biais d'autres solutions d'automatisation, vous pouvez forcer le nouveau mode headless à l'aide du bouton de ligne de commande --headless=new.

Bien que le nouveau mode headless de Chrome soit plus puissant, il n'est pas aussi léger que l'ancien. Si vous disposez de ressources très limitées ou si vous n'avez pas besoin de toutes les fonctionnalités de Chrome, vous pouvez utiliser l'ancien mode headless en tant que chrome-headless-shell.

Chrome for Testing

Lorsque vous effectuez des tests, vous devez contrôler précisément votre environnement de test: le système d'exploitation, ainsi que le navigateur et sa version. Avec la mise à jour automatique de Chrome, cela peut être difficile.

C'est pourquoi nous avons créé Chrome for Testing, une version de Chrome sans mise à jour automatique, disponible avec chaque version de Chrome, pour tous les principaux systèmes d'exploitation, accessible à partir d'une archive avec versions gérées. Vous pouvez ainsi exécuter vos workflows d'automatisation sur une version spécifique de Chrome sans trop d'effort.

Vous pouvez accéder aux binaires de Chrome for Testing à partir du tableau de bord de disponibilité Chrome for Testing, de l'API JSON ou de l'utilitaire de ligne de commande Puppeteer.


Puppeteer, le mode headless mis à jour de Chrome et Chrome for Testing ne sont qu'une partie des efforts actuellement déployés par notre équipe pour optimiser l'automatisation des navigateurs et l'exécution des tests. Les outils associés, tels que DevTools Recorder, vous aident à créer des tests: enregistrez un parcours utilisateur dans Chrome et rejouez-le dans Puppeteer.

Découvrir les tests sur web.dev

Les outils décrits dans cet article vous aideront à améliorer vos tests automatisés. Mais, si vous débutez, cela peut sembler beaucoup à comprendre et à apprendre. C'est pourquoi nous avons créé un cours de 10 modules intitulé Learn Testing on web.dev (Apprendre les tests sur web.dev). Ce cours approfondi aborde les concepts fondamentaux liés aux tests, où et comment les tests sont exécutés, les types de tests et les éléments à tester. C'est un excellent point de départ pour votre parcours de test. Une fois que vous connaissez les principes de base, n'hésitez pas à passer à la collection "Automatisation des tests" pour découvrir des informations détaillées et des conseils pratiques sur des questions de test plus spécifiques.