Accueil Technologies Cypress – codez des tests d’intégration pour en générer des vidéos
Cypress - codez des tests d'intégration, générez en des vidéos

Cypress – codez des tests d’intégration pour en générer des vidéos

par Jérémy PASTOURET

Lorsqu’on développe de nouvelles fonctionnalités, de nouveau boutons, on est plutôt content d’en être l’auteur et surtout d’avoir réussi à répondre au besoin d’un utilisateur. Mais lorsqu’on nous annonce qu’il faut écrire le test associé a notre fonction, l’enthousiasme décroit rapidement. Car pour un développeur, les tests ne sont pas sexy. Et puis écrire des tests, c’est perdre du temps. On se dit que ce temps précieux pourrait plutôt être utilisé pour développer la nouvelle fonction qui va faire le succès du produit. Vous l’aurez compris : les tests passent souvent en dernier. Mais avec Cypress, il y a tellement d’avantages que les tests pourraient bien revenir sur la première marche.

Présentation de Cypress

Cypress Logo

Cypress est un outil pour les développeurs, les lead-developers et les testeurs. Il permet de créer des scénarios de tests, puis de les jouer sur différents navigateurs de différentes versions. Cet outil permet donc de tester des applications / services Web.

Les modes de Cypress

Bannière développeurs

Cet outil peut se lancer de deux manières différentes.

Interactif

L’outil possède un mode interactif très utile pour développer et déboguer les tests. D’un côté, le logiciel de tests affiche l’application Web sur laquelle les tests sont effectués. De l’autre, la série de tests passés et restants à faire.

Console

Ce mode est à utiliser dans le cadre d’une intégration continue. L’outil effectue les tests en arrière-plan sans aucune interface. Ce qui est magique, c’est la génération de screenshots et de videos présentant les tests.

Le débogage avec Cypress

Bannière problème

Ainsi, le débogage d’applications ou de tests devient plus simple avec cet outil. Contrairement à Selenium ou à un WebDriver, les commandes ne sont pas envoyées à distance. Cypress est comme un navigateur : il interagit et récupère des informations sur les composants Web. Ce qui rend le débogage plus simple car on peut revenir en arrière, consulter la console Devtools, avancer un peu, etc.

Enregistrement de vidéos / screenshots

bannière caméra

Pour moi, c’est la fonctionnalité la plus sympa. Cypress vous permet de générer des screenshots sur les étapes de votre choix. Il est aussi possible de générer des vidéos comme si un utilisateur était en train d’interagir avec l’application d’une manière précise et concise. L’outil de test est tellement performant que l’équipe de développement a dû ralentir le programme afin que notre cerveau humain puisse suivre.

De plus, la génération de screenshots à des moments bien précis peut sauver la vie des équipes en charge de la documentation utilisateur. Imaginez-vous en train de faire la mise à jour de toutes les images du manuel d’utilisation en un seul clic. Le paradis, non ? Et puis le service marketing peut obtenir facilement des vidéos à jour du produit (avec un peu de montage, bien sûr).

Un exemple de vidéo brute générée par Cypress

Exemple screenshot Cypress

Un exemple de screenshot après une saisie de texte

Cypress est-il payant ?

Bannière question

Comme vous le savez, j’adore les projets Open Source et Cypress n’échappe pas à la règle. Son code est disponible sous GitHub avec la licence MIT. Si vous faites un tour sur leur site, vous verrez qu’il y a une page Pricing. Ceci correspond en effet à des solutions hébergées sur les serveurs de Cypress. Mais vous pouvez l’utiliser gratuitement sur vos propres serveurs.

De plus, si vous avez un projet Open Source hébergé sur GitHub, Cypress met à votre disposition un Test runner gratuit. En d’autres termes : vous pourrez configurer vos actions GitHub pour effectuer des tests de scénario et générer des vidéos de vérifications.

Qu’est-ce qui se cache derrière Cypress ?

Bannière choix

Un serveur NodeJS permet une communication optimale entre vos tests et votre application. C’est la raison pour laquelle c’est la solution idéale pour tester des appli web contenant des frameworks Front-end (ReactJS, VueJs…). C’est aussi pour cette raison que les tests sont écrits en Javascript. Pour en savoir plus, vous pouvez consulter les explications du site officiel.

Conclusion

Bannière conclusion

Maintenant que vous connaissez Cypress, cela réduit votre nombre d’excuses concernant la non-réalisation de tests. Dans le prochain article, nous vous proposerons un tutoriel d’utilisation de ce merveilleux outil. Enfin, pour rester dans le thème des tests, nous vous invitons à lire cet article sur le lancement de tests avant la validation de votre commit.

Vous pourriez aussi aimer

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.