Cypress est un outil open-source permettant d’écrire les tests d’une application en cours de développement. Il s’exécute dans le navigateur. Voici quelques-unes des principales questions et des mythes concernant l’automatisation des tests avec Cypress. On commence bien sûr avec un sujet brulant Cypress vs Selenium.
Qui est le meilleur ? Cypress.io ou Selenium ?
Chaque fois que vous comparez deux outils, quelqu’un s’offusque inévitablement.
Donc, pour donner le ton, les créateurs de Cypress ont insisté sur le fait que tout ce qu’ils ont réalisé avec Cypress a été fait parce qu’ils admiraient Selenium.
« À vrai dire, nous utilisons tous du Selenium, et nous n’avons que du respect pour Selenium WebDriver et tous leurs autres outils de test. »
Il y a en effet certains cas où l’utilisation de Cypress présente des avantages, et certains cas où l’utilisation de Selenium pourrait être une meilleure option.
Quels sont les cas d’utilisations réservés à Selenium ?
Voici trois cas où l’utilisation de Cypress diffère de celle de Selenium. Vous pouvez décider quelles fonctionnalités sont les plus importantes pour votre équipe lorsque vous choisissez les outils qui vous conviennent le mieux.
- Il s’exécute dans le navigateur, ce qui lui permet d’interagir avec votre code, le réseau, les méthodes et même les mises à jour DOM en temps réel. Tout outil qui n’est pas en cours d’exécution dans le navigateur ne peut pas le faire aussi bien. C’est donc un réel avantage de Cypress.
- Il a également la possibilité d’effectuer des tests intégrés. Cette fonctionnalité est essentielle car les applications Web modernes se mettent continuellement à jour, mais elles sont trop imprévisibles. Par exemple, pendant l’exécution du test, mon réseau peut prendre beaucoup de temps, de sorte que vous ne pouvez pas simplement vous attendre à ce qu’un élément apparaisse dans, disons, 100 millisecondes. C’est pourquoi les commandes distinctes ont toujours des tests intégrés ainsi qu’une analyse pour garantir la réussite même si un élément prend un peu plus de temps, le test réussira, et n’aura pas besoin de délais codés en dur.
- Cypress se concentre également sur la facilité d’installation. Avec Cypress NPM, vous pouvez l’installer simplement en une seule commande et obtenir toutes les captures d’écran et vidéos par défaut sur chaque intégration continue, sur chaque plate-forme. La facilité d’installation est bel et bien présente !
Quels sont les avantages du Selenium ?
- Avec Cypress, vous devez écrire vos tests en JavaScript. Tandis qu’avec Selenium, vous pouvez écrire vos tests dans n’importe quelle langage. Si vous avez déjà des opérations back-end avec un langage différent, il est logique d’utiliser Selenium car il est exécuté sur votre système d’exploitation ; vous pouvez travailler efficacement avec les fonctions backend.
- Selenium prend en charge les tests en navigateurs croisés (en anglais : cross browser testing). Avec Cypress, c’est juste sur la feuille de route, mais Selenium l’a inclus. Donc, les deux ont des avantages et des inconvénients, vous devez donc comparer les deux systèmes et décider ce qui fonctionne pour vous.
Actuellement, Cypress.io Browser Support est réservé aux navigateurs Chrome.
Quelle est la différence entre la façon dont Selenium et Cypress interagissent avec le navigateur testé ?
Les testeurs se demandent souvent quelle est la différence entre la façon dont Cypress interagit avec un navigateur, et s’il agit vraiment avec le navigateur comme le ferait un utilisateur réel. Mais également s’il y a certaines erreurs que Selenium trouveraient et non Cypress ?
Par exemple, y a-t-il une différence entre dire au navigateur que j’ai cliqué sur quelque chose et émuler un utilisateur réel qui pointe via un navigateur ?
Cypress est une solution JavaScript complète. Cela signifie qu’il utilise un événement synthétique.
Il crée un événement en JavaScript et l’envoie à un bouton par exemple. Donc, en effet, cela pourrait ne pas nécessairement fonctionner de la même manière que les événements natifs utilisés par Selenium.
Mais Cypress a des événements natifs sur sa feuille de route et nous aurons plus d’informations prochainement. Cela vous permettra d’effectuer des actions comme l’envoi de fichiers, le téléchargement ou le copier / coller dans votre presse-papiers. Vous aurez toujours les événements synthétiques, mais vous aurez également des événements natifs pour toutes les interactions.
Cette mise à jour, lorsqu’elle se produira, devrait supprimer toutes les préoccupations que vous avez au sujet des interactions du navigateur ne se comportant pas de la même manière que Selenium.
Est-il possible de simuler le comportement humain ?
Lorsque vous créez des tests automatisés, vous avez parfois besoin d’un moyen d’imiter le comportement d’un service réel. Cela peut être réalisé à l’aide d’un objet fictif.
Il n’est pas possible d’utiliser le serveur fictif Nock pour Node.js, mais vous n’avez pas à vous inquiéter. Cypress est déjà livré avec la bibliothèque SinonJs. SinonJs vous permet de créer des tests espions autonomes, des stubs et des mocks en JavaScript.
Cela signifie que vous pouvez imiter n’importe quoi en JavaScript et Cypress l’inclura.
Peut-on utiliser une approche Programmation Pilotée par le Comportement avec Cypress?
Bien que Cypress n’ait pas de Programmation Pilotée par le Comportement (en anglais : Behavior Driven Development) officiel intégrée dans son option out-of-the-box, il existe un processeur Cucumber BDD créé par la communauté qui peut vous aider.
Le plugin NPM Cypress-Cucumber-Preprocessor vous permet d’écrire vos tests dans la syntaxe BDD Cucumber, et il les traduira ensuite automatiquement en Cypress.
Il y a aussi un très bon échantillon de travail que vous pouvez consulter sur Github.
Cypress supporte-t-il la validation visuelle ?
Vous vous demandez peut-être aussi si Cypress peut faire des comparaisons d’images en plein écran par rapport aux lignes de base d’une manière similaire à ce que le framework Galen fait avec des exigences strictes de conception de mise en page ?
Cypress dispose d’une fonction de capture d’écran intégrée, vous pouvez donc prendre une capture d’écran d’une page entière, d’un élément particulier ou de l’ensemble, y compris l’interface utilisateur du TestRunner. Ils vous recommandent de prendre des captures d’écran d’un élément spécifique afin que s’il agissait différemment, vous sachiez quelle partie de la page était différente et ne compareriez pas, par exemple, une partie dynamique tout le temps.
Il convient de noter qu’il n’y a pas de diff d’image intégré dans Cypress. Ils vous donnent une capture d’écran mais c’est à vous de comparer.
Heureusement, certaines personnes ont créé des plugins qui le font réellement.
C’est le cas des entreprises Percy.io et Applitools qui ont toutes les deux des plugins pour Cypress qui font un excellent matching d’image.
Cypress.io permet-il d'interagir avec une API ?
Une autre exigence courante pour les tests de bout en bout est la possibilité d’interagir avec une API. Heureusement, Cypress supporte également cela.
Lorsqu’on demande aux créateurs de Cypress si REST Testing est supporté, il ont conseillé aux utilisateurs de consulter Cypress-Example-API-Testing sur GitHub, qui contient un exemple d’utilisation du runner E2E pour tester également Rest et d’autres API.
Ce sont les principales questions que nos testeurs avaient en formation. Et vous quelles sont les vôtres ? N’hésitez pas à les poser dans la section commentaire juste en bas.
Et si vous le souhaitez vous pouvez également vous former à Cypress en accéléré grâce à notre formation : Cypress automatiser les tests end to end.