Les tests End-to-End aussi appelés tests e2e, sont des tests qui permettent d’évaluer le fonctionnement complet d’une application en simulant différents parcours utilisateurs. Les tests e2e interagissent avec l’application et examinent le comportement qu’elle est censée avoir grâce à ces parcours. Contrairement à des tests de plus bas niveau, qui eux vont tester des méthodes, composants ou autres, les tests e2e permettent de tester la réelle utilisation de l’application, comme le feraient des utilisateurs. En automatisant ces tests, nous pouvons facilement mettre en place des tests de non-régression et s’assurer de la bonne maintenabilité d’un produit.
Cypress est un outil de tests e2e qui permet de tester une utilisation complète de l’application. A l’aide de scénarios de tests que nous allons pouvoir écrire avec Cypress, nous pourrons les lancer automatiquement et vérifier que tous les tests soient bien réussis. Après avoir exécuter ces tests,Cypress va pouvoir nous générer un rapport qui résume l’exécution des tests. Nous pourrons notamment voir les éventuels tests qui sont en erreur et ce qui a pu causer cela, ce qui est très utile pour vérifier que nous n'ayons pas de régression sur notre application. De plus, Cypress nous permet de faire nos tests directement sur un navigateur web et de suivre l’exécution, on a donc accès en temps réel à nos tests, nous avons accès à du débogage en direct et nous avons une interface assez simple d’utilisation, ce qui facilite grandement sa prise en main.
Cypress permet de rédiger des tests en Typescript. Nous pouvons rédiger les tests de manière organisés de sorte qu’un fichier Typescript corresponde à un de nos tests, il faudra juste placer le ou les fichiers à l’emplacement “cypress/e2e”. Nous pouvons ensuite lancer le test individuellement ou même lancer la fenêtre Cypress qui nous permet de choisir sous quel navigateur il va exécuter le test. Dans nos tests Cypress nous pouvons exécuter énormément d’actions qui permettent de naviguer sur notre page web (comme par exemple visiter un URL, cliquer sur un élément ou encore récupérer un élément de la page) et suite à ça, nous allons pouvoir faire nos assertions pour vérifier que nos tests se soient bien déroulés. Nous pouvons donc facilement créer différents tests qui vont permettre d’évaluer différents scénarios et qui seront lisibles et compréhensibles très facilement.
Pour installer Cypress sur un projet Angular (ou React) c’est très simple grâce à npm cela peut se faire en une commande. Il suffit d’exécuter la commande :
npm install cypress--save-dev
ou encore la commande :
yarn add cypress --dev
Pour donner suite à ça, nous aurons un dossier cypress qui sera généré dans notre projet avec le squelette nécessaire pour commencer à créer nos tests. Dans nos exemples ci-dessous, nous avons installé Cypress sur un projet Angular simple, afin d’avoir des exemples explicites de comment faire des tests Cypress.
Reprenons le dossier “cypress/e2e” généré par Cypress. Dans ce fichier, nous allons pouvoir créer différents fichiers .ts pour chaque scénario de tests. Nous allons créer notre premier fichier de test “myFirstTest.cy.ts”. Comme premier scénario, nous allons uniquement accéder à notre URL, vérifier que le titre affiché est bien le bon titre voulu et nous allons essayer de récupérer des éléments de la page pour tester leur présence.
Nous voyons bien qu’en quelques lignes de codes nous arrivons facilement à tester des choses sur notre application web et d’avoir des scénarios complets de tests qui permettent de naviguer sur notre application.
Maintenant que l’on a écrit notre test, on peut facilement l’exécuter avec la commande ng e2e. Cette commande va nous ouvrir une fenêtre Cypress et nous permettre de choisir le navigateur sur lequel on veut exécuter le test.
Une fois que nous aurons choisi notre navigateur, nous allons choisir le test à effectuer. Une fois le test lancé, voici ce que nous pourrions avoir comme résultat :
A gauche nous pouvons voir que les 3 grandes étapes (“has the correct title”, “has the correct number of links” et “open new tab with link”) de notre test Homepage test ont bien été exécutées sans erreur. En cliquant sur une des étapes à gauche, nous reviendrons à une version snapshot de l’exécution du test et nous pourrons voir l’état de l’application à cet instant. Nous pourrons analyser la console, les emplacements des éléments visuels et faire d’autres analyses. C’est grâce à cela que nous pouvons voir à quel point cet outil peut devenir très puissant.
Cypress étant un outil assez complet, il est également possible de lancer les tests directement sans passer par la fenêtre graphique. En effet, il suffirait de lancer la commande cypress run et on peut exécuter notre test directement en ligne de commande. On peut aussi choisir quel test spécifique on décide de lancer au lieu de tous les lancer à la suite. Ceci est très pratique car on peut facilement faire de l’intégration continue avec ces lignes de commandes. Ces tests peuvent même devenir une condition de vérification dans une pipeline CI (Continuous Integration) et donc ce sera automatisé.
L’écriture de ces différents tests que nous avons vus précédemment est certes une bonne manière de tester notre application. Mais pour une application qui contient des données en base, il peut être difficile de tester des données cohérentes à l’instant T. En effet, peut-être que nous allons lancer les tests avec un jeu de données différent à chaque fois et ce n’est pas optimal pour nos tests car notre application pourrait se comporter différemment en fonction de cela. Mais Cypress nous permet de combler cela grâce à du SQL. En effet, nous pouvons lancer avant d’exécuter nos tests, des commandes SQL qui vont initialiser des données et donc nous aurons de vrais tests sur des données connues. Pour une application qui aurait des données différentes en fonction des utilisateurs, nous pourrions avoir des utilisateurs de tests qui auraient différents droits et différentes données et grâce à ces utilisateurs nous pourrions couvrir tous nos tests voulus, sans impacter les données des autres utilisateurs. Cela nous permet donc d’avoir des tests complets et de les rendre beaucoup plus robustes.
C’est assez courant dans des applications assez conséquentes d’avoir des données qui sont récupérées via des API externes à l’application. Si on écrit les tests sans se soucier de ça et que par exemple l’API n’est pas disponible, nos tests échoueront alors qu’ils n’en seront probablement pas la cause. Pour cela, on peut mocker les appels à cet API grâce à la commande cy.intercept(...). C’est le moyen le plus sûr de tester réellement les tests que l’on a écrit en s’assurant que les éventuelles erreurs qu’on aurait ne proviennent pas de l’API extérieur à notre application.
De mon point de vue, le premier gros avantage de Cypress est sa facilité de prise en main et d’utilisation. Nous avons vu qu’il est très rapide de générer des scénarios de tests avec Cypress ainsi que de les exécuter. De plus, Cypress nous propose de faire les tests directement dans le navigateur et nous laisse la possibilité de choisir le navigateur, ça permet de tester facilement la compatibilité entre les navigateurs. Sur cette interface, nous avons aussi accès aux différentes étapes du test et nous pouvons interagir avec elles, ce qui fait que nous pouvons facilement faire du débogage et voir ce qui a pu potentiellement poser un souci car nous aurons une “snapshot” de la version à chaque étape.
Nous avons vu dans cet article que Cypress est un outil très puissant qui permet de générer des tests complets qui représentent des scénarios de différents cas d’usages de l’application. C’est une très bonne méthode pour effectuer des tests e2e et même des tests de non-régression pour nos applications. Lors de gros changements de notre application (par exemple suite à une montée de version) si nous avons de gros changements visuels ils pourront être détectés immédiatement si nos tests sont bien faits. Cet outil peut rapidement devenir indispensable pour l’application et faire gagner énormément de temps aux développeurs ainsi qu’aux testeurs.
