Tests end-to-end avec Cypress

Jean Martineau-Figuette

Legacy code

is code that developers are afraid to change.

Legacy code

is code without tests.

Michael Feathers,

Working Effectively with Legacy Code, 2004

"Je n'ai pas le temps"

Votre application sera testée.

si ce n'est par vous, par vos utilisateurs.

"Tester c'est douter"

Tester c'est prouver que ça marche

(dans un certain contexte)

et augmenter la confiance

Les tests quoi ??

Rappel des principaux types de test

Unit tests

Integration tests

Les tests end-to-end

(ou e2e)

  • simule des scénarios utilisateur

  • teste des parties non couvertes par les TU et TI

  • plus lents, plus coûteux

A priori sur les tests e2e

  • pénibles à écrire

  • pénibles à débugger

  • boucle de feedback plus longue

Quels outils ?

  • Selenium et dérivés de WebDriver

  • testCafe

  • Cypress

  • framework JavaScript e2e

  • indépendant de la techno web

  • indépendant de l'OS

  • Open-source

  • écrit from scratch

  • orienté développeur

Démo !!

Et sur la CI ?

  • Mode headless

  • captures vidéos

  • captures "d'écran"

Notes

Commandes != Promises

Le code n’est pas exécuté “comme on le pense”.

Chaque cy.xxx() envoie une commande dans une file d’exécution qui sera en fait exécutée après la fin du test.

 

 

const button = cy.get(‘button’) // interdit 

Testez des scénarios utilisateurs

plutôt que des pages

Ecrivez des tests robustes

en écrivant des sélecteurs proches du niveau utilisateur.

Testez le rendu

plutôt que la tambouille interne, par exemple le state redux/vueX.

Tests indépendants

pouvant être joués et rejoués, dans n'importe quel ordre.

Evitez de tester 2 fois la même partie de votre app

pour n'avoir qu'un test qui casse lors d'une régression.

Ne pas utiliser l'interface graphique de votre application pour initialiser les données.

Ne pas attendre une durée

// DON'T
cy.wait(1000);


// DO
cy.request("mon/endpoint").as("updateItem");
// [...]
cy.wait("@updateItem");

Multi-navigateurs

Maintenez vos tests !

comme du code applicatif.

 

Evitez les .skip()

Ne testez pas tous les cas

temps d'exécution non négligeable ;

focalisez vous sur les scénarios critiques.

Lancez vos tests e2e à chaque push

Mockez le moins possible

sinon, moins de confiance en vos tests.

Ce qu'on en dit

Testing is not easy. But with the help of right tools, writing tests can certainly be simpler and more fun.

E2E tests with Cypress just saved my bacon. [...]

Huge amount of value for low cost 👍

En conclusion...

  • excellente expérience développeur

  • utilisable pour du TDD et du debug

  • facile d'abstraire du code technique

  • écrire des tests est de notre responsabilité de développeur. Cypress peut nous y aider.

présentation Cypress pour Renault

By euzebe

présentation Cypress pour Renault

Présentation des tests end-to-end, de Cypress, et retour d'expérience

  • 95