Guide Complet pour Créer un Projet Cypress Professionnel

🚀 Créer la structure de base du projet Cypress

Commencez par créer une arborescence propre pour vos tests automatisés, avec les fichiers de configuration et les tests d'exemple.

my-cypress-project/
├── cypress/
│   ├── e2e/
│   │   └── home.cy.js
│   ├── fixtures/
│   │   └── users.json
│   └── support/
│       ├── commands.js
│       └── e2e.js
├── cypress.config.js
├── package.json
└── README.md

Exemple de test d'entrée dans cypress/e2e/home.cy.js :

describe('Page d'accueil', () => {
  it('devrait charger la page principale', () => {
    cy.visit('/');
    cy.contains('Welcome');
  });
});

📋 Configurer les tests BDD avec Gherkin

Utilisez cypress-cucumber-preprocessor pour écrire vos tests en langage naturel Gherkin :

• Installer le preprocesseur : npm install --save-dev cypress-cucumber-preprocessor
• Créer un fichier feature dans cypress/e2e/login.feature
• Écrire les scénarios en Gherkin :

Feature: Connexion utilisateur
  Scenario: Utilisateur avec identifiants valides
    Given Je suis sur la page de connexion
    When Je saisis mes identifiants valides
    Then Je suis redirigé vers le tableau de bord

Implémentation des steps dans cypress/support/step_definitions/loginSteps.js :

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

Given('Je suis sur la page de connexion', () => {
  cy.visit('/login');
});
When('Je saisis mes identifiants valides', () => {
  cy.get('#username').type('user1');
  cy.get('#password').type('password');
  cy.get('button[type=submit]').click();
});
Then('Je suis redirigé vers le tableau de bord', () => {
  cy.url().should('include', '/dashboard');
});

📊 Gérer les Jeux de Données (Fixtures)

Centralisez vos données de test dans des fichiers JSON réutilisables dans plusieurs tests.

// cypress/fixtures/users.json
[
  { "id": 1, "name": "Test User 1", "email": "user1@example.com" },
  { "id": 2, "name": "Test User 2", "email": "user2@example.com" }
]

Exemple d’utilisation dans un test :

cy.fixture('users').then((users) => {
  cy.get('input#email').type(users[0].email);
});

📝 Écrire des étapes de test (Test Steps)

Organisez vos actions répétées en commandes personnalisées pour garder vos tests clairs et maintenables.

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  cy.get('#username').type(username);
  cy.get('#password').type(password);
  cy.get('button[type=submit]').click();
});

Puis utilisez-les dans vos tests :

describe('Login Tests', () => {
  it('se connecte avec succès', () => {
    cy.login('user1', 'password123');
    cy.url().should('include', '/dashboard');
  });
});

📈 Rapport de tests & Intégration CI/CD

Utilisez mochawesome pour générer des rapports HTML élégants, et intégrez vos tests dans GitHub Actions, GitLab CI, ou Jenkins.

// package.json (extrait)
"scripts": {
  "test": "cypress run --reporter mochawesome"
}

// Exemple workflow GitHub Actions: .github/workflows/test.yml
name: Cypress Tests
on: [push, pull_request]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run test