Améliorez vos tests web grâce à notre tutoriel sur le framework Cypress.

 

Qu'est-ce que le cyprès ?

Dans aujourd'hui DevOps et l'ère du cloud, dans laquelle les applications web connaissent un développement continu et déploiement continu Dans un contexte de développement de pipelines, les frameworks d'automatisation des tests doivent eux aussi innover. Cypress est un framework d'automatisation des tests de bout en bout adapté aux environnements d'applications web modernes. Ce framework JavaScript s'exécute sur Node.js. Avec Cypress, vous pouvez écrire et exécuter rapidement et facilement des tests d'intégration, unitaires et de bout en bout.

Cypress intègre un outil d'exécution de tests open source, simple à configurer et à utiliser. Vous pouvez écrire et exécuter des tests localement chaque jour grâce à cet outil. Une fois vos suites de tests prêtes, vous pouvez l'intégrer à votre outil d'intégration continue et enregistrer les tests via le tableau de bord. L'outil d'exécution de tests vous permet de suivre l'exécution des commandes. Aucune installation de serveur, de dépendance ou de pilote n'est requise. Cypress est convivial pour les développeurs. Les tests sont faciles à comprendre.

En prenant des instantanés des tests, Cypress vous permet de suivre leur déroulement à chaque étape. En cas d'échec, vous pouvez déboguer directement avec des outils comme Chrome DevTools. Lorsque vous modifiez un test, Cypress le recharge automatiquement. Aucun problème d'asynchronisme n'est à déplorer.

En quoi le cyprès est-il différent du sélénium ?

Selenium étant le framework d'automatisation de tests le plus populaire dans le secteur open source, Cypress est souvent comparé à ce dernier. Cependant, ces deux outils diffèrent fondamentalement par leur architecture et leurs fonctionnalités. Alors que les tests Selenium s'exécutent en dehors du navigateur et interagissent avec celui-ci via le protocole JWP, Cypress s'exécute au sein même de l'application. Il bénéficie ainsi d'un accès natif à tous les objets de l'application.

En raison de la nature de la différence d'architecture, Selenium est plus adapté aux tests de bout en bout, tandis que Cypress est plus rapide et, dans certains cas, plus fiable.

Installation de cyprès

L'installation de Cypress est assez simple et facile. Le framework propose deux options pour installer Cypress.

1. Outil de ligne de commande
2. Application de bureau

Étape 1 : Installer Node.js et le gestionnaire de paquets Node (npm)

Cypress est un framework JavaScript fonctionnant avec Node.js. Par conséquent, installez Node.js avant Cypress. La version LTS actuelle est la 12.8.1. npm est désormais inclus avec Node.js ; vous n'avez donc pas besoin de l'installer séparément. La version actuelle de npm est la 6.14.5. Vous pouvez télécharger la version LTS sur le site web de Node.js : https://nodejs.org/en/download/

Installez Node.js à l'aide du fichier .msi

Acceptez le contrat de licence.

Sélectionnez le dossier node js et cliquez sur suivant.

Dans la configuration personnalisée, choisissez les fonctionnalités que vous souhaitez installer. Vous pouvez cliquer sur Suivant pour installer les éléments par défaut.

Pour exécuter des modules npm depuis du code C/C++, vous devez installer les outils nécessaires pour les modules natifs. Sinon, cliquez simplement sur Suivant.

Sur l'écran suivant, cliquez sur Installer.

Terminez le processus d'installation.

Pour vérifier si node.js et npm sont correctement installés, ouvrez l'invite de commandes et saisissez les commandes suivantes :

• nœud –v
• npm –v

Étape 2 : Créer un dossier de projet

Pour enregistrer tout votre travail dans un seul dossier, créez un nouveau dossier et accédez-y.

• mkdir experitestcypress
• cd experitestcypress

Étape 3 : créer un fichier package.json

Pour créer un fichier package.json, saisissez la commande suivante dans l'invite de commandes.

• npm init -y

Étape 4 : Installez Cypress à l’aide de npm

Accédez au dossier du projet et saisissez la commande suivante pour installer Cypress depuis l'interface de ligne de commande.

• npm install cypress --save-dev

Veuillez patienter quelques minutes, le temps que le programme télécharge et installe les fichiers binaires nécessaires.

Étape 5 : Ouvrir le cyprès

Cypress est maintenant installé. Pour ouvrir Cypress Test Runner, saisissez la commande suivante dans l'invite de commandes.

• .node_modules.bincypress ouvert

Lors de sa première ouverture, il créera un dossier d'exemple contenant des fichiers de script de test.

Cypress est maintenant prêt à l'emploi.

Créez votre premier test

Pour exécuter votre premier test, créez un fichier de test dans le dossier d'intégration créé par Cypress. Ici, le fichier de test est nommé expiretest_sample.js

• Touchez experitestcypress/cypress/integration/experitest_sample.js

Comme Windows ne reconnaît pas la commande tactile, créez manuellement le fichier .js dans le dossier d'intégration. Pour ce faire, ouvrez un fichier texte et enregistrez-le avec l'extension .js.

Lorsque vous ouvrirez Test Runner, il affichera le fichier expiretest_sample.js que vous avez créé.

Exécution du premier test

Pour exécuter le premier test, vous pouvez utiliser n'importe quel IDE pour modifier le fichier expirest_sample.js. Pour ce test, ouvrez le fichier .js, ajoutez ce code simple et enregistrez le fichier.

[javascript] describe('Experitest Premier test', () => { it('Le premier test a réussi !', () => { expect(true).to.equal(true) }) }) [/javascript]

Cliquez maintenant sur le fichier dans l'outil d'exécution des tests ; le navigateur s'ouvrira et le test sera exécuté.

Ici, le navigateur Chrome est contrôlé par un logiciel de test automatisé.

Ouvrez maintenant le fichier expirest_sample.js et remplacez « First test » par « Second test ». Une fois le fichier enregistré, le navigateur se rafraîchit automatiquement et affiche les nouveaux résultats.

Voici un autre exemple. Ouvrez le fichier expirest_sample.js, saisissez ce code et enregistrez-le :

[javascript] describe('Site web d'Experitest', () => { it('Ouvre le site web d'Experitest', () => { cy.visit('https://experitest.com') }) }) [/javascript]

Lorsque vous l'enregistrerez, Test Runner ouvrira le site web Experitest dans le navigateur.

L'outil d'exécution des tests fonctionne donc parfaitement. Vous pouvez écrire différents scripts de test et les exécuter !

Exécutez votre test depuis la ligne de commande

Pour exécuter ce script de test depuis l'interface de ligne de commande, saisissez la commande suivante dans l'invite de commandes :

• npx cypress run –record –spec “cypress/integration/experitest_sample.js”

Une fois le test exécuté avec succès, l'outil affichera les résultats.

Installation de l'outil Cypress Desktop

Pour installer l'outil de bureau, ouvrez le site web de Cypress et téléchargez le logiciel de bureau Cypress :

https://www.cypress.io/

Voici le lien direct pour télécharger l'outil de bureau :

https://download.cypress.io/desktop

Après avoir téléchargé le fichier zip, décompressez le logiciel et ouvrez l'application Cypress.

Sélectionnez maintenant votre dossier de projet et commencez à utiliser l'outil d'exécution des tests.

Il suffit de cliquer sur le fichier JavaScript et l'outil exécutera le test.

Utilisation du framework Cypress pour l'automatisation des tests

Le framework Cypress, qui, comme nous l'avons démontré, excelle dans l'automatisation des tests de bout en bout, constitue une excellente solution pour tester les applications web modernes. Étant un framework JavaScript fonctionnant sur Node.js, il permet d'écrire facilement tous vos tests. Dans cet article, nous avons également examiné le Test Runner. Nous avons constaté sa simplicité d'utilisation et la possibilité de suivre l'exécution des commandes sans avoir à installer de serveurs, de dépendances ou de pilotes. Bien entendu, vous pouvez également découvrir son fonctionnement avec notre plateforme DécouvrirTest. Cliquez ici et inscrivez-vous pour un essai gratuit de DécouvrirTest pour l'essayer vous-même. Visitez également Digital.ai Continuous Testing pour en savoir plus sur les avantages que notre produit de test peut apporter à votre entreprise.

Guy Arieli – Directeur technique