Cypress

Introduction à Cypress

Cypress est un framework moderne pour automatiser les tests end-to-end d'applications web. Il est conçu pour simplifier les tests en fournissant un environnement intégré et des outils puissants pour écrire, exécuter et déboguer des tests.

Avantages de Cypress

Installation facile sans dépendances complexes.
Exécution rapide des tests directement dans le navigateur.
Outils de débogage intégrés et interactifs.
Support natif pour les tests synchrones.

Installation et Configuration

Prérequis

Node.js (version 14 ou supérieure).
npm (gestionnaire de paquets Node).

Étapes d'installation


        # Créer un nouveau projet Node.js
        npm init -y

        # Installer Cypress
        npm install cypress --save-dev

Pour ouvrir Cypress après l'installation :


        npx cypress open

Cela ouvre l'interface utilisateur de Cypress où vous pouvez gérer vos tests.

Écrire un Test Basique

Exemple de Test

Ajoutez le fichier suivant dans le dossier cypress/e2e :


        describe('Exemple de Test', () => {
        it('Vérifie le titre de la page', () => {
        cy.visit('https://example.com');
        cy.title().should('eq', 'Example Domain');
        });
        });

Exécutez le test via l'interface utilisateur ou avec la commande suivante :


        npx cypress run

Page Object Model (POM) avec Cypress

Le Page Object Model est une structure qui sépare les tests des interactions avec les éléments de la page.

Exemple

1. Créer une classe pour une page (`cypress/pages/LoginPage.js`) :


        class LoginPage {
        navigate() {
        cy.visit('https://example.com/login');
        }

        enterUsername(username) {
        cy.get('#username').type(username);
        }

        enterPassword(password) {
        cy.get('#password').type(password);
        }

        clickLogin() {
        cy.get('#loginButton').click();
        }
        }

        export default LoginPage;

2. Utiliser la page dans un test (`cypress/e2e/login.spec.js`) :


        import LoginPage from '../pages/LoginPage';

        describe('Test de Connexion', () => {
        const loginPage = new LoginPage();

        it('Connexion avec POM', () => {
        loginPage.navigate();
        loginPage.enterUsername('admin');
        loginPage.enterPassword('password123');
        loginPage.clickLogin();
        cy.contains('Bienvenue').should('be.visible');
        });
        });

Tests Avancés

Utilisation des Fixtures

Les fixtures permettent de gérer les données de test dans des fichiers JSON. Exemple :

1. Créez un fichier JSON (`cypress/fixtures/users.json`) :


        {
        "validUser": {
        "username": "admin",
        "password": "password123"
        },
        "invalidUser": {
        "username": "fakeUser",
        "password": "fakePassword"
        }
        }

2. Utilisez les données dans un test :


        describe('Test avec Fixtures', () => {
        before(() => {
        cy.fixture('users').as('users');
        });

        it('Connexion avec utilisateur valide', function () {
        cy.visit('https://example.com/login');
        cy.get('#username').type(this.users.validUser.username);
        cy.get('#password').type(this.users.validUser.password);
        cy.get('#loginButton').click();
        cy.contains('Bienvenue').should('be.visible');
        });
        });

Exécution et Intégration Continue

Commandes pour exécuter les tests

Pour exécuter tous les tests :


        npx cypress run

Pour exécuter un test spécifique :


        npx cypress run --spec "cypress/e2e/login.spec.js"

Intégration avec CI/CD

Pour intégrer Cypress avec un pipeline (par exemple, GitHub Actions ou GitLab CI/CD), ajoutez le script suivant dans votre pipeline :


        steps:
        - name: Installer les dépendances
        run: npm install

        - name: Exécuter les tests Cypress
        run: npx cypress run