Modèle de projet Cypress avec integration continue Circle CI

ci cypress

Rédigé par William

William est un passionné de tests et qualités logiciels. Sa spécialité, c'est de mettre en place des stratégies d’automatisation des tests. Cela implique à la fois l’audit de l’existant, la proposition de stratégie, la mise en place, l’intégration continue et aussi la construction ou le renforcement de l'équipe QA. Ses outils de prédilections sont Cypress.io et Postman. Il connait également d'autres outils et d'autres technos notamment Selenium, Appium, Java, Python, SoapUI, etc...

23 mars 2022

A quoi peut servir un modèle de projet ?

Un modèle de projet sert de base de travail pour chaque nouveau projet.

En effet, les modules, les packages, les fonctions, la structure d’un framework d’automatisation ne changent pas tous les jours.

Quand vous avez passé des mois, ou des années à implémenter des configurations complexes, des astuces, des fonctions, alors vous n’avez pas envie de le refaire à chaque fois.

L’idée est donc de repartir sur de bonnes bases rapidement. Pour la maintenance, il est plus facile de gérer une seule fois un modèle de projet qui sert de réference.

CE QUI EST FAIT N’EST PLUS A FAIRE

Proverbe français

A quel public est destiné ce modèle?

Ce modèle de projet est destiné à toute personne utilisant Cypress et qui souhaite prendre de l’avance sur les configurations de base.

A quoi peut vous servir ce modèle?

Vous pouvez utiliser ce modèle pour avoir un projet pré-configurer pour fonctionner avec CircleCI, le Dashboard Cypress, et quelques fonctionnalités en bonus.

L'intégration continue: CircleCI

CircleCI est un service d’hébergement de CI/CD qui se connecte à un repos et exécute les étapes de build à chaque nouveau commit. Dans notre cas, on veut lancer les tests à chaque commit.

La configuration se fait à l’aide d’un fichier .circleci/config.yml dans le repos. Ce fichier indique l’image Docker à utiliser pour votre environnement de build, ainsi que les commandes à exécuter afin de générer, tester et déployer l’application.

Et surtout, il est grattuit et s’intègre sans problème avec GitHub.

Le dashboard cypress

Les Git Hooks

Un hook est simplement un script qui s’exécute automatiquement lorsqu’un événement particulier se produit dans un repos Git.

Dans ce modèle, on va utiliser:

  • pre-commit : Ce hook se déclenche en premier avant même de saisir le message du commit
  • prepare-commit-msg : Ce hook se déclenche avant que l’éditeur de message ne soit lancé

Pour information, le script implémenté ici est piloté par la librairie Husky. C’est une librairie permettant de faciliter la création et le partage des hooks au sein d’un projet.

L’intérêt? que chaque personne n’ait plus à penser par exemple au formatage de code, ou à oublier des informations dans le message du commit.

La génération de rapports junit

Il peut être utile d’avoir en même temps les rapports JUnit pour éventuellement les aggréger dans un dashboard différent du Dashboard Cypress.

La génération et l’exploitation de ces derniers qui sont déjà exploitables dans la section Insight de Circle CI.

Test multi environnement

Dans le cas où vous avez plusieurs environnement à tester, j’ai également préconfiguré cette partie.

Il vous sera donc possible d’ajuster vos URL et configurations pour pouvoir lancer les tests sur les environnements que vous avez.

Les customs commadnds

Les Customs Commands de Cypress permettent de créer des focntions pour faciliter votre quotidien d’automaticien.

 

Dans ce modèle, j’ai intégré quelques uns qui sont utilies mais à adapter à vos beosins.

Aujourd’hui, il y a la gestion des logins, et aussi la gestion des cookies. Cela peut évoluer dans le temps puisque c’est un modèle.

Le plus simple c’est d’ouvir le projet et de regarder dans

support/commands.ts

Les fonctions utiles

En plus des customs commands, il y a également quelques fonctions bien pratiques lors des tests.

Ces fonctions peuvent évoluer dans le temps. Néanmoins, aujourd’hui, dans le template, on a la gestion des attentes de chargement d’une page ou d’un element.

Le plus simple c’est d’ouvir le projet et de regarder dans:

utils/api

Le contenu de mon modèle de projet

Conclusion

Vous pouvez utiliser ce modèle de projet ou bien créer votre propre modèle. L’objectif est de pouvoir mutualiser vos connaissances, vos bonnes pratiques, etc afin de démarrer rapidement un nouveau projet.

Que pensez-vous de cet article ?

Si vous avez aimé cet article, merci de le commenter et de le partager !

À bientôt 😊

Vous pourriez également aimer...

0 commentaires