Introduction à l’interface de Cypress

Lorsque vous lancez Cypress pour la première fois, vous êtes accueilli par une interface utilisateur (UI) conviviale conçue pour simplifier votre expérience de test.

Pour lancer l’interface de Cypress, vous devez exécuter :

npx cypress open

Comme vous l’avez vu lors du chapitre Introduction à Cypress, vous avez une page de bienvenue :

Comme vous l’avez configuré précédemment, vous pouvez voir Configured sous E2E Testing ; alors que si vous n’avez pas configuré Component Testing, vous allez voir Not Configured.

Cliquez sur E2E Testing.

Ensuite, choisissez votre navigateur préféré ; vous pouvez toujours changer cette option lors de l’exécution de vos cas de tests.

Le navigateur que vous avez choisi s’ouvre. Pour la suite du livre, nous avons utilisés Chrome. Vous devez avoir cette fenêtre :

Deux choix se proposent à vous : installer tous les exemples qui ont été créés par Cypress ou créer un nouveau cas de test appelé spec.

Cliquez sur Scaffold examples specs pour installer tous les exemples de Cypress. Nous les parcourrons ensuite.

Cypress a installé tous les exemples, comme vous pouvez le voir dans l’architecture de votre projet.

Vous retrouvez deux nouveaux dossiers : 1-getting-started...

Cypress selector playground

Cypress selector playground est un outil intégré à Cypress qui vous permet de tester et d’expérimenter des sélecteurs en temps réel directement dans le navigateur. Lorsque vous travaillez dans un environnement de test, trouver les bons sélecteurs pour cibler des éléments spécifiques dans le DOM peut être délicat et chronophage. Le selector playground simplifie ce processus en fournissant un moyen interactif d’expérimenter et d’obtenir instantanément un retour sur vos sélecteurs.

En cliquant sur n’importe quel élément dans la fenêtre de votre application lors de l’exécution de Cypress, selector playground générera un sélecteur unique pour cet élément. Il fournit le sélecteur qui a la plus grande spécificité pour l’élément, souvent en utilisant des attributs comme class, id, ou data-*, si disponibles.

Sur votre test actions.cy.js, sur la partie de droite, vous retrouvez votre navigateur où vous pouvez voir les tests défiler. Vous y retrouvez aussi le selector playground de Cypress sous forme de cible :

Cliquez sur la cible.

Un nouveau panneau s’affiche comme ceci, vous pouvez y voir que la référence est trouvée avec l’icône 1 match :

Vous pouvez taper ou coller...

Écrivez votre premier test Cypress

L’écriture d’un script de test avec Cypress commence par la définition d’un scénario de test simple mais significatif. Prenons l’exemple de la vérification du titre d’une page web. Le processus est le suivant :

Initialisation du test : on commence par définir le contexte du test en utilisant Mocha.

Mocha est un framework de tests populaire pour JavaScript. Il est conçu pour exécuter des tests à la fois sur Node.js et dans les navigateurs, ce qui le rend adapté pour tester des applications web. Prenons une définition simple avec describe et it :

describe('Vérification du titre de la page', () => {  
  it('devrait afficher le titre correct', () => {  
    // Contenu du test  
  });  
});

Navigation vers la page : utilisez cy.visit(url) pour naviguer vers la page souhaitée. Par exemple :

cy.visit('https://www.exemple.com');

Vous pouvez travailler en local. Ce sera, par exemple :

cy.visit('localhost:8080');

Sélection et vérification : sélectionnez l’élément à tester (dans ce cas, le titre de la page) et vérifiez son contenu ou ses propriétés. Pour vérifier le titre, on peut utiliser :

cy.title() pour obtenir la propriété document.title...

Déboguez vos tests

1. Types de messages d’erreur

Lors de la mise en place des tests avec Cypress, plusieurs types d’erreurs peuvent survenir, reflétant les diverses problématiques auxquelles une application peut faire face.

Ces erreurs vous fournissent des informations pour le débogage et l’amélioration de la qualité de votre application.

Voici une liste de certains des types d’erreurs courants que vous pourriez rencontrer :

Éléments non trouvés : indique que Cypress ne peut pas localiser un élément du DOM attendu. Ce message peut indiquer un sélecteur incorrect ou que l’élément n’est pas encore chargé.

Timeouts : cette erreur survient lorsque quelque chose prend trop de temps pour se compléter. Cela peut concerner la recherche d’un élément, l’attente d’une réponse d’une requête API, ou d’autres opérations qui dépassent le temps d’attente défini.

Assertions échouées : ces erreurs se produisent lorsque le résultat d’une opération ne correspond pas à ce qui était attendu. Les assertions sont des vérifications programmées dans le test pour confirmer que l’application se comporte comme prévu.

Erreurs de Cross-Origin : ces erreurs se produisent lorsque Cypress tente d’accéder à une ressource ou une URL qui est en dehors du domaine du test. Cypress a des politiques strictes en matière de sécurité pour éviter les interactions entre différents domaines.

2. Utilisez les captures d’écrans

Dans l’interface de Cypress, vous pouvez voir la liste des tests...

Appliquez les bonnes pratiques recommandées par Cypress

Cypress recommande des bonnes pratiques, dont voici quelques-unes :

Structuration des tests

Utilisez une organisation logique de vos tests pour maintenir la clarté et la facilité de maintenance. Utilisez describe pour regrouper des tests similaires, créant ainsi une structure hiérarchique et thématique. À l’intérieur de chaque groupe, utilisez it pour définir les tests individuels. Assurez-vous également que les titres des tests sont descriptifs et clairs, de manière à ce que quelqu’un qui les lit puisse immédiatement comprendre ce que le test est censé vérifier.

Utilisation des commentaires

Les commentaires sont un outil puissant pour améliorer la compréhension des tests. Ajoutez des commentaires pertinents pour expliquer les parties complexes ou moins intuitives du test, ce qui facilite la maintenance et la compréhension pour d’autres développeurs. Cependant, évitez les redondances en ne commentant pas ce qui est déjà évident dans le code. Les commentaires doivent apporter une réelle valeur ajoutée et ne pas encombrer le code.

Bonnes pratiques de codage

Adoptez le principe DRY (Don’t Repeat Yourself) pour éviter la duplication du code. Réutilisez le code autant que possible et utilisez des fonctions pour...

Premiers pas avec Cypress