Utiliser Cypress et Cucumber pour des tests automatisés efficaces

Aujourd'hui, nous allons explorer comment combiner Cypress, un framework de test end-to-end, avec Cucumber, un outil de spécification de test basé sur le langage naturel Gherkin afin de créer des tests automatisés plus expressifs et faciles à comprendre.

Prérequis: Avant de commencer, assurez-vous d'avoir Node.js et npm installés sur votre machine. Vous devriez également avoir une application web existante ou une page web.

Télécharger Node.js : https://nodejs.org/fr/download

Étape 1 : configuration de l'environnement

Commencez par créer un nouveau projet Node.js et installez les dépendances requises :

mkdir test-cypress-cucumber
cd test-cypress-cucumber
npm init -y
npm install cypress cucumber cypress-cucumber-preprocessor --save-dev

Étape 2 : configuration de Cypress et Cucumber

Créez le fichier de configuration de Cypress (`cypress.json`) et ajoutez les paramètres suivants :

{
  "testFiles": "**/*.feature"
}

Ensuite, créez le fichier `cypress/plugins/index.js` et ajoutez les lignes suivantes :

const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  on('file:preprocessor', cucumber());
};

Étape 3 : écrire des scénarios en Gherkin

Créez un répertoire `cypress/integration` et ajoutez un fichier `.feature` pour écrire vos scénarios en langage Gherkin.

Par exemple :

# cypress/integration/sample.feature

Feature: Recherche sur le site
  En tant qu'utilisateur
  Je souhaite rechercher des articles sur le site
  Afin de trouver des sujets intéressants à lire

  Scenario: Recherche d'articles par mot-clé
    Given J'ouvre la page d'accueil
    When Je saisis "Cypress" dans la barre de recherche
    And Je clique sur le bouton de recherche
    Then Je devrais voir une liste d'articles liés à "Cypress"

Étape 4 : définir les étapes (step definitions)

Créez un répertoire `cypress/support` et ajoutez un fichier `step_definitions.js` pour définir les étapes de vos scénarios en utilisant Cypress :

// cypress/support/step_definitions.js

import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';

Given('J\'ouvre la page d\'accueil', () => {
  cy.visit('/');
});

When('Je saisis {string} dans la barre de recherche', (keyword) => {
  cy.get('input[name="search"]').type(keyword);
});

When('Je clique sur le bouton de recherche', () => {
  cy.get('button[type="submit"]').click();
});

Then('Je devrais voir une liste d\'articles liés à {string}', (keyword) => {
  cy.get('.search-results').should('contain', keyword);
});

Étape 5 : exécuter les tests

Enfin, vous pouvez exécuter les tests avec la commande suivante :

npx cypress open

Sélectionnez le fichier de fonctionnalités que vous souhaitez tester dans la fenêtre Cypress, et les tests s'exécuteront dans votre navigateur.

Bravo ! 👏 Vous savez maintenant comment utiliser Cypress et Cucumber pour écrire des tests automatiques super clairs avec le langage Gherkin. Cette technique rend vos tests plus faciles à saisir, à entretenir et à partager avec tous les autres membres de votre équipe (Dev/PO/Designer).

N'hésitez pas à explorer davantage les fonctionnalités offertes par Cypress et Cucumber pour améliorer encore vos tests automatisés.