Dans ce didacticiel, nous aborderons en détail le cadre d'automatisation de Cypress. Nous couvrirons ce qu'est Cypress, en quoi il est différent des autres frameworks de test, l'architecture de Cypress et la procédure d'installation dans cet article. Cypress est un sujet passionnant et amusant à apprendre aussi. Commençons!

Cadre d'automatisation Cypress

Cypress Automation Framework est un outil de test purement Javascript qui se concentre principalement sur les tests frontaux dans les applications Web modernes. Avec Cypress, les applications sont faciles à tester avec l'interface visuelle pour assister à l'exécution du test. Ainsi, Cypress est une aubaine pour les développeurs et les ingénieurs QA en facilitant l'écriture de scripts et l'exécution de tests. De plus, il est livré avec un lanceur de test distinctif, qui facilite la manipulation du DOM et s'exécute directement sur le navigateur.

Table des matières

Qu'est-ce que le Cyprès ?

Cypress est plus rapide, meilleur et fournit des tests définitifs qui s'exécutent sur un navigateur. Cypress est principalement comparé à Selenium, mais il est complètement différent. Cypress ne fonctionne pas sur Selenium, ce qui signifie qu'il est complètement indépendant. Au lieu de cela, Cypress s'exécute sur Mocha, qui est à nouveau un framework de test riche en Javascript. Il est compatible uniquement avec la bibliothèque d'assertions Chai, qui peut accéder à un large éventail d'assertions BDD et TDD.

Cypress se concentre principalement sur trois types de tests différents. Ce sont des tests de bout en bout, des tests unitaires et des tests d'intégration. Cypress peut exécuter tous les tests pouvant être exécutés dans un navigateur. De plus, il s'accompagne de différentes capacités de simulation et de validations qui sont captivées par les tests frontaux.

Les navigateurs pris en charge par Cypress sont Chrome, Firefox, Edge, Electron et Brave. De plus, les tests multi-navigateurs sont facilement réalisables avec Cypress. Enfin, bien que Cypress ne prenne en charge que Javascript, il peut également être écrit avec Typescript, principalement écrit avec Javascript.

Cypress Automatisation

Cypress est un outil open source avec un exécuteur de test gratuit, mais dont les prix varient pour les équipes et les entreprises où ils vous facturent pour le tableau de bord. Cependant, Dashboard est gratuit dans une certaine mesure, à moins que vous ne disposiez de fonctionnalités supplémentaires telles que la détection de flocons, la prise en charge des e-mails, l'intégration de Jira et bien d'autres.

Cypress est principalement utilisé pour automatiser des scripts sur le Web (peut automatiser tout ce qui s'exécute sur un navigateur). Il ne peut jamais fonctionner sur des applications mobiles natives mais peut automatiser certaines fonctionnalités des applications mobiles si celles-ci sont développées dans un navigateur.

Fonctionnalités:

Il existe de nombreuses fonctionnalités impressionnantes disponibles dans Cypress qui se démarquent de tout autre outil d'automatisation. Ici, discutons de certaines des principales fonctionnalités, et nous verrons d'autres parties plus tard une fois que nous aurons commencé à écrire nos cas de test !

1. Attente automatique – Cypress a l'avantage de l'attente automatique. Nous n'aurons jamais besoin d'ajouter des attentes et des sommeils forcés pour attendre que le DOM récupère l'élément. Cypress attend automatiquement toute interaction avec des éléments et exécution d'assertions. Ainsi, les tests sont rapides !
2. Voyage dans le temps – Cypress capture des captures d'écran pendant l'exécution du test. Nous pouvons visualiser les résultats visuellement en temps réel en survolant simplement les commandes exécutées dans le tableau de bord. De cette façon, les tests sont plus faciles à déboguer
3. Tests de débogage – Cypress peut déboguer des tests à partir d'outils populaires tels que les outils de développement. Les erreurs sont lisibles et les piles sont facilement traçables.
4. Demandes de talon – Cypress a des options pour confirmer et contrôler les comportements des fonctions, les réponses du réseau ou les minuteries utilisées par les stubs et les espions.
5. Intégration continue – Cypress ne dépend d'aucun autre service CI supplémentaire. Cependant, lors de l'exécution de la commande pour le test, l'intégration est facilement accessible.

Mythe sur Cypress

Il existe un mythe selon lequel Cypress ne peut fonctionner que sur des applications Web compatibles Javascript. Cependant, Cypress peut tester toutes les applications Web construites avec Django, Ruby on Rails, Laravel, etc. De plus, Cypress prend en charge tous les langages de programmation tels que PHP, Python, Ruby, C#, etc. Cependant, nous écrivons nos tests en Javascript ; au-delà, Cypress fonctionne sur n'importe quelle application.

Composants de Cyprès

Il y a deux composants principaux dans Cypress. Elles sont Coureur d'essai et Tableau de bord.

Coureur d'essai – Cypress fournit ce lanceur de test unique, où l'utilisateur peut afficher les commandes pendant l'exécution et l'application en cours de test.

Il y a peu de sous-composants sous Test runner. Elles sont

1. Journal des commandes – Ceci est une représentation visuelle de la suite de tests. Vous pouvez voir les commandes exécutées dans le test, les détails de l'assertion et les blocs de test.
2. Menu État du test – Ce menu affiche le nombre de cas de test qui ont réussi ou échoué et le temps d'exécution.
3. Aperçu de l'URL – Cela vous donne des informations sur l'URL que vous testez pour garder une trace de tous les chemins d'URL.
4. Dimensionnement de la fenêtre - Vous pouvez définir la taille de la fenêtre d'affichage de l'application pour tester différentes mises en page réactives
5. Aperçu de l'application – Cette section affiche les commandes qui s'exécutent en temps réel. Ici, vous pouvez utiliser Devtools pour déboguer ou inspecter chaque base.

Tableau de bord: Cypress Dashboard donne la possibilité d'accéder aux tests en cours d'enregistrement. Avec le service Dashboard, nous pouvons constater le nombre de tests réussis, échoués ou ignorés. En outre, nous pouvons afficher des instantanés des tests échoués en utilisant cy. commande screenshot(). Vous pouvez également assister à la vidéo de l'ensemble du test ou au clip des tests échoués.

Architecture de cyprès

La plupart des outils de test s'exécutent sur le serveur en dehors du navigateur et exécutent des commandes sur le réseau. Mais, Cypress s'exécute sur le navigateur où l'application s'exécute également. De cette façon, il peut accéder à tous les éléments du DOM et à tout ce qui se trouve à l'intérieur du navigateur.

Le serveur de nœud s'exécute derrière le Cypress côté client. Ainsi, le serveur de nœud et Cypress interagissent entre eux, accompagnent et exécutent des tâches pour soutenir l'exécution. Comme il a accès à la fois au front et au back-end, la réactivité de l'application en temps réel pendant l'exécution est bien accomplie et peut également effectuer des tâches qui s'exécutent même en dehors du navigateur.

Cypress interagit également avec la couche réseau et capture les commandes en lisant et en modifiant le trafic Web. Enfin, Cypress envoie les requêtes HTTP et les réponses du serveur de nœud au navigateur. Étant donné que Cypress fonctionne dans la couche réseau, il aide à modifier le code qui pourrait interférer avec l'automatisation du navigateur Web. La communication entre le serveur Node et le navigateur se fait via le WebSocket, qui commence l'exécution après le démarrage du proxy.

Cypress contrôle toutes les commandes qui s'exécutent dans et hors des navigateurs. Comme il est installé sur une machine locale, il interagit directement avec le système d'exploitation pour enregistrer des vidéos, capturer des instantanés, accéder à la couche réseau et effectuer facilement des opérations sur le système de fichiers. Cypress peut accéder à tout, du DOM, aux objets de fenêtre, au stockage local, à la couche réseau et aux DevTools.

Installer Cypress

Cette section discutera du processus d'installation qui doit être suivi avant d'écrire nos cas de test. Il existe deux manières différentes de télécharger Cypress. Elles sont

1. Installer via npm
2. Téléchargement Direct

Avant d'installer Cypress, nous aurons peut-être besoin de quelques prérequis pour démarrer l'installation via npm. Voyons-les en détail.

Conditions préalables

Nous aurons besoin de certains pré-requis avant d'écrire nos cas de test.

• Comme indiqué ci-dessus, Cypress s'exécute sur un serveur de nœuds ; nous devrons donc installer Node.js.
• De plus, pour écrire nos cas de test, nous avons besoin d'un éditeur de code ou d'un IDE.

Dans cet exemple, nous utiliserons Visual Studio Code. Alors plongeons dans les détails.

Installation de Node.js sur Mac

Ici, nous allons discuter des étapes pour télécharger Node.js sur Mac. Aller vers https://nodejs.org/en/download/. Vous allez maintenant atterrir sur la page de téléchargement.

1.Cliquez sur le programme d'installation de macOS. En cliquant, vous pouvez trouver un fichier de package téléchargé ci-dessous. Cliquez sur le fichier pkg pour installer Node.js

2. Une fois que vous avez cliqué sur le fichier .pkg, le programme d'installation de Node s'ouvre. La section d'introduction vous donne les versions Node.js et npm. Cliquez sur Continuer

3. Cliquez sur le bouton Accepter, puis sur Continuer. Une fenêtre contextuelle apparaîtra pour permettre l'accès à vos fichiers dans le dossier de téléchargement. Cliquez sur D'accord.

4. Dans cette section, vous pouvez sélectionner la destination vers laquelle Node.js doit être téléchargé. Encore une fois, vous pouvez choisir en fonction de votre espace système. Ici, je choisis l'emplacement par défaut.

5. Cliquez sur le bouton Installer. Une fois que vous avez cliqué, une fenêtre contextuelle vous demandant votre mot de passe système apparaîtrait. Entrez votre mot de passe et cliquez sur Installer le logiciel.

6. Hourra ! Nous avons installé Node.js et le package npm. Cliquez sur Fermer pour terminer l'installation.

Installation du code Visual Studio sur Mac

Nous avons installé avec succès Node.js. Installons maintenant notre éditeur de code Visual Studio Code. Le code VS est un outil puissant qui possède toutes les fonctionnalités intégrées de Javascript. Plongeons donc dans les étapes d'installation de Visual Studio Code.

Ici, nous allons discuter des étapes pour télécharger le code VS sur Mac. Tout d'abord, accédez à https://code.visualstudio.com/download pour atterrir sur la page de téléchargement du code VS.

1. Cliquez sur l'icône Mac. Vous pouvez voir un package téléchargé ci-dessous.

2. Cliquez sur le fichier téléchargé pour décompresser le package. Une fois décompressé, vous pouvez trouver le code Visual Studio dans vos téléchargements dans le Finder.

3. Hourra ! Nous avons téléchargé notre éditeur de code. Cliquez sur l'icône pour ouvrir Visual Studio Code.

Création d'un nouveau projet Cypress

Nous allons maintenant voir comment créer un nouveau projet de nœud dans notre Visual Studio Code. Une fois que vous aurez cliqué sur l'icône du code VS, vous arriverez sur la page d'accueil. Ensuite, cliquez sur le dossier Ajouter un espace de travail pour créer un nouveau dossier.

Une fois que vous avez cliqué sur le dossier, vous obtiendrez une fenêtre contextuelle vous demandant d'ajouter un nouveau dossier. Cliquez maintenant sur l'emplacement auquel vous souhaitez ajouter l'espace de travail. Ensuite, cliquez sur Nouveau dossier et ajoutez le nom du dossier en tant que CypressProject et cliquez sur Ouvrir.

Nous avons maintenant créé un dossier pour notre test Cypress. Avant de commencer à écrire nos tests, nous devons installer le fichier package.json. Avant d'installer, comprenons ce qu'est le fichier package.json.

Qu'est-ce que le fichier Package.json ?

Package.json comprend tous les packages npm dans un fichier, généralement situé à la racine du projet. Il se trouve généralement dans le répertoire racine du projet Node.js. Ce fichier contient toutes les métadonnées applicables nécessaires au projet. Il donne toutes les informations à npm et aide à identifier le projet et à gérer les dépendances. Le fichier Package.json contient des informations telles que le nom du projet, les versions, la licence, les dépendances et bien d'autres.
Nous avons maintenant compris ce qu'est le fichier package.json. Commençons donc les étapes pour télécharger le fichier dans notre code Visual Studio.

1. Pour exécuter nos commandes, nous devons ouvrir le Terminal. En haut du code VS, cliquez sur le terminal. Une fois la liste déroulante ouverte, cliquez sur Nouveau terminal.

2. Une fois le terminal ouvert, tapez la commande ci-dessous dans le répertoire du projet et appuyez sur Entrée.

npm init

3. Une fois que vous avez appuyé sur Entrée, vous pouvez voir certaines informations affichées. Vous pouvez taper les détails requis dans le Terminal et appuyer sur Entrée pour obtenir tous les champs.

• Nom du paquet: Vous pouvez donner n'importe quel nom à votre package. Je l'ai laissé vide car il est pré-rempli avec le nom du dossier que nous avons créé.
• Version: Cela donne les informations de la version de npm. Vous pouvez ignorer cela et appuyer sur Entrée.
• Description: Ici, vous pouvez donner une information supplémentaire au package. Si nécessaire, vous pouvez saisir la description et appuyer à nouveau sur Entrée.
• Point d'accès: Ceci représente le point d'entrée de l'application. Puisqu'il est pré-rempli avec index.js, nous pouvons ignorer ce champ et appuyer sur Entrée.
• Tester la commande: commande qui est donnée pour exécuter le test. Ici, il n'est pas nécessaire de donner des commandes, mais si nécessaire, vous pouvez certainement fournir n'importe quelle commande.
• Dépôt Git: ce champ nécessite le chemin d'accès au référentiel git. Vous pouvez également laisser ce champ vide.
• Mots clés: mots-clés uniques pour aider à identifier le projet. Vous pouvez également ignorer ce champ.
• Auteur: Il s'agit généralement du nom d'utilisateur de la personne. Vous pouvez ajouter votre nom et appuyer sur Entrée.
• Licence: La licence est pré-remplie avec ISC. Vous pouvez continuer en appuyant sur Entrée.

• 4. Une fois que vous avez appuyé sur Entrée, le terminal demandera une confirmation en répertoriant tous les détails que vous avez fournis. Taper Oui et appuyez à nouveau sur Entrée.

Nous avons maintenant généré un fichier package.json. Vous pouvez afficher le fichier dans votre éditeur de code avec les informations que nous avons fournies.

Étapes d'installation de Cypress

Nous avons installé tous les prérequis pour notre téléchargement Cypress, notre nœud et notre npm initialisé. Comme mentionné ci-dessus, il existe deux façons de télécharger Cypress.

Télécharger Cypress via npm

Vous devrez passer la commande ci-dessous dans le terminal pour installer Cypress. De plus, vous devrez donner la commande dans le répertoire du projet pour installer le nœud et générer le fichier package.json.

npm install cypress --save-dev

Une fois que vous avez passé la commande, il téléchargera toutes les dépendances pertinentes requises pour le projet. A la rédaction de cet article, la dernière version de Cypress est 7.7.0. La version peut différer au moment du téléchargement.

En référence à l'image ci-dessus, vous pouvez voir que nous avons téléchargé Cypress. Vous pouvez vérifier par la représentation téléchargée dans Terminal et l'ajout de devDependencies dans le fichier package.json.

Téléchargement Direct

Nous pouvons télécharger Cypress directement depuis leur CDN si vous n'utilisez pas le package Node ou npm dans le projet. Cependant, l'enregistrement des tests dans le Dashboard n'est pas possible par téléchargement direct.

Vous pouvez télécharger en cliquant sur télécharger Cypress directement à partir de ce lien. Cela va maintenant télécharger directement le package. Une fois le package téléchargé, ouvrez le fichier zip et double-cliquez. Cypress fonctionnera sans qu'aucune installation de dépendances ne soit nécessaire. Ce téléchargement récupérera toujours la dernière version basée et la plate-forme sera détectée automatiquement. Cependant, le téléchargement de Cypress via npm est recommandé plutôt qu'un téléchargement direct.

Pour plus d'articles sur la technologie, veuillez visiter notre Page de la technologie.

Aishwarya Lakshmi

Salut… Je m'appelle Aishwarya Lakshmi, j'ai terminé mon B.Tech et j'ai près de 2 ans d'expérience dans le domaine des tests. Je suis un passionné de tests et passionné par les tests et j'aime explorer de nouvelles choses dans mon domaine et les partager avec mes pairs. J'aime écrire des blogs pendant mon temps libre de la manière la plus simple mais efficace. En tant que testeur, j'aime avoir les choses à la perfection, je souhaite donc à mes lecteurs d'avoir une parfaite compréhension de la technologie. Je me tiens au courant des nouvelles technologies liées aux tests et passe du temps à les comprendre. Je suis heureux d'aider les étudiants à comprendre les concepts des tests.