Retours d’expérience de tests Cypress

Il y a quelques mois j’avais mentionné une première tentative infructueuse de faire des tests Cypress avec Drupal.

J’ai depuis ressayé et ai réussi à utiliser Cypress dans un environnement Docker.

Afin de partager le code, j’ai créé le snippet suivant : https://gitlab.com/-/snippets/2210867

Utilisation avec Docker et Docker Compose

Afin d’éviter de devoir gérer des problèmes de dépendances et devoir alourdir mes images Docker de développement ou d’en maintenir de nouvelles, j’ai voulu utiliser les images Docker officielles Cypress.

Après divers essais, j’ai utilisé l’image "cypress/included" afin de simplifier l’utilisation car l’image embarque déjà tout ce qu’il faut sans avoir quoi que ce soit de plus à installer.

Le problème a été que l’image est prévue pour exécuter les tests puis détruire le conteneur.

Or je suis dans un environnement Docker Compose et je souhaite pouvoir me servir de l’image comme pour les tests Pa11y, avec une commande Make qui exécute une commande Docker Compose afin que le conteneur soit dans le réseau du projet.

Donc l’image attend une commande, et sans commande le conteneur n’est pas bien instancié avec Docker Compose. L’astuce a été de mettre une commande par défaut "--help", ainsi le retour n’est pas en erreur et il est alors possible de lancer des commandes "docker-compose run" sur le conteneur.

Je me suis ensuite créé diverses commandes Makefile pour lancer les tests avec des navigateurs différents.

Limites et difficultés rencontrées

La principale difficulté lors de l’écriture des tests a été de comprendre comment Cypress traverse et manipule les éléments du DOM, car par exemple certaines assertions font que l’on change d’élément courant, d’autres assertions non.

Ce point est plus une habitude à prendre qu’une difficulté.

Connexion utilisateur

Tout comme pour tests Behat, le module Antibot m’a posé problème car les exemples trouvés pour se connecter consistaient en une requête POST sur l’URL du formulaire de login or avec le module Antibot cela était bloqué. Et impossible de désactiver le module pour les tests comme avec Behat, d’où le fait de faire une connexion en allant sur la page de connexion puis de remplir le formulaire.

Intégration dans Gitlab CI

Pour l’instant les tests sont exécutables en local mais pas dans Gitlab CI.

Le problème est que bien qu’il serait possible d’avoir une image Cypress en tant que service, le conteneur sur lequel Gitlab CI exécute des commandes est le conteneur PHP. Et encore, ce n’est pas certain que les problèmes pour Docker Compose ne se posent pas aussi dans Gitlab CI.

Or contrairement aux tests PHPUnit "Functional JS" où PHPUnit est capable de piloter un conteneur Chromedriver depuis le conteneur PHP, ce n’est pas le cas avec Cypress. Le conteneur PHP ne peut pas piloter le conteneur Cypress.

Lorsque j’ai cherché des exemples d’utilisation de Cypress dans Gitlab CI, je suis systématiquement tombé sur des exemples où l’application testée était une application en JS et donc Cypress était directement sur le conteneur NodeJS où l’application était installée.

Il faudrait donc que j’ajoute NodeJS, Cypress, ses dépendances et des navigateurs dans mon image PHP de CI ce qui l’alourdirait énormément et pour l’usage que j’en ait cela ne vaut pas le coup.

J’ai donc laissé ce point de côté.

Tests emails

De la même manière que pour l’intégration à Gitlab CI, lorsque je cherchais des renseignements sur le tests d’email, à chaque fois il s’agissait d’une application JS qui fonctionnait sur le même serveur que Cypress.

J’ai donc laissé ce point de côté, mais peut être qu’avec le plugin Cypress Maildev cela deviendrait testable.

À voir si possible de facilement ajouter le plugin dans le conteneur sans avoir à maintenir une nouvelle image.

Comparaison avec PHPUnit et Behat

Point positif : le débogage. Le fait de pouvoir prendre des captures écran et d’avoir un enregistrement vidéo lors de l’exécution des tests est un vrai plus par rapport à Behat. Moins par rapport à PHPUnit où PHPUnit exporte chaque page html requêtée et permet un débogage comme n’importe quel code PHP.

Cypress modifie l’environnement d’exécution des tests là où PHPUnit construit un environnement pour chaque test et où l’extension Behat pour Drupal nettoie certaines modifications avec des méthodes comportant l’annotation "@AfterScenario".

Cypress étant utilisé sans extension spécifique à Drupal, il est impossible de faire des actions autres que celles permises par le site et son backoffice. Là où avec PHPUnit nous avons un accès complet à l’API et un accès partiel avec Behat (complet si des contexts spécifiques sont implémentés).

Conclusion

J’ai trouvé Cypress très adapté pour du tests sur l’application finale. Cela m’a permis de découvrir un outil hors univers PHP et indépendant de Drupal.

Cypress permet de compléter les outils de tests comme PHPUnit et Behat. Chaque outil ayant ses avantages et inconvénients.

Bonus

Les slides de ma présentation au meetup de novembre 2021, finalement le meetup a eu lieu avant l’écriture de cet article.