Internet avec Cypress : scénarios du monde réel tirés du terrain de jeu « Internet » de Heroku

Je suis récemment allé sur chatGPT et j'ai demandé quels bons exercices d'automatisation il pourrait y avoir, après un certain temps en travaillant sur le même système, ou en fournissant une automatisation uniquement pour un type spécifique de flux d'utilisateurs, nous on peut finir par oublier certaines choses, alors j'ai demandé quelques sites pour pratiquer et j'ai trouvé internet.
Et aussi rudimentaire que puisse paraître le site, ils offrent toujours un endroit pour essayer une certaine automatisation et pour le moment, c'était tout ce dont j'avais besoin. J'ai mis du temps et relevé quelques défis Web classiques en utilisant Cypress.
Alors, sans plus tarder, plongeons dans quelques scénarios que j'ai automatisés, couvrant tout, des boutons qui vont et viennent comme par magie, des glisser-déposer étranges, l'automatisation liée aux fichiers et un travail rapide sur Shadow DOM !

1. Glisser-Déposer : Si vous avez déjà essayé d'automatiser le glisser-déposer, vous savez que ce n'est jamais aussi simple qu'il y paraît. Bien que Cypress prenne en charge nativement certaines interactions (et j'ai essayé ça mdr), il faut encore un peu de créativité pour obtenir le test du glisser-déposer juste ici.

Dans ce cas, j'ai expérimenté une commande dragAndDrop personnalisée, en utilisant trigger('mousedown'), trigger('dragover') et trigger('mouseup'). En raison de la manière dont la fonctionnalité a été implémentée sur ce site, j'ai dû creuser un peu plus pour que ces tests fonctionnent, mais il semble que pour la plupart des applications modernes, le plugin cypress devrait suffire (heureusement).

1. Ajouter/Supprimer des éléments :

Le bouton « Ajouter un élément » dans cet exercice est simple en théorie, mais c'est drôle de voir comment ce terrain de jeu essaie parfois de gâcher vos attentes, haha. Cliquez dessus une fois, et puis... Un bouton Supprimer apparaît (ce qui n'est pas super intuitif mais bon, il suffit de faire avec). L’astuce consiste à nous assurer que nous gérons la danse ajout-suppression d’une manière stable et reproductible dans nos tests. Avec Cypress, nous vérifions si le bouton apparaît, en ajoutons quelques autres, puis les supprimons un par un, en nous assurant que la séquence ne présente pas de problème.

Conseil de pro :
Le suivi des éléments qui apparaissent et disparaissent peut être délicat, mais les assertions Cypress .should('exist') et .should('not.exist') gèrent cela bien. De plus, vous obtenez une douce confirmation visuelle à chaque fois.

1. Contenu dynamique :

Je pense que c'est le plus simple des exemples de cet article, mais il peut quand même être intéressant, l'idée était juste de créer des tests qui garantiraient que le format du contenu serait constant, même si son contenu le serait change toujours... peut quand même être utile pour apprendre.

Cypress peut confirmer que les éléments se chargent comme prévu sans être trop pointilleux sur le contenu réel, ce qui maintient les tests résilients.

1. Contrôles dynamiques :

Pour celui-ci, des contrôles tels que des cases à cocher et des boutons apparaissent ou disparaissent en fonction de l'interaction de l'utilisateur. Certains nécessitent d'attendre la disparition d'un indicateur de chargement. Ici, les cy.wait et .should('be.visible') de Cypress sont essentiels.

Conseil rapide :

Au lieu d'attentes codées en dur, utilisez des assertions telles que .should('exist') et .should('be.disabled') pour réagir au statut de la page. Cela rend les tests plus robustes et adaptables.

1. Téléchargement de fichiers :

Télécharger un fichier peut sembler simple jusqu'à ce que vous deviez prouver que cela s'est réellement produit. Avec Cypress, nous pouvons faire différentes choses pour nous assurer qu'un fichier a bien été téléchargé.

Nous pouvons faire différentes choses pour nous assurer qu'un téléchargement a été effectué, pour cette application, je me suis juste assuré que nous avions le fichier dans le dossier de téléchargement après avoir cliqué sur le lien. C'était très simple, une fois le fichier là, le test passe automatiquement. D'autres stratégies pourraient être appliquées, comme utiliser cy.intercept pour vérifier qu'une demande de téléchargement a été déclenchée par exemple.

1. Téléchargement de fichiers : Tout comme le téléchargement de fichiers, le téléchargement de fichiers est étonnamment fluide avec Cypress.

Pour ce type de scénario, vous pouvez utiliser quelque chose comme cypress-file-upload
qui est un plugin très bon et utile, et confirmez que le fichier est traité par l'application.

Dans mon exemple, tout ce qui a été fait s'est fait via la commande .selectFile et il existe un moyen de le faire sans même envoyer de fichier réel, en utilisant simplement Cypress.Buffer devrait faire l'affaire (vous pouvez voir l'implémentation à l'intérieur le référentiel lié ci-dessous).

Et cela a fonctionné pour les téléchargements effectués en cliquant sur un bouton ainsi que pour les téléchargements par glisser-déposer, extrêmement simple... merci cyprès ?.

1. Shadow DOM :

Le mystère du Shadow DOM est que les éléments sont comme un secret à l'intérieur du DOM principal. Ils sont cachés et ne suivent pas les règles de visibilité CSS habituelles, ce qui peut être un peu délicat selon la manière dont vous devez exécuter des automatisations sur eux. Heureusement, Cypress prend en charge la commande shadow pour percer ce voile et trouver ces éléments cachés.

Pour ces tests, j'ai utilisé cy.get('element').shadow() pour accéder aux éléments du Shadow DOM, et ensuite, plus de problèmes ou de difficultés, vous pouvez accéder et faire des assertions sur les éléments comme vous le feriez avec des habitués.

---

Et c'est tout pour l'instant... juste 6 exemples rapides sur la façon dont nous pouvons utiliser Cypress pour gérer certaines utilisations de base de l'automatisation du navigateur, et comment l'exploiter pour vous faciliter la vie lorsque vous traitez de tels cas .

Prêt à l'essayer ?

Si vous souhaitez essayer ces tests ou les adapter à vos projets, j'ai mis le code à disposition sur mon dépôt GitHub. Les suites de tests sont très légères, il ne devrait donc pas y avoir trop de points de doute et nous avons le flux GitHub Actions, que vous pouvez utiliser pour voir comment tout cela fonctionne en action ! Merci, à la prochaine fois !

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!