Fermer

février 21, 2023

Tests d’automatisation avec Cypress, Mocha et JavaScript

Tests d’automatisation avec Cypress, Mocha et JavaScript


La norme de test frontal la plus récente que chaque développeur et ingénieur QA devrait connaître est l’automatisation Cypress. Les applications Web modernes peuvent utiliser cette méthode de test automatisée frontale de pointe.

pouce de cyprès

Le cyprès est principalement utilisé pour :

  • Tests unitaires
  • Tests d’intégration
  • Test de flux de bout en bout

Néanmoins, il peut également être utilisé pour des tests fonctionnels !

Bien que le cyprès soit fréquemment comparé au sélénium, les deux sont fondamentalement et structurellement distincts.

QU’EST-CE QUI REND LE CYPRÈS UNIQUE PAR RAPPORT AU SÉLÉNIUM ET POURQUOI ?

  • Rapide, cohérent, sans effort et fiable : Par rapport à l’outil Selenium, Cypress offre une exécution de test plus rapide, cohérente, sans effort et fiable grâce à sa conception architecturale, car le test s’exécute directement dans le navigateur sans utiliser de pilote de navigateur.
  • Attente automatique : Il n’est pas nécessaire d’inclure Waits and Sleep dans vos tests. Cypress attend automatiquement les commandes et les assertions. Il n’y aura plus de synchronisation.
  • Voyage dans le temps: Nous pouvons survoler chaque commande dans le journal des commandes pour voir exactement ce qui s’est passé à chaque étape. Contrairement à d’autres outils d’automatisation, nous pouvons voir et déboguer chaque étape du journal pendant l’exécution des tests.
  • Débogage facile : Les outils de développement de Cypress simplifient le débogage. Le débogage est rapide et indolore grâce aux erreurs et à la trace de la pile. Les messages d’erreur sont très lisibles et expliquent pourquoi notre script a échoué.
  • Captures d’écran et vidéos : Par défaut, Cypress peut capturer des captures d’écran en cas de panne. Il peut également enregistrer des vidéos de l’ensemble de la suite de tests exécutés à partir de l’interface de ligne de commande. Lorsque nous exécutons nos tests à partir du tableau de bord Cypress, nous pouvons regarder des vidéos de l’ensemble du processus.
  • Langage universel simple et unique : Parce que son architecture est basée sur Node JS, il ne fonctionne qu’avec JavaScript, qui est très simple à apprendre. JavaScript est extrêmement simple à utiliser pour les développeurs et les testeurs.
  • Prise en charge de plusieurs navigateurs : Il prend en charge Chrome, Edge, Electron et Firefox.
  • Prise en charge des tests d’API : Cypress peut effectuer des appels HTTP ; ainsi, nous pouvons également tester les API.
  • Le plugin externe prend en charge : Cypress prend en charge les plugins externes pour élargir la couverture des tests.
  • Statistiques: Cypress dispose d’un menu d’état de test qui affiche le nombre de cas de test qui ont réussi ou échoué.
  • Exécution automatique : Cypress recharge toutes les mises à jour effectuées dans les tests par défaut.

CONDITIONS PRÉALABLES

  • Compréhension de base de Node.js
  • Compréhension de base de Cypress
  • Un IDE approprié tel que VS Code

CONFIGURATION DE CYPRESS ET INSTALLATION DES BIBLIOTHÈQUES

Cypress est une application Node.js fournie sous la forme d’un module NPM (Node Package Manager).

Parce qu’il est construit sur Node.js, il utilise JavaScript pour écrire des tests, mais 75 % du codage peut être effectué à l’aide des commandes intégrées de Cypress qui sont simples à comprendre.

  • Installez d’abord NodeJS s’il n’est pas installé (vous pouvez rechercher une version à l’aide de la commande ci-dessous
npm –v
  • Créez un projet vide sur votre machine locale
  • Ouvrez le projet dans VS Code (vous pouvez également choisir d’autres IDE)
  • Initialisez la configuration du projet à l’aide de la commande
npm init

Et suivez les questions ci-dessous pour créer un fichier package.json (comme indiqué dans la capture d’écran ci-dessous)

initialisation du projet

  • Une fois le fichier package.json créé, installez les dépendances cypress
npm install cypress --save-dev

Cela prendra un certain temps à installer et une fois que c’est fait, vous avez terminé avec les scripts.

Une fois Cypress installé dans votre projet, tapez simplement la commande ci-dessous pour ouvrir l’interface graphique de Cypress

npx cypress open

La commande ci-dessus créera une structure de répertoires dans votre projet et ouvrira l’interface graphique Cypress où il y aura deux options,

structure du répertoire

Structure du répertoire : créé automatiquement après l’exécution de la commande – npx cyprès ouvert

  • Le premier est le test E2E, c’est-à-dire à des fins de test de bout en bout, pour l’assurance qualité, nous devons sélectionner la même chose, et la deuxième option est le test des composants, c’est-à-dire utile pour les développeurs pour les tests unitaires.
  • Une fois que vous avez sélectionné l’option Test E2E, vous verrez une liste de navigateurs dans laquelle vous devrez sélectionner n’importe quel navigateur. Cypress prend en charge les navigateurs à base de chrome et la liste que vous verrez est la même.
  • Une fois que vous avez sélectionné le navigateur, cliquez sur le bouton ci-dessous pour exécuter les tests de cyprès. Ensuite, vous verrez la liste des scripts de test écrits dans le navigateur et il vous suffira de cliquer sur ces tests pour les exécuter.
  • Donc, à partir de maintenant, vous ne verrez que les exemples de scripts de test provenant de cypress pour la compréhension, vous pouvez les supprimer ou les conserver pour la compréhension.
  • Une fois la configuration ci-dessus terminée, créez un fichier de test, vous pouvez également créer le fichier de spécification à partir de la fenêtre Cypress ou du code VS. Pour le script de test, l’extension doit être suiteName.cy.js (cy.js est obligatoire)
  • Et puis vous pouvez commencer à écrire des scripts et valider des cas de test.

QUELS SONT LES LOCALISATEURS DE CYPRÈS ?

Un sélecteur ou un localisateur est un objet qui recherche et renvoie des éléments/éléments de page Web sur une page en fonction de la requête. Dans Automation, pour effectuer d’abord une opération sur les éléments Web, vous devez localiser un élément et effectuer une action sur cet élément. Le localisateur ou le sélecteur aide à localiser un élément dans la page Web. Il existe différents types de localisateurs, tels que identifiant, CSS, XPath, sélecteurs basés sur des balisesetc.

Cyprès prend en charge divers localisateurs tels que les balises, l’identifiant, la classe, les attributs, le texte, etc. Cypress prend également en charge les sélecteurs XPath ; cependant, il nécessite l’installation du plug-in tiers cypress-xpath. Xpath n’a pas été pris en charge par défaut dans le framework Cypress.

Pour installer cypress-xpath, veuillez taper la commande suivante dans le terminal

npm install -D @cypress/xpath

Une fois que vous avez configuré cypress-xpath, veuillez ajouter le code suivant dans votre projet -> support -> fichier command.js

require('@cypress/xpath')

Pour récupérer l’élément HTML dans Cypress à l’aide de différents types de localisateurs, à l’exception de XPATHcy.get() méthode est utilisée.

Pour récupérer les localisateurs dans Cypress à l’aide de XPATH – cy.xpath() méthode doit être utilisée.

Veuillez regarder les mêmes étapes mentionnées ci-dessus dans la vidéo ci-dessous.

Créons un fichier MyTest.cy.js et ajoutons-y quelques tests, veuillez vérifier le code ci-dessous pour la même chose.

structure du code

COMPRÉHENSION DE LA BASE DU CODE CYPRESS

CADRE DE CYPRÈS

Tous les tests Cypress seront exécutés dans un cadre recommandé appelé « Moka.” Il sera fourni avec Cypress, il n’y aura donc pas besoin de le télécharger séparément.

COMMANDES GLOBALES CYPRESS

cy‘ est une commande globale pour invoquer toutes les commandes cypress comme un ‘driver.findElement()’ etc. nous appelons toutes les méthodes requises.

Pas besoin de créer ou d’importer quoi que ce soit pour ‘cy’.

ESSAIS DE CYPRÈS :

Comme nous allons travailler sur Cypress et JavaScript, nous avons donc besoin de ‘.cy.js‘ pour écrire nos scripts de test d’automatisation.

En moka ou en jasmin, on peut utiliser le ‘décrire‘ et ‘il‘ pour commencer à écrire notre test.

Le bloc ‘describe’ sera appelé un suite de tests. et il le bloc n’est rien d’autre que les cas de test

Tout le test passe à l’intérieur de cette suite.

AFFIRMATIONS DE CYPRÈS :

Tout comme un TestNG, nous pouvons également utiliser des assertions ici pour valider les cas de test.

Assertions implicites –

  • .Devrait contenir’, « )
  • .devrait(‘avoir.texte’, ”)
  • .devrait(‘être.visible’)

Assertions explicites –

  • attendre(‘nom’).to.be.equal(‘cyprès’)

Affirmer –

  • assert.equal(4, 5, ‘Pas égal’)
  • assert.notEqual(4, 5, ‘Pas égal’)
  • assert.isAbove(4, 5, ‘Pas égal’)
  • assert.isExist(4, 5, ‘Pas égal’)

COUREUR D’ESSAI DE CYPRÈS :

Vous pouvez exécuter vos scripts de test de deux manières,

  • La première consiste à utiliser l’interface graphique Cypress comme indiqué ci-dessus dans la vidéo et les étapes et,
  • La seconde est, en utilisant le terminal VS Code

Pour exécuter des scripts de test à l’aide de l’interface graphique Cypress, utilisez la commande suivante

Dans le « Terminal », tapez la commande ci-dessous –

npx cypress open

Cela ouvrira l’interface graphique de Cypress, et à partir de là, cliquez sur le cas de test que nous venons de créer.

Pour exécuter des scripts de test à l’aide du terminal VS Code, utilisez la commande suivante

npx cypress run

La commande ci-dessus exécutera vos tests en mode sans tête, si vous voulez exécuter vos tests sans mode sans tête, utilisez la commande suivante

npx cypress run --headed

Pour plus de compréhension, veuillez regarder la vidéo ci-dessous :

Nous pouvons accéder à chaque étape que nous avons écrite dans le code en utilisant Enregistrer et nous pouvons également parcourir chaque étape une par une en les survolant.

ÉTAPES DE TEST ET RAPPORT D’EXÉCUTION :

Vous pouvez voir les statistiques d’exécution des tests avec les suites de tests dans l’image ci-dessous :

exécution des tests

LIEN CODES SOURCES :

https://drive.google.com/drive/folders/1Y3VkTKoYO1Z5K143a6mS8tMgFxFUOeUR?usp=share_link

CONCLUSION:

Cypress est un puissant outil d’automatisation des tests Web pour tester les applications Web modernes. Il prend en charge le test de tous les types d’éléments Web facilement à l’aide de puissantes commandes intégrées. Il prend également en charge le cadre du modèle d’objet de page.

Je pense que c’est l’un des meilleurs outils pour automatiser des tâches triviales avec une API facile à utiliser ; si vous le pensez aussi, allez-y et automatisez les tâches fastidieuses de votre vie quotidienne avec Cypress.

Si vous avez des questions ou des commentaires, s’il vous plaît laissez-moi savoir dans la section des commentaires,

Merci!

TROUVÉ CELA UTILE ? PARTAGEZ-LE




Source link