JS

Tester ses sites et applications web devient plus simple grâce à Cypress !

  • 29 octobre 2019

Il existe différentes typologies de tests. On peut par exemple distinguer les tests focalisés sur le fonctionnement technique d’entités (tests unitaires, tests d’intégration), de ceux focalisés sur la réponse au besoin utilisateur (tests fonctionnels ou end-to-end).

Tests unitaires ou tests d’intégration

Dans le premier cas, le contexte d’exécution peut être falsifié et détourné de manière à rendre efficace une validation techniquement très précise. Les conditions d’exécution de ces tests n’ont donc rien à voir avec le contexte d’usage final. Pas besoin d’un navigateur pour les exécuter, peu de code exécuté à chaque instant, donc moins de combinatoires. Ces conditions font que ce type de tests est simple à mettre en place et très rapide à exécuter.

Tests fonctionnels ou tests end-to-end

Les tests fonctionnels, ou end-to-end, ont quant à eux un objectif clairement tourné vers l’expérience utilisateur. Ces tests doivent donc reproduire au plus proche des situations d’usage. Le contexte d’exécution devant être le moins biaisé possible, cette typologie de tests implique plus de dépendances et donc plus de sources de complexité et de douleurs. C’est par conséquent aussi un type de test plus long à exécuter.


Malgré cette plus grande complexité, cette typologie de tests reste la meilleure garantie que votre projet réponde aux attentes des utilisateurs. L’ensemble des conditions d’acceptation de vos projets devraient idéalement être validées par ce type de tests.

C’est spécifiquement sur ce terrain que se positionne Cypress en proposant tout ce dont vous avez besoin pour manipuler et tester une application dans un navigateur web (Chromium/Chrome en l’occurrence).

Pourquoi utiliser Cypress ?

Cypress est un outil open source de test très utile dont la prise en main est relativement rapide. Il est simple d’utilisation car il possède une très bonne documentation. Les développeurs front peuvent aisément lire les tests Cypress car ces derniers sont exclusivement écrits en JavaScript. Cypress peut d’ailleurs être utilisé pour tous les frameworks JS : React, Vue, Angular… Sa mise en place est facile, de nombreuses fonctionnalités sont incluses par défaut lors de son installation.

Les fonctionnalités de Cypress

On peut exécuter l’ensemble des suites de tests définies via un terminal, mais également parcourir ces suites de tests via une interface graphique. Il est possible de les exécuter indépendamment, de visualiser le résultat de chaque exécution de manière très précise étape par étape, et d’inspecter le navigateur à chaque étape.

Lors d’une exécution, on peut obtenir des screenshots et des captures vidéos de l’exécution du test, ainsi que des rapports détaillés.
Il est également possible d’exécuter les tests en mode headless, donc sans que le navigateur ne soit « ouvert » (permet une exécution sur un serveur d’intégration continue par exemple).

Pour la rédaction des scénarios de tests, tout est fourni pour : décrire des suites de tests, piloter le navigateur, définir des commandes personnalisées spécifiques à l’application, faire des assertions…

Des tests simples et automatisés

Dans la fenêtre “intégration”, l’outil présente directement plusieurs tests différents et il est possible d’écrire ses propres tests à cet endroit également. L’ergonomie de Cypress est l’un de ses points forts. Lorsqu’on lance un test, l’outil va exécuter automatiquement toutes les actions sur la page HTML et afficher chacunes des actions testées sur une interface. Cypress prend des snapshots pour chaque élément testé, afin de conserver un historique. Cela permet de revenir sur un test effectué, de voir dans quel état était la page à ce moment-là et ce qui n’a pas fonctionné dans le code.

Corriger les erreurs de code pendant le test, grâce à Cypress, c’est possible !

L’objectif de Cypress est que les tests puissent avoir lieu simultanément avec le développement. Le développeur peut ainsi voir son application se faire tester tout en ayant accès aux outils de développement, et observer les changements en temps réel. Comme résultat, nous obtenons un développement plus rapide, avec un code meilleur et complètement testé.

Cypress remplace Sélénium

L’utilisation de Sélénium multiplie les couches d’abstractions et apporte beaucoup de complexité, ce qui multiplie du coup la lourdeur d’utilisation de la solution de tests end-to-end et devient rapidement un frein à l’usage. Des solutions comme nightwatch ou Intern aident à simplifier la stack, mais Cypress en évitant d’utiliser Sélénium a clairement choisi de rendre l’usage des tests end-to-end aussi simple que possible.

Une exécution dans le navigateur-même

Contrairement à Sélénium, Cypress n’exécute pas ses commandes à distance via le réseau mais directement dans le navigateur avec l’application testée. Il sait ce qu’il se passe dans l’application à chaque instant. Il n’y a pas de risque de ralentir les tests à cause d’une mauvaise connexion au réseau, ce qui en fait un outil fiable.