Cypress – Alias

Quand utiliser les alias ?

🔄 Tu vas réutiliseralias.

🔢 Tu veux juste stocker une valeurvariable JS.

🕒 Tu fais une seule action/verification → rien.



🎯 Style guide Cypress : Alias vs Variables


Éléments DOM que tu réutilises dans plusieurs assertions ou actions.

cy.get('[data-testid="notes-list"] .card').as('cards');
cy.get('@cards').should('have.length.greaterThan', 0);Langage du code : JavaScript (javascript)



Requêtes réseau interceptées avec cy.intercept().

cy.intercept('GET', '/api/notes').as('getNotes');
cy.wait('@getNotes').its('response.statusCode').should('eq', 200);Langage du code : JavaScript (javascript)



Données JS que tu veux injecter dans le flow Cypress.

const user = { name: 'Alice' };
cy.wrap(user).as('user');
cy.get('@user').then(u => expect(u.name).to.eq('Alice'));Langage du code : JavaScript (javascript)



Éléments préparés dans les hooks (before, beforeEach) pour les réutiliser dans plusieurs tests.

beforeEach(() => {
  cy.get('header').as('header');
});

it('affiche le menu', () => {
  cy.get('@header').find('.menu').should('be.visible');
});Langage du code : JavaScript (javascript)

✅ Quand utiliser une variable JS classique


Valeurs simples ou temporaires (ex: un nombre, un token déjà connu).

const username = 'bob';
cy.get('#username').type(username);Langage du code : JavaScript (javascript)



Calculs ou fonctions utilitaires sans dépendance sur Cypress.

const randomId = Math.floor(Math.random() * 1000);Langage du code : JavaScript (javascript)



Quand tu n’as pas besoin du chaining Cypress (ex: juste comparer deux valeurs).

🚫 Quand éviter .as() ou une variable


Quand tu n’utilises l’élément qu’une seule fois → pas besoin d’alias inutile.

// Inutile d’aliaser si tu ne fais qu’un check direct
cy.get('.alert').should('contain', 'Erreur');Langage du code : JavaScript (javascript)



Quand tu stockes un résultat asynchrone mais que tu pourrais le traiter directement dans un .then().

cy.get('.card').then($el => {
  expect($el.length).to.be.greaterThan(0);
});Langage du code : JavaScript (javascript)