Introduction

Dans notre article précédent, nous avons présenté le concept de commandes personnalisées dans Cypress et démontré comment elles peuvent simplifier et améliorer votre cadre de test. Cet article de suivi approfondit les meilleures pratiques de création et d'utilisation de commandes personnalisées, en fournissant des exemples détaillés pour garantir que vos tests sont maintenables, lisibles et robustes.

Pourquoi les meilleures pratiques sont importantes

Le respect des meilleures pratiques lors de la création de commandes personnalisées garantit que vos tests restent évolutifs, faciles à comprendre et rapides à mettre à jour. Des commandes personnalisées correctement structurées peuvent réduire considérablement la duplication de code et améliorer la qualité globale de votre suite de tests.

Meilleures pratiques pour les commandes personnalisées

1. Nommez clairement les commandes
Des noms clairs et descriptifs rendent vos commandes faciles à comprendre et à utiliser. Un bon nom de commande doit exprimer son objectif sans avoir besoin de contexte supplémentaire.
Exemple:

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

Usage:

// cypress/integration/login.spec.js
describe('Login Tests', () => {
  it('Should login with valid credentials', () => {
    cy.login('[email protected]', 'password123');
    cy.url().should('include', '/dashboard');
  });
});

2. Paramétrer les commandes
Les commandes doivent accepter des paramètres pour améliorer leur flexibilité et leur réutilisabilité. Cela permet d'utiliser la même commande dans différents contextes avec des données différentes.

Exemple:

// cypress/support/commands.js
Cypress.Commands.add('fillForm', (formData) => {
  cy.get('input[name=firstName]').type(formData.firstName);
  cy.get('input[name=lastName]').type(formData.lastName);
  cy.get('input[name=email]').type(formData.email);
  cy.get('button[type=submit]').click();
});

Usage:

// cypress/integration/form.spec.js
describe('Form Tests', () => {
  it('Should submit the form with valid data', () => {
    const formData = {
      firstName: 'John',
      lastName: 'Doe',
      email: '[email protected]'
    };
    cy.fillForm(formData);
    cy.get('.success-message').should('be.visible');
  });
});

3. Commandes en chaîne
Assurez-vous que les commandes personnalisées renvoient les chaînables Cypress à l'aide de cy.wrap() pour activer le chaînage et maintenir le flux des commandes Cypress.

Exemple:

// cypress/support/commands.js
Cypress.Commands.add('selectDropdown', (selector, value) => {
  cy.get(selector).select(value).should('have.value', value);
  return cy.wrap(value);
});

Usage:

// cypress/integration/dropdown.spec.js
describe('Dropdown Tests', () => {
  it('Should select a value from the dropdown', () => {
    cy.visit('/dropdown-page');
    cy.selectDropdown('#dropdown', 'Option 1').then((value) => {
      expect(value).to.equal('Option 1');
    });
  });
});

4. Commandes de document
Ajoutez des commentaires à vos commandes personnalisées pour décrire leur objectif et leur utilisation. Cela aide les autres développeurs à comprendre votre code et à l'utiliser correctement.

Exemple:

// cypress/support/commands.js

/**
 * Custom command to login to the application
 * @param {string} email - User email
 * @param {string} password - User password
 */
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('input[name=email]').type(email);
  cy.get('input[name=password]').type(password);
  cy.get('button[type=submit]').click();
});

5. Modulariser les actions communes
Encapsulez les actions courantes dans des commandes personnalisées pour promouvoir la réutilisation et réduire la duplication. Cela rend également les tests plus lisibles en faisant abstraction des interactions complexes.

Exemple:

// cypress/support/commands.js
Cypress.Commands.add('addItemToCart', (itemName) => {
  cy.get('.product-list').contains(itemName).click();
  cy.get('.add-to-cart').click();
});

Usage:

// cypress/integration/cart.spec.js
describe('Cart Tests', () => {
  it('Should add an item to the cart', () => {
    cy.visit('/shop');
    cy.addItemToCart('Laptop');
    cy.get('.cart-items').should('contain', 'Laptop');
  });
});

Conclusion

En suivant ces bonnes pratiques, vous pouvez créer des commandes personnalisées dans Cypress qui sont non seulement puissantes, mais également maintenables et faciles à comprendre. Une dénomination, un paramétrage, un chaînage, une documentation et une modularisation clairs sont essentiels à l'écriture de commandes personnalisées efficaces. Mettez en œuvre ces pratiques dans votre cadre d'automatisation des tests pour améliorer la qualité et l'efficacité de vos tests.

Commencez à affiner vos commandes personnalisées dès aujourd'hui et faites passer vos tests Cypress au niveau supérieur. Bon test !