Tests end-to-end avec Cypress

- retour d'expérience

Jean Martineau-Figuette

Legacy code

Eli Lopian,

https://dzone.com/articles/defining-legacy-code

is code that developers are afraid to change.

Legacy code

is code without tests.

Michael Feathers,

Working Effectively with Legacy Code, 2004

poke Yannick Grenzinger,

BBL Software Craftsmanship

"Je n'ai pas le temps"

Votre application sera testée.

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

Tests de recette manuels ?

✔️ Tests automatisés !

poke Agnès Haasser,

BBL sur les boulettes

Tester c'est douter

Tester c'est prouver que ça marche

(dans un certain contexte)

🡆 confiance

Qui suis-je ?

  • Développeur freelance toulousain

  • Développeur freelance toulousain

  • Forte attirance pour l'automatisation des tests

  • Amateur d'ébénisterie

  • (et de sieste)

Comment tout à commencé ?

mon attirance pour les tests end-to-end

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, mais apportent plus de confiance

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"

Retour d'expérience

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");

Cucumber 🥒

oui mais... non merci, pas pour moi.

Multi-navigateurs

Maintenez vos tests !

comme du code applicatif.

 

Evitez les .skip()

Impliquez tous les développeurs

sur l'écriture et la maintenance des tests e2e

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 👍

Rajat S.

Kent C. Dodds

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.

Made with Slides.com