Ecrire des tests avec Cypress

Sûrement les grands mal-aimés des développeurs, les tests sont pourtant essentiels pour des projets fluides et des évolutions sans régressions. Pour être honnête j’en mets clairement pas assez en place moi-même mais j’ai réussi à l’imposer chez plusieurs clients et les résultats s’en sont fait ressentir. Avec une bonne batterie de tests et une pipeline au push sur une branch, vous garantissez une qualité de livraison et vous évitez des moments de stress et de rush après les mises en prod !

Aujourd’hui nous allons découvrir un outil très pratique et qui peut se brancher facilement sur un projet même pré-existant: Cypress !

La mise en place de Cypress

Je ne m’attarderai pas sur les différences avec Selenium ou d’autres acteurs de ce domaine, pléthore d’articles traitent déjà de ce sujet. Passons donc au vif su sujet: mettre en place nos tests. Installons tout d’abord l’outil dans notre repo:

npm install cypress --save-dev

Une fois installé, on va laisser cypress faire le travail tout seul. Lancez la commande suivante puis laissez-vous guider par leur installeur (pour ma part, j’ai pris les tests e2e).

npx cypress open

Si vous tombez sur une erreur de type « Your configFile is invalid », c’est sûrement parce que votre projet est en typescript, un workaround simple pour fix ça c’est de renommer votre cypress.config.ts en cypress.config.mjs. Relancez ensuite cypress et ça devrait être bon.

Une fois que vous avez accès au dashboard, vous aurez un bouton « Create new spec ». Cliquez dessus et choisissez un nom (ou laissez celui par défaut). Vous pouvez le lancer si vous voulez, ensuite allons dans notre fichier cypress/e2e/spec.cy.js et analysons un peu ce qui s’y passe:

describe('template spec', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })
})

Tout en haut, le describe() correspond à la description de la série de tests que vous allez lancer. La fonction it() représente un test. Elle commence par une description qui vous sera affichée sur l’interface de test, puis une fonction passée en param pour définir les différentes étapes du test.

Écrivons notre premier test

On va faire quelque chose de simple mais avec un poil de complexité dans la résolution: faire une recherche Google !

Commençons donc par remplacer l’URL de notre cy.visit() par https://google.fr et voyez ce que nous avons !

Faites le test: nous pouvons nous balader sur la page, interagir avec les éléments, tout faire comme sur un navigateur normal. Vous pouvez même ouvrir la dev toolbar (ce qui nous sera très utile pour cibler des éléments plus tard). Nous allons donc chercher à fermer cette popup. Scrollez un peu et vous verrez deux boutons. Cliquons sur « Tout accepter », mais en utilisant Cypress ! Pour cela, nous pouvons utiliser la syntaxe cy.contains(). En passant en paramètre un texte supposé être dedans, vous pouvez récupérer n’importe quel élément. Par exemple pour notre bouton « Tout accepter », nous pouvons faire un cy.contains(« Tout accepter »), puis on dit à Cypress de cliquer dessus:

cy.contains('Tout accepter').click();

Enregistrez votre fichier, et le test devrait se relancer mais… rien.

Observons notre stack à gauche, si vous remontez un peu vous retrouverez l’action « click ». Passez votre souris dessus et vous verrez quel élément a été ciblé et cliqué par notre test:

Comme nous pouvons le voir, notre code était trop vague et a ciblé le mauvais élément, en effet le paragraphe au dessus contenait exactement la même chaîne de caractère ! Modifions notre code pour préciser quel élément nous désirons:

cy.contains('button', 'Tout accepter').click();

Enregistrez, vérifiez le test et hop: la popup a disparu !

Cibler plus, cibler mieux

Maintenant venons entrer des mots clés à chercher, comme par exemple « blog loscil.fr ». Ah mais… notre champ de recherche ne contient aucun texte… Changeons de syntaxe avec un petit cy.get(). Cette méthode va fonctionner comme un sélecteur jQuery (pour les anciens d’entre vous, comme un document.querySelector() si vous préférez). Analysons un peu avec l’inspecteur notre code et pleurons un coup: Google n’est pas là pour nous simplifier la tâche ! Mais Cypress est plus fort que ça ! Regardons notre textarea, il est contenu dans une div qui gère le clic, elle-même dans un div, dans une div, dans un form. Il y a plusieurs moyen de cibler ça évidemment, je vous laisse faire des tests mais les class sont aléatoires donc assez incertaines. Passons donc par le form !

Comment cibler un enfant de ce form ? Cypress a une syntaxe toute faite:

cy.get('form')
    .children('div').first()

Si vous voulez l’observer dans la stack de test, ajoutez un .click() et on voit qu’on cible bien une div dans notre form. Pour cibler la div sensible à l’interaction, nous devons donc récupérer l’enfant de l’enfant de cette div. Je vous laisse tester ? Et une fois l’élément ciblé, nous pouvons utilisé la syntaxe .type() pour simuler des touches de clavier. Ce qui est bien avec cette syntaxe, c’est que vous pouvez aussi simuler la touche entrer avec la string « {enter} ». Ça nous donne donc:

cy.get('form')
      .children('div').first()
      .children('div').first()
      .children('div').first()
      .type("blog loscil.fr{enter}");

Et là Google nous empêchera d’aller plus loin car nous voilà face un captcha (et Cypress va avoir du mal là). Supprimons finalement notre {enter} pour rester sur cette page et on va venir vérifier si notre champ a bien été rempli ! Pour cela, il faut récupérer le textarea qui se trouve dans notre champs et vérifier sa valeur. Pour aller au plus simple, Cypress nous permet de stocker les éléments dans des variables et les réutiliser à volonté. Mettons donc le code précédent dans une const $elem et partons à la recherche de notre textarea. Rien de plus simple, il suffit de faire un .get(‘textarea’) dessus et de vérifier dans notre stack que nous avons le bon.

Pour vérifier la valeur nous pouvons passer par la méthode assez puissante .should(). Je vous laisse regarder la doc mais la fonction permet vraiment une grande flexibilité ! De notre côté nous allons passer par la syntaxe « have.value » pour vérifier que le textarea contienne bien notre string.

$elem.get('textarea').should('have.value', 'blog loscil.fr');

Ce qui nous permet de faire valider le test avec un petit check vert fort appréciable.

Cypress, un outil très puissant

Voilà pour cette petite initiation: vous avez désormais les bases pour tester facilement votre interface. Mais Cypress est un outil très poussé que nous reverrons dans d’autres articles ! Il permet également de faire des tests unitaires, des tests d’API, des tests d’accessibilité, … Et il se branche très facilement sur vos pipelines de votre outil de stockage de code préféré ! Bref, une véritable boîte à outil pour dev !