Techniques de tests avancées avec Cypress : partie 2

Bienvenue dans le deuxième volet de notre série en trois parties sur Cypress, le premier outil de test d’applications Web. Après avoir couvert les bases dans notre premier article, nous nous concentrons maintenant sur les techniques de test avancées qui peuvent encore améliorer votre stratégie de test. Cet article vise à explorer la profondeur des capacités de Cypress, vous aidant à exploiter tout son potentiel pour des scénarios de test plus complexes.

Tests d’interaction utilisateur

L’interaction avec les éléments Web est la pierre angulaire des tests de bout en bout, et Cypress excelle dans la simulation des comportements réels des utilisateurs. Voici comment tester diverses interactions utilisateur :

cy.get(’bouton’).click(); // – Simule un clic sur un bouton

cy.get(‘input’).type(‘Bonjour Cypress !’); // – Tape du texte dans un champ de saisie

cy.fixture(« data.cvs »).as(‘myFixture’) // – Charge data.cvs situé dans le dossier des appareils

cy.dataCy(‘input’).selectFile(‘@myFixture’); // – Définit un fichier comme valeur pour l’élément d’entrée de fichier.

cy.get(‘form’).submit(); // – Soumet un formulaire

Ces commandes vous permettent d’imiter fidèlement les actions des utilisateurs, garantissant ainsi que votre application se comporte comme prévu dans des scénarios réels.

Moquerie et talons avec Cypress

Les appels d’API moqueurs et les réponses de stubbing sont cruciaux pour isoler et tester les composants ou les pages de votre application. Cypress fournit un moyen simple d’intercepter et de contrôler le comportement des requêtes réseau :

cy.intercept(‘GET’, ‘/api/users’, { luminaire : ‘users.json’ }).as(‘getUsers’);

cy.wait(‘@getUsers’).its(‘response.statusCode’).should(‘eq’, 200);

Cet exemple montre l’interception d’un appel d’API et l’utilisation d’un appareil pour simuler la réponse, garantissant ainsi que vos tests ne dépendent pas de systèmes externes.

Commandes personnalisées

Cypress vous permet de créer des commandes personnalisées, améliorant la réutilisabilité de votre code et rendant vos tests plus propres et plus maintenables. Voici comment définir une commande personnalisée :

Cypress.Commands.add(‘login’, (email, mot de passe) => {

cy.get(‘entrée[email]’).type(e-mail);

cy.get(‘entrée[password]’).tapez votre mot de passe);

cy.get(‘form’).submit();

});

Vous pouvez ensuite utiliser cette commande dans n’importe quel test :

cy.login(‘utilisateur@exemple.com’, ‘mot de passe’);

Tests parallèles avec Cypress

À mesure que votre suite de tests se développe, l’exécution de tests en parallèle peut réduire considérablement votre durée globale de test. Cypress Dashboard fournit un moyen simple d’exécuter des tests simultanément sur plusieurs machines, optimisant ainsi l’efficacité de votre pipeline CI/CD.

Meilleures pratiques pour les tests avancés

• Organisez les tests de manière logique : Regroupez les tests liés à l’aide de blocs de description pour garder votre suite de tests organisée et lisible.
• Utilisez des sélecteurs stables : Utilisez les attributs data-* pour fournir du contexte à vos sélecteurs et les isoler des modifications CSS ou JS. Ne ciblez pas les éléments basés sur des attributs CSS tels que : id, class, tag. Ne ciblez pas les éléments susceptibles de modifier leur textContent. N’utilisez pas de sélecteur trop générique (par exemple cy.get(button)). Ne le couplez pas à des styles.
• Testez les chemins malheureux :Ne vous contentez pas de tester le « chemin heureux » de l’utilisateur. Assurez-vous de tester les utilisateurs susceptibles d’utiliser votre application de manière malveillante ou d’effectuer des actions qui pourraient ne pas être courantes.
• N’attribuez pas de valeurs de retour : Les commandes sont mises en file d’attente et exécutées de manière asynchrone. Pour accéder à ce que chaque commande Cypress vous rapporte, utilisez .alors()
• Ne testez pas les sites externes : Testez uniquement les sites Web que vous contrôlez. Essayez d’éviter de visiter ou d’exiger un serveur tiers. Si vous le souhaitez, vous pouvez utiliser cy.request() pour communiquer avec des serveurs tiers via leurs API. Si possible, mettez les résultats en cache via cy.session() pour éviter les visites répétées
• Gardez les tests indépendants : Ne faites pas dépendre un test d’un autre. Cela devient extrêmement difficile à gérer.
• N’écrivez pas de petits tests : Écrire de petits tests, comme des tests unitaires, est non performant et excessif. Cypress réinitialise divers états et tests entre les tests, ce qui prend beaucoup de temps. Les petits tests nuisent donc aux performances. De plus, vous saurez toujours exactement quelle assertion échoue lors d’un test e2e plus long.
• État de nettoyage avant l’exécution des tests : Ne nettoyez pas l’état avec after ou afterEach. L’un des avantages de Cypress est l’écriture progressive de tests et de code d’application. Et si l’état n’est pas maintenu après un test, il peut être plus difficile de savoir ce que vous devriez tester ensuite. Si quelque chose échoue au milieu de votre test, les fonctions après nettoyage n’auront pas la possibilité de s’exécuter. Cypress nettoie déjà l’état entre les tests, donc ce n’est peut-être pas quelque chose dont vous devez vous soucier du tout.
• Utiliser une attente inutile : Ne nettoyez pas l’état avec after ou afterEach. L’un des avantages de Cypress est l’écriture progressive de tests et de code d’application. Et si l’état n’est pas maintenu après un test, il peut être plus difficile de savoir ce que vous devriez tester ensuite. Si quelque chose échoue au milieu de votre test, les fonctions après nettoyage n’auront pas la possibilité de s’exécuter. Cypress nettoie déjà l’état entre les tests, donc ce n’est peut-être pas quelque chose dont vous devez vous soucier du tout.
• Intégration continue: Intégrez Cypress à votre pipeline CI/CD pour garantir que les tests sont automatiquement exécutés aux étapes clés du développement.

Conclusion

La maîtrise des techniques de test avancées avec Cypress améliore non seulement la qualité et la fiabilité de vos applications Web, mais rationalise également votre flux de travail de développement. En tirant parti des tests d’interaction utilisateur, des simulations et des stubs, des commandes personnalisées et des tests parallèles, vous pouvez créer une stratégie de test robuste qui s’adapte à votre projet.

Restez à l’écoute pour la troisième partie de notre série, où nous explorerons l’intégration de Cypress dans votre flux de développement pour l’excellence des tests continus.