Tests end-to-end avec Cypress, couvrant le setup, les commandes personnalisées, les fixtures, l'interception réseau et l'intégration CI. Se déclenche avec "Cypress", "test e2e", "end-to-end Cypress", "cy.get", "cypress.config. Also triggers on "Cypress tests", "end-to-end testing", "intercept network in tests".
Tests end-to-end avec Cypress, couvrant le setup, les commandes personnalisées, les fixtures, l'interception réseau et l'intégration CI. Se déclenche avec "Cypress", "test e2e", "end-to-end Cypress", "cy.get", "cypress.config. Also triggers on "Cypress tests", "end-to-end testing", "intercept network in tests".
Cypress E2E Guide
1. Installation et configuration initiale
npm install cypress --save-dev
npx cypress open # génère la structure + ouvre l'UI de sélection
Critère de découpage : un fichier = un parcours utilisateur (pas un composant). Garder chaque spec indépendante : elle doit passer en isolation (npx cypress run --spec 'cypress/e2e/auth/login.cy.ts').
3. Sélecteurs robustes
Priorité décroissante :
data-testid (jamais touché par les refactos CSS/texte)
aria-label / rôle ARIA (bonus accessibilité)
cy.contains() pour les textes stables (labels, titres de page)
Sélecteur CSS — en dernier recours uniquement
<!-- HTML --><buttondata-testid="submit-order">Commander</button>
// Test
cy.get('[data-testid="submit-order"]').click();
// Dans le test
cy.fixture('user').then((user) => {
cy.get('[data-testid="name-field"]').type(user.name);
});
// Ou avec alias (recommandé)beforeEach(() => {
cy.fixture('user').as('user');
});
it('affiche le nom', function () {
cy.get('[data-testid="name-field"]').should('contain.value', this.user.name);
});
6. Interception réseau
// Stubber une réponse
cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts');
cy.visit('/shop');
cy.wait('@getProducts');
cy.get('[data-testid="product-list"]').should('have.length', 3);
// Intercepter et modifier à la volée
cy.intercept('POST', '/api/orders', (req) => {
req.reply({ statusCode: 422, body: { error: 'Stock insuffisant' } });
}).as('failOrder');
// Espionner sans modifier
cy.intercept('GET', '/api/cart').as('getCart');
cy.wait('@getCart').its('response.statusCode').should('eq', 200);
Critère : utiliser cy.intercept() + cy.wait('@alias') systématiquement à la place de cy.wait(ms).
