Exécutez les tests grâce au launchpad
Il y a deux méthodes pour exécuter les tests Cypress à l’aide de la ligne de commande dans VSCode :
npx cypress open: Cette commande ouvre l'interface graphique de Cypress, vous permettant d'interagir avec vos tests via une interface visuelle conviviale. Vous pouvez sélectionner et exécuter des tests individuels, visualiser les résultats en direct et déboguer vos tests en temps réel.npx cypress run: Cette commande exécute tous vos tests Cypress en mode non interactif. Elle est généralement utilisée pour l'exécution automatisée et l'intégration dans des systèmes de CI/CD. Les tests s'exécutent en arrière-plan et génèrent des résultats sous forme de fichiers de sortie. Cela permet de lancer des suites de tests complètes sans nécessiter d'interaction manuelle et permet d'effectuer des tests de régression.
Nous allons nous intéresser d’abord à la première méthode, qui permet d’exécuter les tests grâce à l’interface de Cypress, le launchpad. Nous l’avons abordé en première partie de ce cours lors de la configuration, sans rentrer dans le détail. Il est temps de vous présenter entièrement l’interface d’exécution des tests !
Rappelez-vous, dans la première partie, vous avez cliqué sur le test Navigation :
Pour revenir à ce test, exécutez npx cypress open puis cliquez sur Navigation.
Comme vous pouvez le voir à gauche dans la capture d’écran ci-dessus, vous venez en fait d’exécuter 3 tests.
Je vois que le test a réussi mais il y a beaucoup de choses sur cet écran quand même !
Pas de panique ! Je vous explique plus en détail.
Est-ce que le test a réussi ? Oui ! C’est ce que vous confirme la couleur verte, utilisée à deux endroits : à gauche du scénario de test et dans le résultat total.
Sur quel navigateur est-ce que vous exécutez ce test? On peut voir en haut à droite de l'écran que le test a été exécuté sur Chrome, version 114.
Quel est le viewport ? Aussi en haut à droite, on voit que le viewport est 1000x660 (49%).
Super, mais c’est quoi un viewport ?
Un viewport permet de définir l’affichage de la page web : la largeur de l’écran, sa hauteur et le zoom. Par défaut, Cypress utilise la largeur 1000 px et la hauteur 660 px. Si cela ne vous convient pas, vous pouvez définir les valeurs requises dans les configurations, comme expliqué dans la documentation Cypress.
Comment déboguer s’il y a une erreur?
Comme nous l’avons vu, l’avantage de Cypress est de pouvoir déboguer facilement. Pour vous aider dans cette tâche, voici quelques considérations :
Avec la fonction selector playground de Cypress, vous pouvez trouver les éléments grâce à un localisateur, représenté par le symbole d’une cible :
Cliquez sur ce symbole. Un nouveau panel apparaît :
En cliquant sur la flèche à gauche, vous pouvez survoler les éléments et en cliquant sur celui qui vous intéresse, vous aurez le sélecteur.
Il y a deux autres boutons sur le panel ci-dessus : le bouton copier d'abord, puis le bouton afficher en console. Ce dernier permet d’afficher en console l’élément qui est dans le panel. Pour visionner le résultat en console, ouvrez-la (ou l’outil de développement dans les paramètres de votre navigateur) avec CTRL + MAJ + J pour Chrome. Vous aurez ce genre de résultat :
Ces éléments peuvent vous aider à déboguer.
Vous pouvez voir l’état de votre test à chaque étape. Dans la partie body, il y a un visit et une page chargée.
Vous pouvez cliquer sur chacune de ces lignes. À droite de votre écran, vous pouvez voir l’état à ce moment précis mais également en console.
Le menu à gauche liste tous les tests :
Il suffit de cliquer sur l’un des fichiers pour lancer les tests correspondants.
Par exemple, cliquez sur contact.cy.js : c’est là que se trouvent les tests que vous avez écrits. Vous pouvez voir qu’ils ont bien réussi :
Exécutez maintenant le test api.cy.js :
Cliquez sur la ligne gets a list of products :
D’autres lignes apparaissent qui vous donnent plus de détails, ce qui vous aide à déboguer !
Vous voyez ici qu’il y a eu un appel API, un get sur http://localhost:8081/products. Cliquez sur la ligne pour avoir plus d’informations en console dans l’outil de développement :
Si jamais vous avez un test en erreur, vous pouvez vous appuyer sur Cypress pour déterminer l’erreur en naviguant ainsi de ligne en ligne.
Retrouvez l'interface du launchpad en vidéo :
Maintenant que vous avez vu l’interface graphique, voyons comment exécuter vos tests en ligne de commande.
Exécutez cypress run
Comme nous l'avons vu plus haut, la ligne de commande npx cypress run vous permet d’exécuter l'ensemble de vos tests de manière automatisée en incluant les tests de régression, et de façon headless, c’est-à-dire en cachant le navigateur pendant l’exécution, ce qui évite les interactions et accélère l’exécution. Cela vous permet de vérifier rapidement et de manière fiable que les fonctionnalités existantes de votre application continuent de fonctionner correctement après des modifications ou des ajouts de code.
Avant d'exécuter la commande, vous devez fermer toutes les pages que Cypress a ouvertes.
1. Allez dans VSCode et dans le terminal où vous avez tapé npx cypress open :
2. Stoppez la commande en tapant CTRL+C.
3. À la question Terminer le programme de commandes ?, tapez O pour oui :
4. Vous pouvez maintenant taper npx cypress run .
5. Laissez le terminal exécuter les tests, ils peuvent prendre quelques minutes.
Lors de l’exécution, vous allez d’abord voir cet écran :
C’est une indication quant au navigateur qui va être utilisé pour exécuter les tests.
Ensuite, vous allez voir défiler des checks verts qui prouvent que les tests s’exécutent.
À la fin vous allez avoir une table qui montre les tests qui se sont exécutés :
Comme vous pouvez le voir, vous avez exécuté 130 tests ! Est-ce que vous vous attendiez à ça ? Eh oui, il y a tous les tests d’exemples que vous avez installés lors de la configuration de Cypress.
Vous retrouvez aussi les deux fichiers api.cy.js et contact.cy.js comme lors de l'exécution grâce au launchpad. Tous les tests se sont exécutés en 1 minute et 35 secondes.
Comme vous pouvez le voir, il y a un test en erreur, soit 5 % d’échec. Vous pouvez remonter dans le terminal afin de voir l’erreur :
Pour comprendre l’erreur, allez dans le fichier qui pose question : cypress_api.cy.js. Il se trouve dans cypress/e2e/2-advanced-examples :
On peut voir que dans les tests d’exemples, Cypress s’attend à ce qu’il n’y ait pas de baseUrl définie ; or, nous l’avons définie précédemment. Cette erreur est donc normale. Cependant il faut mettre à jour le test pour que l’erreur ne se reproduise pas : expect(myConfig).to.have.property('baseUrl', 'http://localhost:8080/')
Exécutez à nouveau npx cypress run . Vous devriez obtenir 100 % de réussite.
Même si c’est dans notre propre code, vous venez de faire votre premier débogage !
Retrouvez comment exécuter des tests en ligne de commande en vidéo :
Rédigez le readme de votre code
Le fichier readme est utilisé dans les projets de développement de logiciels pour fournir des informations essentielles sur le projet en question. Il sert à expliquer comment utiliser, installer et contribuer au projet. Voici quelques éléments à prendre en compte lors de la création d'un fichier readme efficace :
Nom et emplacement : Le fichier doit être nommé README et placé à la racine de votre projet.
Titre : Commencez par un titre descriptif qui résume le projet.
Description du projet : Donnez une brève description du projet. Expliquez son objectif, son contexte et son utilité.
Installation : Indiquez comment installer et configurer le projet. Cela peut inclure des dépendances, des commandes spécifiques à exécuter, etc.
Utilisation : Expliquez comment utiliser le projet une fois qu'il est installé. Donnez des exemples concrets d'utilisation.
Contribution : Si vous acceptez des contributions de la communauté, précisez comment les gens peuvent contribuer au projet. Cela peut inclure des informations sur les problèmes à résoudre, la façon de soumettre des demandes de tirage (pull requests), etc.
Licence : Indiquez la licence sous laquelle le projet est publié. Cela peut être important pour les utilisateurs qui souhaitent utiliser votre code.
Auteurs : Mentionnez les auteurs ou les contributeurs principaux du projet.
Historique des versions : Si votre projet a des versions, incluez un historique des versions avec des notes de version pour que les utilisateurs puissent suivre les changements.
Exemples : Si cela a du sens pour votre projet, incluez des exemples de code, de configurations ou d'utilisations avancées.
Contact : Fournissez un moyen de contacter l'équipe du projet en cas de questions ou de problèmes.
Badges : Vous pouvez également inclure des badges (par exemple, pour la construction CI/CD, la couverture de code, etc.) pour donner rapidement des informations sur l'état du projet.
Un fichier README est généralement au format texte brut, mais il est courant de le rédiger en utilisant la syntaxe Markdown.
OK, mais concrètement, je mets quoi dans ce README.md ?
Un petit exemple peut-être ?
## Tech&Buy
Boutique en ligne, permet d'acheter des produits Tech !
## Installation
Après avoir cloné le projet, il faut installer docker et il suffit de faire docker-compose up
## Contribution
Libre à vous ! Vous pouvez créer des MR/PR qui seront acceptées et mergées selon l'utilité de la proposition
## Licence
Ce projet est sous licence Beerware.
## Historique des versions
- **Version 1.0.0**
- Création du projet.
- **Version 1.0.1**
- Ajout de CypressD’accord, je pense comprendre, mais c’est quoi la licence Beerware ?
Il y a plusieurs types de licence de logiciel. Consultez l’article Qu’est-ce qu’une licence logicielle ? pour en savoir plus.
Accédez à vos tests dans le cloud
Cypress propose une plateforme, Cypress Cloud, qui permet d'exécuter les tests Cypress sur des machines virtuelles dans un environnement cloud dédié. Les utilisateurs peuvent personnaliser la plateforme en fonction de leurs besoins spécifiques ou y ajouter des fonctionnalités supplémentaires pour répondre à des cas d'utilisation particuliers.
Exécutez npx cypress open puis cliquez sur l'onglet Debug. C’est sur cet onglet que vous pouvez vous connecter à Cypress Cloud. Il vous faudra créer un compte.
Pour enregistrer vos tests dans le cloud en ligne de commande, vous devez exécuter npx cypress run --record --key {YOUR_KEY} . Vous allez donc avoir besoin d’une clé d’enregistrement (ou record key) pour remplacer YOUR_KEY dans la commande. Celle-ci est fournie par Cypress et est utilisée pour authentifier et connecter votre exécution de tests à votre compte Cypress Cloud.
Pour trouver votre clé d’enregistrement, il suffit de cliquer sur Run et de vous connecter à votre compte, Cypress l’affichera alors :
Lorsque vous exécutez cette commande, Cypress enregistre les résultats de vos tests dans Cypress Cloud en utilisant la clé d'enregistrement fournie. Cela vous permet de consulter les résultats de vos tests dans l'interface Cypress Cloud, de voir les vidéos d'exécution, les captures d'écran et autres informations utiles pour le débogage et l'analyse des tests.
Consultez la documentation Cypress pour vous aider à configurer votre compte Cypress Cloud.
En utilisant Cypress Cloud, vous pouvez exécuter vos tests sur différents navigateurs et systèmes d'exploitation sans avoir à configurer et à maintenir une infrastructure locale complexe.
Cypress Cloud offre une large gamme de navigateurs et de versions, permettant ainsi de valider la compatibilité de l'application sur différentes plateformes. Cela facilite la détection précoce des problèmes de compatibilité et garantit une expérience utilisateur cohérente.
Lorsque nous avons comparé Selenium et Cypress, nous avons vu qu’une autre caractéristique importante de Cypress Cloud est la possibilité d'exécuter les tests en parallèle. Cette fonctionnalité permet d'accélérer considérablement les temps d'exécution des tests, car ils sont répartis sur plusieurs machines virtuelles simultanément. Ainsi, vous pouvez obtenir des résultats plus rapidement, ce qui accélère le processus de développement et de livraison des fonctionnalités.
Cypress Cloud propose également des fonctionnalités de surveillance avancées. Vous pouvez visualiser les résultats des tests en temps réel, consulter les journaux d'exécution détaillés et recevoir des notifications en cas d'échec des tests. Cela permet d'identifier rapidement les problèmes et de les résoudre efficacement.
Voici à quoi ressemble l’interface de Cypress Cloud :
En outre, Cypress Cloud offre des fonctionnalités de génération de vidéos et de captures d'écran lors de l'exécution des tests. Cela facilite le débogage et la compréhension des problèmes rencontrés pendant les tests, en fournissant une vue des actions effectuées par les tests.
Pour en savoir plus sur Cypress Cloud, visionnez la vidéo que je vous ai préparée :
À vous de jouer !
Créez un compte dans Cypress Cloud.
Exécutez ensuite les tests créés précédemment avec cypress open et cypress run dans Cypress Cloud afin d’avoir les résultats escomptés.
Consultez la suggestion de corrigé.
En résumé
Vous pouvez exécuter les tests avec une interface graphique ou dans le terminal.
L’interface graphique vous permet de déboguer directement dans l’interface en utilisant l’outil de développement du navigateur.
L’exécution cypress run vous permet d’exécuter l'ensemble de vos tests, ainsi que les tests de régression, de manière automatisée. Les tests s’exécutent plus rapidement et sans interaction.
Cypress Cloud est un service qui permet d'exécuter des tests sur des machines virtuelles dédiées dans le cloud.
Cypress Cloud offre une plateforme de tests distribuée, évolutive et haute performance, permettant d'exécuter des tests parallèles sur différents navigateurs et systèmes d'exploitation, ce qui accélère considérablement le temps d'exécution des tests.
Vous savez dorénavant comment écrire et exécuter vos tests. Vous allez à présent voir une notion plus avancée, le CDD, ou Cypress Driven Development. Ce dernier permet d’écrire vos tests avant que la fonctionnalité ne soit rédigée.
