Comment vérifier si un élément existe ou non en utilisant Cypress ?

Cypress est un outil qui aide les développeurs et testeurs Web à s'assurer que leurs sites Web fonctionnent correctement. il peut vérifier si une certaine partie du site Web existe. Ceci est utile car cela permet de détecter les problèmes avant les utilisateurs. La présence d'éléments est l'une des premières choses que vous devriez tester avec Cypress dans votre projet. Dans cet article, nous verrons comment tester si un élément existe ou non. Aussi, s'il existe, comment vérifier s'il est visible ou non ?.

Que sont les éléments cyprès ?

• Les éléments des applications Web font référence à des éléments HTML individuels qui constituent la structure et le contenu d'une page Web.
• Des exemples d'éléments incluent des boutons, des zones de texte, des liens et des images, chacun avec ses propres attributs tels que l'identifiant, la classe et le style.
• Ces attributs peuvent être utilisés pour interagir avec des sélecteurs CSS ou JavaScript.

Les éléments sont importants car ils définissent la structure et le comportement d'une page.
En sélectionnant et en interagissant avec des éléments, vous pouvez créer des tests automatisés pour garantir que l'application Web se comporte comme prévu pour tous les utilisateurs.
Dans Cypress, les éléments sont les éléments HTML de votre site Web avec lesquels vous souhaitez interagir ou tester.
Pour interagir avec ou tester ces éléments, sélectionnez-les simplement à l'aide d'un sélecteur similaire au CSS.

Pourquoi l’existence des éléments est importante dans Cypress ?

Un site Web est comme un puzzle avec des pièces interactives telles que des boutons et des formulaires. Les tests consistent à s’assurer que ces pièces sont au bon endroit et fonctionnent correctement. Vérifier si un élément existe est important car différentes parties d'un site Web peuvent changer en fonction des actions de l'utilisateur.

Par exemple, un bouton « Soumettre » peut apparaître après avoir rempli un formulaire, il est donc nécessaire de vérifier s'il est apparu. Cela permet d'identifier les problèmes avant que les utilisateurs ne les rencontrent, permettant ainsi des expériences plus fluides.

Comment vérifier l’existence d’un élément à l’aide de Cypress ?

Cypress propose plusieurs méthodes pour vérifier l'existence d'éléments sur une page Web. Examinons chaque approche et comprenons comment les mettre en œuvre efficacement.

1. Méthode cy.get()

appareil-réel-cloud-cta.jpg
La méthode cy.get() dans Cypress est utilisée pour sélectionner et récupérer des éléments sur la page en fonction de divers sélecteurs tels que les noms de classe, les identifiants, les attributs, etc. Pour vérifier si un élément existe, les développeurs peuvent utiliser la commande Should() avec la méthode cy.get().

L'utilisation de l'assertion .should('exist') avec cy.get() garantit que l'élément sélectionné est présent sur la page.

2. Méthode cy.contains()

La méthode cy.contains() est utilisée pour rechercher un élément en fonction de son contenu textuel. Cette méthode peut également être utilisée pour vérifier si un élément avec un texte spécifique existe sur la page.

3. Méthode cy.find()

La méthode cy.find() est utile lorsqu'il s'agit d'éléments imbriqués dans un élément parent. Il vous permet de rechercher des éléments dans le contexte d'un autre élément, garantissant des recherches plus ciblées.

4. cy.get().should() avec des assertions personnalisées

Cypress permet aux développeurs de créer des assertions personnalisées à l'aide de la méthode cy.should(). Ceci est particulièrement utile lorsque vous souhaitez mettre en œuvre des contrôles plus spécifiques au-delà de la simple existence d'un élément.

5. Utiliser .should() avec Timeout

Parfois, les éléments peuvent se charger de manière asynchrone ou avec un léger retard. Dans de tels cas, vous pouvez utiliser l'assertion .should() avec un délai d'attente pour vous assurer que Cypress attend que l'élément apparaisse.

Tests conditionnels avec Cypress :
Les tests conditionnels dans Cypress consistent à intégrer une logique conditionnelle dans vos scripts de test pour prendre des décisions et effectuer des actions en fonction de conditions ou de résultats spécifiques lors de l'exécution du test. Cette méthode vous permet de concevoir des tests plus flexibles et adaptables, capables de gérer divers scénarios et de réagir en conséquence. Cypress propose une gamme de commandes et d'API que vous pouvez utiliser pour réaliser des tests conditionnels efficaces. Ce qui suit est une illustration de la façon dont Cypress peut être utilisé pour les tests conditionnels.

Exemple -1

Dans cet exemple, le script de test visite une page Web et effectue des tests conditionnels sur l'existence d'un élément ainsi que sur le titre de la page. Selon que les conditions sont remplies ou non, le script enregistre les messages correspondants dans la sortie de test Cypress.

appareil-réel-cloud-cta.jpg
Cypress fournit une syntaxe fluide et intuitive pour effectuer des tests conditionnels dans vos scripts de test. Vous pouvez utiliser des assertions, des promesses et une logique JavaScript régulière pour créer des conditions et des actions complexes basées sur les résultats de ces conditions.

Les tests conditionnels dans Cypress, similaires à d'autres frameworks de tests, vous aident à créer des tests plus polyvalents et efficaces qui peuvent s'adapter à différents scénarios, rendant votre processus de test plus robuste et fiable.

Exemple 2 :

Dans cet extrait de code, Cypress garantit d'abord l'existence de l'élément bouton en utilisant .should('exist'). Il récupère ensuite l'élément à l'aide de .then() et la vérification conditionnelle ultérieure détermine si le bouton existe. Si la condition est remplie, indiquant la présence du bouton, Cypress clique sur le bouton en utilisant cy.wrap(button).click(). Si la condition échoue, le bloc else facilite l'exécution d'une action alternative.

Applications réelles des contrôles d'existence d'éléments :

Pensons à quelques situations quotidiennes dans lesquelles vérifier l'existence d'un élément est très utile :

1. Message de réussite du formulaire

Une fois que les utilisateurs ont soumis un formulaire, un message de réussite peut apparaître. En utilisant Cypress, vous pouvez vérifier si ce message apparaît, en vous assurant que les utilisateurs savent que leur formulaire a été soumis avec succès.

2. Navigation dans les menus

Vous disposez d'un menu déroulant qui apparaît lorsque les utilisateurs survolent un bouton. Vous souhaitez confirmer que le menu apparaît lorsque les utilisateurs effectuent cette action de survol.

3. Conception réactive

Différents éléments peuvent apparaître ou disparaître sur les versions mobiles et de bureau de votre site. Vous pouvez utiliser Cypress pour vous assurer que ces éléments apparaissent ou se cachent comme prévu.

4. Contrôle d'accès des utilisateurs

Certains boutons ou liens peuvent n'être visibles que par certains types d'utilisateurs. Cypress vous aide à vérifier que ces éléments sont présentés aux bonnes personnes.

Lire aussi : Tests parallèles Cypress : un didacticiel étape par étape avec des exemples de code

Conclusion

Les tests Web ne sont plus une tâche difficile et fastidieuse, grâce à des outils comme Cypress. La fonctionnalité « si l'élément existe » résume l'essence des tests conditionnels, permettant aux développeurs et aux testeurs de créer des tests qui imitent fidèlement les interactions réelles des utilisateurs. Cette fonctionnalité simplifie non seulement les tests, mais encourage également une approche plus réfléchie du comportement des applications. En tirant parti des commandes intuitives et des assertions puissantes de Cypress, les développeurs peuvent rationaliser leurs suites de tests, réduire la redondance et créer des applications Web plus robustes. Alors, profitez de la puissance de Cypress et lancez-vous dans un voyage pour améliorer la qualité de vos projets de développement Web.

Source : Ce blog a été initialement publié sur testgrid.io

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!