Cas pratiques Cypress

Contexte Un lien "Contact" redirige vers la page /contact. Le Problème Il faut vérifier que le clic sur le lien redirige correctement l’utilisateur. Contraintes Utiliser cy.contains() pour cliquer sur le lien et vérifier l’URL via cy.url().should('include', '/contact'). Livrable attendu Un test Cypress validant la navigation correcte.

Contexte Un formulaire contient un champ select pour choisir un pays. Le Problème Il faut automatiser la sélection de l’option "France" et vérifier qu’elle est bien sélectionnée. Contraintes Utiliser la commande select() de Cypress et vérifier la valeur sélectionnée via should('have.value', ...). Livrable attendu Un test Cypress simple validant la sélection correcte dans une liste déroulante.

Contexte Une page affiche une liste d’articles récupérés dynamiquement. Le Problème Il faut vérifier que la liste contient au moins trois éléments. Contraintes Utiliser cy.get() pour cibler les éléments de la liste et vérifier leur longueur avec une assertion adaptée. Livrable attendu Un test Cypress validant correctement la présence d’éléments dans la liste.

Contexte Un formulaire contient un champ "Nom" et un bouton "Envoyer". Après soumission, un message "Merci" apparaît. Le Problème Il faut automatiser la saisie du nom "Alice" et vérifier l’apparition du message. Contraintes Utiliser cy.get() pour cibler les éléments, type() pour la saisie et contains() pour vérifier le message. Livrable attendu Un test Cypress simple validant le bon fonctionnement du formulaire.

Contexte Un test vérifie qu’un message d’erreur apparaît après une connexion invalide. Le Problème Le code actuel : cy.get('.error-message').should('exist'); Le message peut exister dans le DOM mais ne pas être visible. Contraintes Adapter l’assertion pour vérifier que le message est visible et contient le texte attendu. Livrable attendu Un test Cypress plus robuste validant correctement l’affichage du message d’erreur.

Contexte Un test doit vérifier qu’un élément enfant est présent dans une carte produit. Le Problème Le code actuel : cy.get('.product-card').find('Buy').click(); Le sélecteur passé à find() est incorrect. Contraintes Corriger le sélecteur pour cibler correctement le bouton via une classe ou un attribut fiable. Livrable attendu Un test Cypress fonctionnel ciblant correctement l’élément enfant.

Contexte Un bouton apparaît après une action utilisateur et le test tente de cliquer immédiatement dessus. Le Problème Le code actuel : cy.get('#loadData').click(); cy.get('#result').click(); L’élément "result" n’est pas encore visible au moment du clic. Contraintes Adapter le test pour attendre automatiquement la visibilité de l’élément avant interaction. Livrable attendu Un test Cypress stabilisé utilisant les assertions intégrées pour garantir la visibilité.

Contexte Un test utilise un alias pour réutiliser un élément DOM. Le Problème Le code actuel : cy.get('#email').as('inputEmail'); cy.get('@email').type('user@test.com'); L’alias utilisé n’est pas cohérent. Contraintes Corriger uniquement l’utilisation de l’alias pour assurer la cohérence. Livrable attendu Un test Cypress fonctionnel utilisant correctement les alias.

Contexte Un test Cypress vérifie la connexion d’un utilisateur en cliquant sur un bouton "Se connecter" après saisie des identifiants. Le Problème Le code suivant échoue car le sélecteur est incorrect : cy.visit('/login'); cy.get('#email').type('user@test.com'); cy.get('#password').type('123456'); cy.get('#loginBtn').click(); Le bouton réel possède l’attribut data-cy="submit-login". Contraintes Corriger uniquement le sélecteur du bouton pour utiliser une stratégie plus fiable sans modifier la logique du test. Livrable attendu Un test Cypress corrigé permettant une connexion fonctionnelle.

Contexte La page d’accueil doit afficher un titre principal "Bienvenue". Le Problème Aucun test Cypress n’existe pour vérifier la présence de ce titre. Contraintes Écrire un test qui visite la page d’accueil et vérifie que le texte "Bienvenue" est visible dans un élément h1. Utiliser une assertion claire et lisible. Livrable attendu Un test Cypress simple validant l’affichage correct du titre.

Contexte Une page permet de télécharger un fichier PDF après clic sur un bouton. Le Problème Il faut vérifier que le fichier est bien téléchargé et présent dans le dossier prévu. Contraintes Configurer Cypress pour gérer les téléchargements et vérifier l’existence du fichier via cy.readFile() ou tâche Node adaptée. Livrable attendu Un test Cypress validant correctement le téléchargement du fichier.

Contexte Une application maintient la session utilisateur après authentification. Le Problème Les tests répètent la connexion dans chaque cas, ralentissant la suite. Contraintes Mettre en place une commande personnalisée ou utiliser cy.session() pour conserver la session entre tests tout en garantissant l’isolation. Livrable attendu Une suite de tests Cypress optimisée utilisant une gestion efficace des sessions.

Contexte Un bouton est temporairement recouvert par un overlay de chargement. Le Problème Le test actuel : cy.get('#submit').click(); L’action échoue car l’élément n’est pas interactif au moment du clic. Contraintes Ajouter une assertion garantissant la disparition de l’overlay avant de cliquer. Éviter l’utilisation abusive de force: true. Livrable attendu Un test Cypress fiable respectant le comportement réel de l’interface.

Contexte Un test tente de récupérer un texte puis d’utiliser sa valeur. Le Problème Le code actuel : const text = cy.get('#price').invoke('text'); expect(text).to.equal('10'); La variable ne contient pas la valeur attendue. Contraintes Utiliser correctement le chaînage Cypress et les callbacks then() pour accéder à la valeur réelle. Livrable attendu Un test Cypress corrigé respectant le modèle asynchrone du framework.

Contexte Un test appelle une fonction personnalisée retournant une promesse. Le Problème Le code actuel : myAsyncFunction().then(() => { cy.get('#result').should('exist'); }); Le flux Cypress n’attend pas correctement la résolution. Contraintes Adapter le test pour intégrer correctement la promesse dans la chaîne Cypress via cy.wrap() ou commande personnalisée. Livrable attendu Un test Cypress respectant la gestion asynchrone propre au framework.

Contexte Une page intègre un formulaire dans une iframe externe. Le Problème Le test actuel : cy.get('#iframe-form').find('input').type('Test'); Les éléments internes ne sont pas accessibles directement. Contraintes Accéder correctement au contenu de l’iframe via son document et interagir avec les éléments internes en respectant les bonnes pratiques Cypress. Livrable attendu Un test Cypress capable d’interagir avec des éléments situés dans une iframe.

Contexte Une page charge une liste de produits via une requête GET /api/products au chargement. Le Problème Le test actuel vérifie immédiatement le nombre d’éléments : cy.visit('/products'); cy.get('.product-item').should('have.length', 5); Le test échoue parfois car la requête n’est pas encore terminée. Contraintes Intercepter la requête avec cy.intercept(), lui attribuer un alias et attendre explicitement sa complétion avant de vérifier le DOM. Livrable attendu Un test Cypress stabilisé utilisant l’interception réseau et cy.wait().

Contexte Une page affiche un message basé sur la réponse d’une API externe. Le Problème Pour tester un scénario spécifique, il faut simuler une réponse personnalisée de l’API. Contraintes Utiliser cy.intercept() pour mocker la réponse avec un statut et un body personnalisés. Vérifier ensuite l’affichage correct du message. Livrable attendu Un test Cypress utilisant un mock réseau pour contrôler le scénario testé.

Contexte Une page de connexion doit être testée avec plusieurs jeux de données : identifiants valides et invalides. Le Problème Le test actuel ne couvre qu’un seul scénario. Contraintes Créer une structure permettant de parcourir plusieurs combinaisons d’identifiants et d’assertions attendues. Utiliser un tableau de données dans le test et it() dynamique si nécessaire. Livrable attendu Un test Cypress paramétré couvrant plusieurs cas de connexion.

Contexte Les tests Cypress deviennent difficiles à maintenir avec des sélecteurs répétés dans chaque fichier. Le Problème Il faut structurer le test de connexion en centralisant les sélecteurs et actions. Contraintes Créer une abstraction simple (classe ou objet JavaScript) représentant la page Login avec méthodes login() et éléments encapsulés. Livrable attendu Une structure plus maintenable améliorant la lisibilité et la réutilisabilité des tests Cypress.

Contexte L’application utilise un fournisseur OAuth externe pour l’authentification. Le Problème Les tests échouent car ils dépendent du fournisseur réel. Contraintes Simuler ou contourner le flux OAuth via injection de token, mock réseau ou configuration environnementale sécurisée. Vérifier que l’utilisateur est redirigé vers le tableau de bord après authentification simulée. Livrable attendu Un test Cypress stable couvrant un flux OAuth sans dépendance externe réelle.

Contexte Une interface Kanban permet de déplacer des cartes entre colonnes par glisser-déposer. Le Problème Le test doit vérifier que le déplacement est persistant après rechargement de la page. Contraintes Utiliser une approche fiable pour simuler le drag and drop. Vérifier l’état initial, effectuer le déplacement, recharger la page puis confirmer que la carte est toujours dans la nouvelle colonne. Livrable attendu Un test Cypress validant à la fois l’interaction utilisateur et la persistance des données.

Contexte Une page permet l’upload d’un fichier image puis affiche un aperçu. Le Problème Le test doit valider non seulement l’affichage de l’aperçu mais aussi la requête envoyée au backend. Contraintes Utiliser selectFile() pour simuler l’upload. Intercepter la requête réseau correspondante et vérifier le statut HTTP ainsi que les métadonnées envoyées. Livrable attendu Un test Cypress complet validant l’intégration front-back lors de l’upload.

Contexte Plusieurs tests utilisent la même session utilisateur authentifiée. Le Problème Un test modifie les paramètres du compte, impactant les suivants. Contraintes Mettre en place une stratégie robuste avec cy.session() ou réinitialisation via API pour garantir l’indépendance totale des tests. Éviter les effets de bord entre scénarios. Livrable attendu Une suite Cypress respectant strictement l’isolation des tests et la reproductibilité.

Contexte La suite Cypress est exécutée en parallèle dans un pipeline CI. Le Problème Certains tests partagent des données communes et provoquent des conflits lorsqu’ils sont exécutés simultanément. Contraintes Mettre en place une stratégie d’isolation des données : génération dynamique d’utilisateurs, nettoyage via API ou utilisation de fixtures indépendantes. Garantir que chaque test est autonome. Livrable attendu Une suite Cypress stable en exécution parallèle et reproductible en environnement CI.

Contexte Une interface affiche des modales et transitions animées lors de certaines actions utilisateur. Le Problème Le test tente d’interagir avec un élément avant la fin de l’animation, provoquant des échecs intermittents. Contraintes Mettre en place des assertions robustes garantissant que la modale est entièrement visible et que les classes d’animation sont supprimées avant interaction. Éviter les délais arbitraires. Livrable attendu Un test Cypress stabilisé face aux animations et transitions dynamiques.

Contexte Une application React met à jour dynamiquement le DOM après une action utilisateur. Lors d’un clic sur un bouton, le composant est entièrement re-rendu. Le Problème Le test actuel : cy.get('[data-cy=refresh]').click(); cy.get('[data-cy=refresh]').click(); Après le premier clic, l’élément est recréé et la référence précédente devient invalide, provoquant un comportement imprévisible. Contraintes Adapter le test pour éviter toute dépendance à une référence DOM obsolète. Utiliser des assertions garantissant que le nouvel état est atteint avant toute nouvelle interaction. Livrable attendu Un test Cypress robuste face aux re-renders successifs d’une SPA moderne.

Contexte Une application moderne utilise des Web Components encapsulés dans un Shadow DOM. Le Problème Le test actuel ne parvient pas à accéder à un bouton interne au composant. Contraintes Configurer Cypress pour activer l’accès au Shadow DOM et utiliser les méthodes adaptées pour cibler les éléments internes. Vérifier ensuite le comportement attendu. Livrable attendu Un test Cypress capable d’interagir correctement avec des composants Shadow DOM.

Contexte La base de tests Cypress devient difficile à maintenir avec duplication de logique. Le Problème Il faut structurer le projet en introduisant des commandes personnalisées réutilisables et une organisation modulaire. Contraintes Créer des commandes dans support/commands.js pour les actions fréquentes comme login ou createUser. Refactorer un test existant pour utiliser ces abstractions. Livrable attendu Une architecture Cypress avancée améliorant maintenabilité, lisibilité et évolutivité.

Contexte Une page tableau de bord dépend de plusieurs requêtes API : /profile, /notifications et /stats. Le Problème Les tests actuels dépendent du backend réel, rendant la suite instable. Contraintes Mettre en place une stratégie d’interception avancée avec cy.intercept() pour mocker différents statuts HTTP : succès, erreur 500 et réponse vide. Vérifier le comportement de l’interface pour chaque scénario. Livrable attendu Une suite de tests Cypress contrôlant totalement les réponses réseau et validant la résilience de l’interface.