Autotests sur Cypress
Premières impressions et problèmes rencontrés
Dmitry Kochergin, Lead Software Developer Luxoft
Tout d'abord, je tiens à noter que je ne suis pas un autotesteur professionnel, mais un programmeur Java. Mais un jour, la tâche est venue de faire des tests de fumée pour la vérification de base des principales fonctions d'une application qui a été récemment interrompue par un changement dans l'API du service dépendant sans avertissement.
L'article intéressera tous ceux qui étaient intéressés par l'autotest à partir de zéro dans JS, mais qui avaient peur de demander.
Pour commencer, je n'ai jamais rien lu sur l'autotest. La principale idée préconçue était que les autotests sont difficiles, car selon les critiques, vous allez configurer ce Selenium pour le moment ... De plus, vous devez apprendre XPath et PageObject, ce que vous ne vouliez pas du tout faire.
Une recherche rapide sur Internet a donné des outils plus jeunes et plus prometteurs: WebDriver.IO , Pupeteer (et maintenant Playwright est meilleur) et Cypress. J'ai choisi ce dernier, acheté de belles promesses et quelques commentaires des holivars sur les meilleurs outils pour les autotests.
Voici à quoi ressemble la fenêtre du navigateur d'un test en cours. À gauche se trouvent les commandes de test exécutées et l'état, à droite la vue de l'application pendant l'exécution du test:
Voici à quoi ressemble le code de test (dans Cypress, tout le code est en JS, et les sélecteurs sont des sélecteurs CSS ordinaires):
Au moment de l'exécution, cela ressemble à ceci:
Alors que je cherchais un outil pour les autotests - dans ma tête j'avais une image que les tests peuvent être créés directement dans le navigateur, de sorte que j'ai simplement "cliqué sur l'enregistrement de script" - le système a enregistré mes actions (sélecteurs CSS des éléments sur lesquels j'ai cliqué). Ensuite, je regarde le test généré, modifie les sélecteurs si nécessaire et l'enregistre dans la suite de tests. Eh ...
L'histoire s'est avérée inaccessible alors et je n'ai pas trouvé de tels outils (peut-être que quelqu'un vous dira le bon chemin dans les commentaires). Mais Cypress a été soudoyé par le fait que les tests sont exécutés dans un vrai navigateur, et vous pouvez même explorer le DOM en parallèle avec l'exécution du test avec vos outils de développement Chrome préférés (si, par exemple, le sélecteur ne fonctionnait pas, vous pouvez ouvrir la console et voir immédiatement pourquoi lorsque le test est exécuté).
Parmi les autres paramètres qui étaient importants pour moi, je ne voulais absolument pas passer beaucoup de temps à écrire (encore une fois, à écrire un test dans un navigateur) ou à maintenir des tests. C'était tout à fait suffisant pour mes besoins. Juste pour information sur Cypress: cela a pris 1 heure entre le moment où j'ai ouvert le site Cypress pour la première fois jusqu'au premier test qui se connecte à l'application.
Donc Cypress, la première page du framework nous dit qu'il s'agit du Framework de test JavaScript de bout en bout ( cypress.io ). Ensuite, nous lisons rapidement la documentation, elle est vraiment complète, et vous pouvez trouver des réponses à presque toutes les questions (j'ai rapidement trouvé tout le reste sur StackOverflow):
Plus loin dans la liste des fonctionnalités du site:
- Time travel – – , . , DOM, Chrome devtools.
- Real time reloads – JS , – (hot reload).
- Automatic waiting – , , Cypress . , .
- Network traffic control – Cypress / , .
- Captures d'écran et vidéos - Cypress enregistre une vidéo de l'écran du navigateur (MP4) pendant le test, ainsi que des instructions dans la fenêtre.
Tout cela, bien sûr, peut être exécuté sans navigateur ouvert dans CI, Chrome sans tête ou Electron est utilisé.
Mais il y avait aussi des problèmes.
Au début, je ne savais pas que je pouvais attendre la fin des requêtes XHR au serveur et insérer des délais d'attente à la place, et les tests tomberaient au hasard. Corrigée.
Ensuite, Hot Reload a fonctionné une fois sur deux, je devais constamment redémarrer tout Cypress, car je n'étais pas sûr que mes modifications étaient appliquées. Il s'est avéré que dans mon IDE (IntelliJ IDEA), il y avait de mauvaises cases à cocher, qui sont également activées par défaut, à cause desquelles il s'avère que l'enregistrement d'un fichier n'est pas une sauvegarde, mais une sauvegarde éventuelle.
Le problème suivant était que mon application utilisait la récupération de fenêtre pour les demandes au serveur, et Cypress ne voit que les demandes XHR. Le piratage sale de StackOverflow a aidé (je comprends que la méthode de récupération est supprimée de la fenêtre afin que le navigateur effectue un repli sur XHR au lieu de récupération):
Ensuite, le problème de l'émulation d'un navigateur mobile s'est posé, cela n'a tout simplement pas fonctionné dans le code de test de l'agent utilisateur, mais dans un fichier spécial séparé - tout a fonctionné.
Ensuite, le problème CORS a été résolu:
puis le téléchargement de fichiers, cela ne fonctionnait pas à l'improviste, les solutions standard ne fonctionnaient pas, mais la bibliothèque de téléchargement de fichiers cypress a aidé:
Le seul problème que je n'ai pas pu résoudre était la reproductibilité du test. À savoir, des données initiales stables et identiques pour exécuter le test (fixtures), il s'agit davantage d'une tâche de configuration, pas de Cypress, mais toujours non résolue.
En conséquence, Cypress ressemble à un excellent outil pour introduire l'autotest dans un projet si:
- Avoir une connaissance de JS
- Pas besoin de tester dans toutes sortes de navigateurs depuis IE6 (Cypress supporte actuellement Chrome, Chromium, Edge, Electron, Firefox). Voici une discussion sur le sujet . Mais je peux dire qu'il y a un an, lorsque j'ai commencé à travailler avec Cypress, il ne prenait en charge que la dernière version de Chrome et Electron pour les lancements sans interface utilisateur.
- Envie de faire rapidement des tests et de les oublier jusqu'à ce que quelqu'un casse l'application :)
Cypress: prenez-le et utilisez-le!