Cypress, l’outil anti-régression par Inside Group

Contexte du projet Cypress avec Digital’Hub

L’équipe de Digital’Hub a travaillé sur un projet qui permet à des producteurs de lait, des laboratoires d’analyse ainsi que différents acteurs de la filière laitière française de se connecter sur une application pour pouvoir consulter les résultats d’analyse, les exporter, les partager. Pour différencier ces acteurs, l’application dispose d’un système de droit qui autorise ou non un utilisateur connecté à accéder ou non à certains menus et actions.

On avait donc une quinzaine de profils d’utilisateurs différents, et dès la phase de connexion, l’utilisateur était redirigé vers une partie de l’application qui lui était propre. br/>
Dans un contexte de sprint agile, l’équipe de développement livre les nouvelles fonctionnalités ou corrections à chaque fin d’itération, on peut parfois provoquer des régressions.

Pour chaque fin de sprint, l’enjeu était de s’assurer que chaque utilisateur avait toujours accès à l’application, que la page de redirection après connexion était bien la bonne et que cette page était bien en état de fonctionnement.

Au départ, ces tests étaient réalisés de manière manuelle par une personne de l’équipe. Il fallait donc récupérer le login et le mot de passe pour chaque utilisateur et les tester un par un sur l’application puis vérifier que tout était bon.

A partir de ce constat, on imagine très bien qu’en automatisant la phase de test de connexion, on pourrait gagner un temps précieux à chaque fin de sprint.

Cypress en bref

C’est une librairie de test qui va vous permettre d’écrire des tests unitaires mais aussi des tests fonctionnels et d’intégrations de manière simple, rapide et intuitive. En plus de cela, c’est une solution autonome quand d’autres frameworks de test auront besoin de librairies tiers pour fonctionner. Cypress communique directement avec votre application, ce qui lui permet de réagir directement aux évènements de l’application. Il suffit de lancer une simple commande via un gestionnaire de paquet comme npm ou yarn pour l’installer et commencer à écrire vos tests.

Cypress est gratuit, vous pourrez exécuter vos tests localement sur votre machine ou accéder à l’interface de gestion et de suivi des tests. Cette interface permettra à 3 utilisateurs d’enregistrer jusqu’à 500 tests, la parallélisation des tests, le regroupement des tests ainsi que l’intégration sur GitHub. Si on souhaite l’utiliser avec plus d’utilisateurs et lancer plus de tests, différentes tarifications sont proposées.

Cypress en quelques points :

Des tests multi-navigateurs
L’intégration des tests dans votre CI
Prise de screenshot en cas d’erreur
Prise de vidéo pour retracer l’erreur
Le déploiement d’un rapport d’erreur sur un dashboard
L’exécution de tests en parallèle

Comment intervient Cypress sur un projet Digital’Hub ?

Comment s’assurer de la qualité des livrables après une livraison ?

Tester tous les cas possible est une solution pour vérifier la fiabilité d’un livrable, mais dans le cas où ces tests ne sont pas automatisés comment cela se passe ?

En fonction du nombre de fonctionnalités ou de cas à tester, il faudra une ou plusieurs personnes qui manuellement vont devoir tout tester. Cela peut prendre des heures ou parfois des jours.

C’est sur ce constat que sur l’un de nos projet au centre de compétence Digital’Hub nous avons décidé de mettre en place Cypress pour prendre en charge ces tests de non régressions.

Cas d’utilisation

C’est là que la mise en place de tests Cypress a pu nous aider. Voici à quoi va ressembler un test de connexion utilisateur :
J’accède à l’URL de l’application.
Je sélectionne le champ Login.
Je rentre le login utilisateur dans ce champs.
Je sélectionne le champ Mot de passe.
Je rentre le mot de passe dans le champs.
Je sélectionne le bouton « Connexion » et je clique dessus.
L’application me redirige et je vérifie que l’url contient bien « /nom_de_la_page ».
Je peux aussi tester que la page contient bien un certain mot pour vérifier qu’elle fonctionne.
Pour notre application, en fonction des droits et du rôle utilisateur, la page d’accueil d’après connexion est différente. On va alors écrire pour chacun de nos 15 utilisateurs type un test fonctionnel. Ils seront rejoués à chaque livraison en environnement de production ou de pré-production.

On peut intégrer les tests en mode CI dans un pipeline Gitlab ou Jenkins par exemple. Si erreur il y a, on peut le rejouer dans l’outil Cypress en mode débogage, ou alors aller visualiser les photos ou vidéos prises pendant le test.

Conclusion

On peut facilement imaginer le gain de temps sur un projet où l’on doit tester des fonctionnalités plus complexes :
Un formulaire avec de multiples champs.
Des droits d’utilisateurs en vérifiant l’accès à certains menus ou boutons.
Le fonctionnement d’une navigation fonctionne.
Les exemples sont nombreux, et la facilité avec laquelle on va pouvoir les écrire est un atout considérable pour l’utilisation de Cypress.

Envie d’en savoir plus sur nos prestations ? Rendez-vous ici !