Installez et prenez en main Cypress

Vous avez bien saisi les enjeux des tests fonctionnels et en quoi Cypress peut vous aider dans cette tâche ? Il est temps de faire vos premiers pas avec Cypress. Mais avant toute chose, l’installation. C’est parti !

Installez NodeJS

Dans ce cours, vous allez exécuter des lignes de commande npm. La façon la plus simple d’installer npm est d’installer Node.js qui l’intègre.

Pour cela, rendez-vous sur le site nodejs.org et téléchargez la dernière version LTS de Node. Double-cliquez sur le fichier afin de l’exécuter. Une fenêtre similaire à la suivante apparaît : 

Suivez les étapes en acceptant la licence après l’avoir lue. Vous pouvez laisser les autres étapes par défaut.

Pour vérifier que l’installation s’est bien passée, ouvrez votre terminal.

Tapez  node -v  qui devrait vous renvoyer la version de Node.js installée.

Vous êtes prêt à installer Cypress !

Installez Cypress

Pour installer Cypress, vous devez taper une ligne de commande dans le terminal.

Tapez le code suivant dans le terminal :

npm install cypress --save-dev 

 Vous devez obtenir un message qui ressemble au suivant :
 

Découvrez les extensions Cypress

Au cours de votre carrière, vous aurez sûrement besoin d’extensions, ou plugins, dans Cypress. Ces extensions fournissent une aide précieuse pour coder et tester en ajoutant des fonctions à Cypress. Ce cours n’en utilise pas, mais il est bon d’en connaître quelques-unes pour la suite.

La documentation de Cypress officialise 6 extensions : 

• Cypress Fixture-IntelliSense : Prend en charge vos cy.fixture() grâce à IntelliSense pour vos fixtures existantes. Une fixture est un ensemble de données prédéfinies ou d’objets d’état utilisés lors des tests unitaires, tests d’intégration ou tests fonctionnels.
  IntelliSense est une fonctionnalité d’aide à la programmation par certains IDE (environnements de développement). Les avantages principaux sont : 

  • la suggestion automatique de code : lorsque vous commencez à taper du code, IntelliSense propose des suggestions ;

  • la complétion automatique : IntelliSense complète automatiquement les noms de fonctions, de propriétés et de variables ;

  • la documentation contextuelle : IntelliSense affiche une documentation contextuelle ;

  • la détection d’erreurs : IntelliSense surligne les erreurs de code potentielles en temps réel ;

  • la navigation rapide : IntelliSense vous permet de naviguer rapidement à travers les différentes parties du code. 

• Cypress Helper : Plusieurs commandes et helpers pour les tests avec Cypress.

• Cypress Snippets : Raccourcis utiles (dernier commit en 2018). Par exemple : cy.contains(''); sans snippet, devient cycon(‘’) avec snippet, ce qui permet de coder plus rapidement.

• Cypress Snippets (voir l'encart ci-dessous) : Cette extension inclut les snippets Cypress les plus récents et les plus utilisés.

• Open Cypress : Permet d’ouvrir les spécifications Cypress et les blocks it() directement dans VSCode.

• Test Utils : Ajoute ou supprime facilement .only ou .skip avec les raccourcis clavier ou la palette de commande.

Configurez Cypress

Une fois que Cypress est installé, la commande  npx cypress open  dans VSCode initialise Cypress pour votre projet. Cela crée un répertoire de configuration et d'autres fichiers nécessaires pour exécuter les tests.

Une fenêtre s’ouvre :

Bienvenue dans Cypress !

Cypress propose deux types de tests : E2E et Component, ou composant.

Nous allons configurer les tests de type E2E.

Exécutez votre premier test d’exemple E2E

1. Cliquez sur le bouton E2E Testing. Une fenêtre similaire à celle-ci apparaît : 

Cypress va ajouter ces quatre fichiers de configuration dans l’architecture de votre projet.

2. Cliquez sur le bouton Continue. 

Une fois la configuration de l’environnement terminée, cette fenêtre apparaît :

Sélectionnez votre navigateur préféré. Pour ce cours, nous utiliserons Chrome.

3. Sélectionnez Scaffold example specs. Il s’agit d’un ensemble de spécifications de tests d'exemple : 

Dans Cypress, vous voyez à présent tous les tests d’exemple.

Ces fichiers d'exemples, sur lesquels nous reviendrons un peu plus loin, sont fournis pour vous aider à démarrer rapidement avec l'écriture de vos tests. Ils illustrent aussi les fonctionnalités clés du framework.

Les spécifications d'exemples couvrent différents aspects du test, tels que :

• Les interactions avec des éléments HTML : Par exemple, comment cliquer sur un bouton, saisir du texte dans un champ de saisie, valider des éléments de formulaire, etc.

• La navigation dans l'application : Comment accéder à différentes pages ou sections de l'application.

• Les validations et les assertions : Comment vérifier que certaines valeurs ou certains éléments sont présents ou correspondent aux attentes.

• Les tests asynchrones : Comment gérer les opérations asynchrones comme les requêtes HTTP ou les délais d'attente.

Vous pouvez donc vous baser sur ces fichiers d’exemples pour rédiger vos propres tests.

Lors de l’installation, Cypress a créé des dossiers dans VSCode. Sans fermer l’interface graphique de Cypress, retournez dans VSCode. Vous devez avoir une architecture similaire à celle-ci :

Trois dossiers sont apparus (e2e, fixtures, support). On y retrouvera trois des quatre fichiers de configuration installés auparavant. Le quatrième fichier,  cypress.config.js, apparaît quant à lui dans le dossier Cypress.

Nous nous pencherons sur les trois dossiers plus tard, mais regardons d’abord ce que le fichier cypress.config.js contient : 

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

C’est dans ce fichier que vous allez spécifier vos configurations.

4. Maintenant, retournez dans l’interface graphique de Cypress et exécutez un des tests d’exemple de Cypress, en cliquant sur Navigation : 

Et voilà ! Vous venez d’exécuter votre premier test, nous en verrons le détail prochainement !

Retrouvez les étapes de la configuration de Cypress et de l’exécution du test d’exemple en vidéo :

En résumé

• Vous pouvez installer Cypress rapidement en utilisant la commandenpm install cypress --save-dev  .      

• Il existe des extensions pour Cypress qui ajoutent des fonctions à l’outil.

• VsCode prend en charge entre autres les six extensions décrites pour Cypress.

• Cypress permet également de créer l’architecture du projet de test lors de la première exécution, en ajoutant trois dossiers en plus du fichier de configuration.

Parfait, maintenant que vous avez installé et configuré Cypress et même exécuté votre premier test, nous allons pouvoir définir les objectifs de vos tests en fonction de votre contexte !