Créez vos tests end-to-end avec Cypress.io

Si vous avez déjà mis en place des tests end-to-end avec Selenium, il y a des chances pour que vous ayez trouvé la tâche pénible. Heureusement, des alternatives existent. Parmi elles : Cypress.io

Des tests rapides, simples et fiables pour tout ce qui tourne dans un navigateur, telle est la promesse de Cypress.

Cypress est un nouvel outil open source de test d’application web, qui a pour but de rendre la mise en place des tests end-to-end moins laborieuse.

Tout d’abord, Cypress rend ces quatres tâches très simples :

  • La mise en place de l’outil : aucun serveur, driver ou autre dépendance n’est nécessaire à son installation. Tout est inclus par défaut. Un simple “npm install cypress” suffit.
  • L’écriture des tests : les tests écrits avec Cypress sont faciles à lire et à comprendre, en particulier si vous avez déjà écrit des tests front-end. En effet, ceux-ci sont écrits en Javascript, à l’aide des librairies Mocha, Chai (assertions) et Sinon.js (stubs et spies)
  • L’exécution des tests : les tests s’exécutant directement dans le navigateur sont rapides. De plus, il est possible de les exécuter en temps réel pendant le développement de vos applications.
  • Le débogage : les messages d’erreur sont intelligibles, ce qui permet de corriger les anomalies rapidement.

Cliquer pour agrandir (source Cypress.io)

Ce qui rend Cypress différent

Son architecture

La plupart des outils de test, comme Selenium, fonctionnent à l’extérieur du navigateur. Ils exécutent des commandes à distance à travers le réseau. Contrairement à eux, Cypress s’exécute directement dans le navigateur avec l’application testée.

Cypress fonctionne avec un serveur Node.js. Cypress et Node.js communiquent et synchronisent constamment leurs tâches. Ce mode permet de répondre aux événements de l'application en temps réel, tout en travaillant à l'extérieur du navigateur, pour les tâches qui requièrent un privilège plus élevé.

Cypress opère également au niveau de la couche réseau, en lisant et en modifiant le trafic à la volée. Ainsi, Cypress peut modifier tout ce qui entre et sort du navigateur.

Enfin, comme Cypress est installé en local, il peut également utiliser le système d'exploitation pour des tâches d'automatisation. Cela permet d'effectuer des tâches telles que la prise de captures d'écran et l'enregistrement de vidéos.

Un accès natif

Cypress fonctionne au sein de l’application testée, il a alors un accès natif à chaque objet. Qu'il s'agisse de la fenêtre, du document, d'un élément DOM, d'une fonction, d'un timer ou de tout autre chose, vous y avez accès dans vos tests Cypress. Le code de test peut accéder aux mêmes objets que le code applicatif.

Une nouvelle manière de tester

Le fait d’avoir le contrôle sur l’application testée, le trafic réseau et l'accès natif à chaque objet hôte, donne de nouvelles possibilités. Cypress permet de modifier n'importe quel aspect du fonctionnement de l'application. Au lieu de tests lents et coûteux, tels que la création de l'état requis pour une situation donnée, vous pouvez simplement créer ces états artificiellement comme vous le feriez dans un test unitaire. Il est, par exemple, possible de :

  • Mocker le navigateur ou les fonctions de l’application et de les forcer à se comporter comme il le faut dans un scénario de test.
  • Exposer des data-stores afin de modifier l'état de l’application directement à partir du code de test.
  • Tester comment l’application réagit aux erreurs en retournant des codes d’erreurs HTTP.
  • Modifier les éléments DOM.
  • Piloter des composants tiers : au lieu de se préoccuper des composants comme les sélections multiples, les listes déroulantes, ou les date-pickers, il suffit d'appeler les méthodes directement à partir du code de test pour les contrôler.
  • Contrôler le temps de façon à ce que les timers se déclenchent automatiquement sans avoir à attendre le temps requis.

Sa fiabilité

Cypress a connaissance de tout ce qui se passe dans l’application testée, de manière synchrone. Il est notifié au moment du chargement de la page. Il sait même à quelle vitesse un élément s'anime et attendra qu'il cesse d'animer. De plus, il attend automatiquement que les éléments deviennent visibles et soient activés. Lorsque les pages commencent la transition, Cypress interrompt son exécution jusqu'à ce que la page suivante soit complètement chargée. Il est même possible d'attendre la fin de certaines requêtes réseau spécifiques.

Cypress exécute la plupart de ses commandes dans le navigateur, il n'y a donc pas de lenteurs dues au réseau. Les commandes exécutent et pilotent l'application aussi rapidement que possible. Pour gérer les interfaces utilisateurs complexes, il est possible d’utiliser des assertions pour indiquer à Cypress l'état souhaité. Cypress attendra automatiquement que l'application atteigne cet état avant de passer à l'étape suivante. Il attend automatiquement l'existence des éléments et ne fournira jamais d'éléments vides qui ont été détachés du DOM.

Son ergonomie

Cypress a avant tout été conçu dans un soucis d’ergonomie. Des centaines de messages d'erreur personnalisés décrivent la raison d’échec d’un test. Une interface montre visuellement l'exécution des commandes, les assertions, les requêtes réseau, les chargements de pages ou les changements d'URL. Cypress prend des snapshots de l’application et permet de remonter dans le temps jusqu'à l'état dans lequel elle se trouvait au moment de l'exécution des commandes. Enfin, il est possible d’utiliser DevTools pendant l'exécution des tests, de consulter les messages de la console et les requêtes réseau, et même d’inspecter les éléments du DOM.

 

Conclusion

Après quelques semaines d'utilisation de Cypress, je me suis réconcilié avec les tests end-to-end. La simplicité d'utilisation et la richesse de Cypress ont rendu baucoup moins laborieus l'écriture et la maintenance de ces tests, qui étaient devenus une corvée.

Ci-dessous, la vidéo de présentation de l'outil :

 

Sources

Site de Cypress.io
Documentation

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.