Sommaire
- Présentation
- Qu’est ce que s’est ?
- Comment sa fonctionne ?
- Mon travail
Présentation:
Dans cet article, nous aborderons le principe du test sur code avec CYPRESS et les différentes variantes que peut offrir l’outil. Je vous présenterai donc les deux points sur lesquels mon apport a été considérable: cypress en tant qu’API, et cypress cloud pour l’intégration continue CI/CD.
Qu’est-ce que c’est ?
Dans le monde numérique d’aujourd’hui, les applications Web jouent un rôle essentiel dans les activités des entreprises. La qualité et la fiabilité de ces applications sont cruciales pour offrir une expérience utilisateur optimale.
Cypress :
Cypress est un Framework d’automatisation des tests open source spécialement conçu pour les applications Web modernes. Il offre aux développeurs et aux testeurs un moyen efficace d’écrire, d’exécuter et de gérer des tests automatisés pour leurs applications Web. Cypress se distingue par sa simplicité d’utilisation, sa rapidité et sa fiabilité. Il utilise JavaScript pour écrire les tests et fournit une API simple et expressive pour interagir avec les éléments de l’application.
Cypress Cloud :
Cypress Cloud est la plateforme cloud proposée par Cypress. Elle offre un ensemble de fonctionnalités supplémentaires pour améliorer le processus d’automatisation des tests.
Comment sa fonctionne ?
Cypress s’exécute directement dans le navigateur, ce qui lui permet de contrôler l’application en temps réel. Cela signifie qu’il n’y a pas besoin de serveur distinct ou de dépendances externes, ce qui facilite la configuration et l’exécution des tests.
Grâce à une interface utilisateur graphique intuitive qui facilite l’écriture, l’exécution et le débogage des tests. Il fournit également des outils de recherche intelligents et des fonctionnalités de rechargement en direct pour accélérer le processus de développement des tests. Une des fonctionnalités les plus puissantes de Cypress est sa capacité à exécuter les tests en temps réel pendant que les développeurs apportent des modifications au code de l’application. Cela permet une rétroaction instantanée, ce qui facilite le processus de correction des erreurs. A cela s’ajoute aussi une fonctionnalité de débogage avancé telle que l’exécution pas à pas, la surveillance des variables et la possibilité de prendre des captures d’écran ou d’enregistrer des vidéos lors de l’exécution des tests. Cela aide les développeurs à identifier rapidement les problèmes et à les résoudre.
Pour cypress cloud les fonctionnalités supplémentaires dont je vous parle sont :
Exécution parallèle des tests : Cypress Cloud permet d’exécuter les tests sur plusieurs machines virtuelles en parallèle, ce qui permet d’accélérer considérablement le temps d’exécution des tests.
Intégration continue et livraison continue (CI/CD) : Cypress Cloud s’intègre facilement aux pipelines CI/CD existants, tels que Jenkins, CircleCI, Travis CI, etc. Cela permet d’automatiser les tests à chaque étape du processus de développement et de déploiement.
Surveillance des tests : Cypress Cloud four.
Mon travail :
Projet : Reproduction de scénario de tests sur une application web
Il était question de reproduire des scénarios de création de tables avec des informations recueillis depuis un workflow, de les afficher et d’ajouter des filtres sur des colonnes bien précises, en utilisant le DOM (document objet model) de l’application web CARDABEL.
Etape 1 : installation des dépendances
Cypress est construit sur Node.js avec npm d’intégré qui est utilisé pour gérer les packages et les dépendances de mon projet, il est donc essentiel de l’installer au préalable. Cette installation cette faite dans une arborescence existante de l’application dans lequel j’ai dû initier l’environnement avec la commande « npm init » pour récupérer le fichier package.json qui est nécessaire pour l’installation de Cypress. Une fois ceci fait, j’ai donc procédé à l’installation de Cypress lui même avec la commande « npm install cypress –save-dev ». Il est important également que tout cela doit connecté à un git, dans mon cas il s’agissait de bitbucket pour la partie cloud: pour la création de pipelines à travers lequel l’on peut lancer des tests indépendamment d’un environnement physique. une fois tout cela installé, cypress est fonctionnel et prêt à être utilisé pour l’automatisation de ces tests dans le projets.
Etape 2 : Lancement de l’application cypress et des tests par défaut
Une fois les dépendances installées, dans le dossier on retrouve des nouveaux fichiers cypress qui contiennent tout ce qui est en rapport avec les tests notamment le dossier « intégration » qui contient les fichiers tests à exécuter.
Le lancement des tests par défaut permet d’initier et de connecter cypress au dossier, et d’intégrer le navigateur qu’il faut pour exécuter les tests futurs.
Etape 3 : Ecriture des différents tests
Cypress utilise javascript comme langage de programmation, ce qui fait que les tests cypress sont écrits en javascript (avec des fichiers ayant des extensions en « spec.js » ou « spec.ts »).
Ci-dessous, vous avez un aperçu d’un fichier de test qui permet la connexion au site web, la création d’une table en se basant sur le Workflow, et d’y ajouter certains filtres :
Etape 4 : Exécution des tests
Pour lancer les tests cypress, on utilise la commande « npx cypress run –spec fichier.spec.js ». Ce qui permet de suivre l’exécution pas à pas sur le navigateur généré par l’api cypress ( ci-dessous une illustration).
Etape 5 : Génération d’un rapport de tests
Dans mon cas j’ai installé mochawesome qui est un rapporteur de test pour mocha, un Framework de test javascript populaire. Il fournit des rapports de test détaillés et attrayants, facilitant la visualisation des résultats des tests et d’identification des problèmes en JSON pour l’intégrer à un outil de monitoring comme Grafana ou en HTML pour l’analyse visuelle..
Résumé:
| Ce que j’ai appris | – Analyse d’un DOM – Intégration continue avec bitbucket – base javascript et typescript |
| Résultat | – mise en place des scénarios fonctionnels – analyse fonctionnelle des éléments de l’application web – Intégration CI/CD avec bitbuket-pipeline |
| Synthèse | – La réalisation de ce projet m’a permis de développer des capacités d’analyse et de traitement des informations sur le code source d’une application en sélectionnant avec précision l’élément sur lequel l’action prédéfinie sur cypress doit s’exécuter. |