Introduction

Cypress est un outil puissant pour les tests de bout en bout, offrant un ensemble robuste de commandes intégrées pour interagir avec les applications Web. Cependant, chaque projet a des besoins uniques qui peuvent ne pas être entièrement couverts par l'ensemble de commandes par défaut. C'est là qu'interviennent les commandes personnalisées. Les commandes personnalisées vous permettent d'étendre les fonctionnalités de Cypress, rendant vos tests plus lisibles et maintenables. Dans cet article, nous explorerons comment créer et utiliser des commandes personnalisées dans Cypress pour améliorer votre cadre d'automatisation des tests.

Pourquoi utiliser des commandes personnalisées ?

Les commandes personnalisées offrent plusieurs avantages :

1. Réutilisabilité : Encapsulez les actions courantes qui sont répétées sur plusieurs tests.
2. Maintenabilité : Centralisez la logique des actions complexes, de sorte que les modifications ne doivent être apportées qu'à un seul endroit.
3. Lisibilité : Améliorez la lisibilité de vos tests en supprimant les détails d'implémentation.

Configuration de Cyprès

Avant de nous lancer dans la création de commandes personnalisées, configurons Cypress si vous ne l'avez pas déjà fait :

npm install cypress --save-dev

Après l'installation, ouvrez Cypress :

npx cypress open

Création de commandes personnalisées

Les commandes personnalisées Cypress sont définies dans le fichier cypress/support/commands.js. Passons en revue quelques exemples pour voir comment vous pouvez créer et utiliser des commandes personnalisées.

Exemple 1 : Commande de connexion
Supposons que vous disposiez d’un formulaire de connexion avec lequel vous devez interagir fréquemment. Vous pouvez créer une commande personnalisée pour gérer le processus de connexion :

// 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();
});

Vous pouvez désormais utiliser la commande login dans vos tests :

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

Exemple 2 : commande personnalisée avec assertions
Vous pouvez également ajouter des assertions personnalisées à vos commandes. Créons une commande pour vérifier si un élément est visible et contient un texte spécifique :

// cypress/support/commands.js
Cypress.Commands.add('shouldBeVisibleWithText', (selector, text) => {
  cy.get(selector).should('be.visible').and('contain.text', text);
});

Utilisation dans un test :

// cypress/integration/visibility.spec.js
describe('Visibility Tests', () => {
  it('Should display welcome message', () => {
    cy.visit('/home');
    cy.shouldBeVisibleWithText('.welcome-message', 'Welcome to the Dashboard');
  });
});

Meilleures pratiques pour les commandes personnalisées

1. Nommez clairement les commandes : Utilisez des noms descriptifs pour vos commandes personnalisées afin de rendre les tests plus compréhensibles.
2. Paramétrer les commandes : Acceptez les paramètres pour rendre les commandes flexibles et réutilisables.
3. Commandes de chaîne : Assurez-vous que les commandes renvoient les chaînables Cypress (cy.wrap()) pour activer le chaînage.
4. Commandes de document : Ajoutez des commentaires pour décrire l'objectif et l'utilisation de chaque commande personnalisée.

Conseils avancés

1. Prise en charge de TypeScript : Si vous utilisez TypeScript, vous pouvez ajouter des définitions de type pour vos commandes personnalisées afin d'améliorer la saisie semi-automatique et la vérification du type.
2. Gestion des erreurs : Implémentez la gestion des erreurs dans les commandes personnalisées pour fournir des commentaires informatifs en cas de problème.
3. Fonctions réutilisables : Pour une logique complexe, créez des fonctions d'assistance qui peuvent être utilisées dans des commandes personnalisées pour garder votre fichier commands.js propre et ciblé.

Conclusion

Les commandes personnalisées dans Cypress offrent un moyen puissant d'étendre les capacités du framework, rendant vos tests plus réutilisables, maintenables et lisibles. En encapsulant des actions courantes et en ajoutant des assertions personnalisées, vous pouvez rationaliser votre processus d'automatisation des tests et vous concentrer sur ce qui compte le plus : garantir le fonctionnement impeccable de votre application.

Commencez dès aujourd'hui à implémenter des commandes personnalisées dans vos projets Cypress et voyez la différence qu'elles peuvent faire dans votre flux de travail de test. Bon test !