Introduction
Il est important lorsque l'on développe une application web de réaliser des tests. Il en existe différents types:
- test unitaire permettant de tester son code unitairement
- test end-to-end permettant de tester son application dans sa globalité
- test mutant permettant de tester ses tests
Cet article se concentre uniquement sur les tests end-to-ends appelés également tests d'intégration.
Ceux-ci nous permettent de tester notre interface en fonction des différentes intéractions de l'utilisateur mais également de s'assurer qu'il n'y ait aucune régression lorsqu'une nouvelle fonctionnalité est ajoutée.
Il existe plusieurs librairies qui nous permettent de réaliser ces tests. Pour ne citer que les plus connues:
Malgré leur aide, écrire des tests reste long et fastidieux ce qui résulte à un coût non négligable à prendre en compte lors de la budgétisation ressource d'une application.
Comment réduire ce budget ? Est-il possible de rendre cette écriture de tests automatique ?
La réponse est OUI. Google Chrome peut le faire pour vous depuis la version 97 grâce au panel recorder.
Attention cet outil reste pour le moment encore expérimental
A quoi sert le panel Recorder ?
Le panel Recorder de Google Chrome permet d'enregister un user flow mais également de pouvoir le rejouer.
Il existe deux façons d'ouvrir ce panel:
- console chrome -> more options -> more tools -> recorder
- console chrome -> command menu -> record
Ce qu'apporte le panel Recorder
Enregistrer un user flow est très simple. Dans le panel Recorder il suffit de cliquer sur le bouton start new recording
Un enregistrement est considéré comme une suite d'intéractions utilisateur. Tous les évènements y sont enregistrés:
- les clicks
- le scroll
- les évènements clavier etc
Chaque évènement est ensuite loggé selon une timeline qui peut par la suite être modifiée par l'utilisateur. En effet il est possible de:
- supprimer une étape
- ajouter une étape
- modifier le sélecteur d'une étape
- modifier les propriétés d'une étape
Une étape correspond au détail d'une action et bien évidemment celle-ci peut-être également modifiée.
Mais l'avantage du panel Recorder ne s'arrête pas là. Il vous permet de rejouer ce qui a été enregistré en altérant les conditions réseau par exemple, ou encore mesurer les performances de votre flow utilisateur (très pratique pour mesurer les Core Web Vitals sur des actions très précises).
Cependant la plus intéressante des fonctionnalités de ce panel reste la possibilité de pouvoir exporter cet enregistrement vers différents formats.
L'export et l'écriture automatique de nos tests
L'export de l'enregistrement peut se faire sous plusieurs formats:
- JSON
- pupeeter replay script
- puppeeter script
Le format Pupeeter replay script
Ce format permet principalement de
- rejouer à l'aide de Pupeeter un enregistrement réalisé à l'aide du panel Record
- modifier à l'aide de code Javascript chaque étape de l'enregistrement
- transformer l'enregistrement vers un autre format
Le format Pupeeter script
Ce format exporte l'enregistrement sous format d'un script javascript.
Ce fichier Javascript comporte le setup initial ainsi que les vérifications associées à l'enregistrement dans un format compréhensible par la librairie Pupeeter.
Il est possible de rajouter des tests plus spécifiques si nécessaire, mais dans la majorité des cas d'utilisation les vérifications générées sont suffisantes à elles mêmes.
Ce format permet donc de créer les tests d'intégration automatiquement pour la librairie Pupeeter à partir d'un simple enregistrement.
Plutôt sympa n'est-ce pas :) ?
Le Format JSON et Cypress
Ce format est le format d'exportation le plus simple. Il permet un simple partage entre developpeurs afin que l'un d' eux puisse l'importer et le rejouer.
Cependant ce format est aussi celui de prédilection pour le package: @cypress/chrome-recorder.
Le package @cypress/chrome-recorder est un CLI qui permet de transformer un enregistrement Chrome Recorder en une suite de tests cypress.
Le CLI vous permet de convertir un fichier ou un ensemble de fichiers se trouvant dans un répertoire spécifique.
Pour installer ce package, lancez la commande suivante dans un terminal
npm install -g @cypress/chrome-recorder
Les fichers tests cypress générés sont modifiables si vous souhaitez avoir plus de granularité dans vos tests.
Conclusion
Le panel Chrome Recorder est vraiment très utile pour générer des tests de non régression sur une application existante. Ces formats d'export permettent de coupler cette génération de tests avec deux grandes librairies utilisées à ce jour: Cypress et Pupeeter.
Cette fonctionnalité encore expérimentale permet également de débugger son application sur des points spécifiques au flow de l'utilisateur. Ce qui peut s'avérer très utile lorsque l'on souhaite améliorer les Core Web Vitals de son application.
Top comments (0)