DéveloppementReact

Testez les interfaces de vos applications React avec Cypress

Prérequis : Avoir installé Node.js pour la 1ère Méthode

Il est de plus en plus important d’assurer la qualité d’une application web, la mise en place de tests fonctionnels devient donc primordiale. 

Qu’est-ce qu’un test fonctionnel?

Un test fonctionnel est un test qui permettra de tester automatiquement toutes les fonctionnalités de votre application étant demandé dans le cahier des charges.

Un test fonctionnel a donc pour objectif de dérouler un scénario composé d’une liste d’actions, et pour chaque action d’effectuer une liste de vérifications validant la conformité de l’exigence avec l’attendu.

Par exemple, on peut tester de voir que l’utilisateur peut bien se connecter, se déconnecter ou bien vérifier la véracité des informations dans un formulaire.

Cypress ?

Cypress est un outil open source permettant de créer des scénarios de tests, puis de les jouer sur différents navigateurs. Cet outil permet donc de tester des applications / services Web.

Pourquoi Cypress ?

C’est vrai, ils existent de nombreux concurrents à Cypress comme Jest ou bien Nightwatch. Pourquoi donc Cypress?

Pour commencer, le développement de tests fonctionnels est assez visuel avec Cypress grâce à son interface graphique. 

Cypress rend les tests plus faciles à écrire et plus rapide à exécuter comparé aux deux autres. Nous avons aussi, entre autres, accès à la liste des tests, le choix du navigateur et un récapitulatif de la configuration. Cypress fonctionne, quel que soit le framework JavaScript que vous utilisez : React Js, Angular, Vue Js,… .

Démonstration de Cypress exécutant une suite de tests prédéfinie

Le GIF ci-dessus montre l’exemple de spécification de test Cypress appelé «actions.spec.js». Vous pouvez voir que Cypress ouvre son propre navigateur, exécute vos tests et vous permet de sauter à n’importe quel point de l’historique des tests et de voir l’état de l’application tel qu’il était.

Pour finir, c’est grâce à cet environnement simple que j’ai pu apprendre à réaliser des tests fonctionnels, je le recommande fortement pour les débutants.

Présentation de l’application utilisée

Voici donc l’application que nous allons utiliser durant cet article :

Avec cette application, on va pouvoir voir les bases des tests fonctionnels avec Cypress. Vous pouvez retrouver le code source juste ici : Github du projet.

Pour valider cette application, nous allons tester les points suivants :

  • Afficher la page
  • Vérifier le titre de la page
  • Vérifier le texte
    • Valider le contenu du test
    • Valider la couleur du texte
  • Vérifier le bouton
    • Valider le texte dans le bouton
    • Valider la couleur du texte dans le bouton
    • Valider la couleur de fond du bouton
    • Valider les paramètres précédent après le clic un le bouton

Lancement du projet

1 – Installation de NPM pour le projet

Voici la configuration système requise pour Cypress :

  • MacOS 10.9 et supérieur (version 64bits uniquement);
  • Linux Ubuntu 12.04 et supérieur (64bits), Fedora 21 et supérieur (64bits), Debian 8 et supérieur (64bits);
  • Windows 7 et supérieur;

Maintenant, lancez votre terminal et allez dans le dossier racine de votre projet. Ensuite, vous utiliserez la commande suivante :

npm install

Cette commande va permettre d’installer toutes les dépendances (paquets) nécessaires pour l’utilisation de votre projet.

2 – Exécution du projet

npm start

Cette commande va vous permettre de démarrer votre serveur et par conséquent pouvoir afficher votre projet. Le lien de votre projet sera automatiquement ‘localhost:3000’.

Ainsi, vous obtenez cette page :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *