Save 37% off PRO during our Black Friday Sale! »

Cypress, le E2E moderne doit encore apprendre du passé

Cypress, le E2E moderne doit encore apprendre du passé

27021de2df79d619a3ebf52ab6392e82?s=128

Loulier Guillaume

April 09, 2021
Tweet

Transcript

  1. Easing developers’ life university.sensiolabs.com Cypress, le E2Emoderne doit encore apprendredu

    passé SensioLabs
  2. De tester, tu n’auras plus peur Sensiolabs SensioLabs

  3. university.sensiolabs.com Guillaume Loulier / @Guikingone Développeur @SensioLabs SensioLabs

  4. Tester, en2021, tout un art

  5. university.sensiolabs.com Unitaire: PHPUnit, Atoum E2E / Fonctionnel: PHPSpec, Behat, Mink,

    Panther, CodeCeption, Pest, Khalan, Peridot, Storyplayer Sans oublier les extensions et bridges dédié(es) Etat des lieux - PHP SensioLabs
  6. university.sensiolabs.com Unitaire: Jest, Mocha, Chai, Sinon E2E / Fonctionnel: Karma,

    Puppeter, Jasmine, Cypress, CodeceptJS, Nightwatch La liste est encore longue … Etat des lieux - JS SensioLabs
  7. Et le E2E dans tout ça?

  8. university.sensiolabs.com C’est un cap, une péninsule SensioLabs Force historiquement à

    se positioner du côté de l’utilisateur Implique un coût de maintenance / écriture plus important que les tests unitaires Souvent plus lents de par les couches impliquées (UI, DB, API’s, etc) ainsi que les acteurs externes impliqués (Mercure, Vulain, emails, message brokers, etc) L’architecture est souvent un frein (SPA, PWA, etc)
  9. OuimaisCypress dans tout ça?

  10. university.sensiolabs.com Cypress est un framework orienté E2E Disponible via Yarn,

    NPM et Docker Propose une syntaxe connue, simple et intuitive ainsi que des raccourcis pour accélérer le processus d’écriture Support natif des principaux navigateurs (sauf IE, restons sérieux) Soutenu et développé par l’entreprise du même nom, le tout sous license MIT SensioLabs
  11. university.sensiolabs.com Cypress agit tel un wrapper autour de Chai, jQuery,

    Sinon, Mocha et d’autres* Cypress peut intercepter, mocker, décorer les requêtes XHR / fetch / etc L’UI peut entièrement être mise de côté pour accélérer les tests Le debug est simplifié par des screenshots, vidéos et un replay des steps ayant échouées Vends-moi cette librairie *Liste complète: ici SensioLabs
  12. university.sensiolabs.com Mais encore ? SensioLabs Code coverage natif, outils de

    visual testing, Typescript, intégration dans les IDE’s, BrowserStack, parralélisation, dashboard Intégration avec Github, Gitlab, Bitbucket, notifications Slack (oui, c’est important) Tests unitaires, tests d’API, audits (via Lighthouse), suivi de performances, mesure de l’impact carbone, component testing et bien plus! Envie de tester vos applications hybrides ?
  13. Cypress& Symfony SensioLabs

  14. university.sensiolabs.com Sans problème Installation / configuration simple et rapide Support

    natif pour les API REST/GraphQL made in API-Platform Symfony UX ? Déjà supporté SensioLabs
  15. Pas si vite

  16. university.sensiolabs.com Cypress ne propose pas (pour le moment…) de bridge

    / bundle avec Symfony Pas de support pour Selenium Pas de support pour des clients isolés parallèles Configuration des clients pas toujours simple Oui mais face à Panther ? SensioLabs
  17. university.sensiolabs.com Cypress sait nativement accéder au DOM et gérer le

    JS Syntaxe moins intuitive pour les PO / QA Support multi-langues inexistant Moins de drivers disponible Et face à Behat ? SensioLabs
  18. Et situnous montrais?

  19. university.sensiolabs.com Installation rapide* yarn add --dev cypress, installation en tant

    que dépendenance de développement symfony serve, ouvre un serveur sur https://127.0.0.1:8000 yarn run cypress open, ajoute les dossiers / fichiers requis pour lancer Cypress, ouvre le runner et permet de lancer les tests *Démonstration réalisée sur le projet symfony/demo SensioLabs
  20. university.sensiolabs.com Lancement simplifié SensioLabs Cypress propose un dashboard permettant de

    lancer les tests et configurer l’exécution de ces derniers L’accès au dashboard en ligne est possible afin d’accéder au replay Chaque test peut être lancé séparément et rejoué si besoin Accès instantané à la documentation et au support
  21. university.sensiolabs.com Premier test Syntaxe connue et intuitive Structure inspiré par

    Mocha Assertions simple et configurable basée autour de Chai SensioLabs
  22. university.sensiolabs.com Allons plus loin Une série de hooks est proposée

    pour simplifier les tests Cypress peut intercepter vos requêtes reseaux (APIP, nous voici!) Les commandes peuvent simplifier vos tests et les rendre plus lisibles Les assertions peuvent s’enchaîner après une commande native SensioLabs
  23. university.sensiolabs.com Simplifions nos tests ! Les commandes permettent de simplifier

    l’écriture des tests et d’automatiser les tâches récurrentes (fixtures, cache, etc) Peuvent être utilisées dans les tests comme dans les hooks Aucune limitation sur les appels HTTP, appel d’autres commandes, ect SensioLabs
  24. Ouimaisvoilà …

  25. university.sensiolabs.com Malgré sa simplicité apparente, Cypress ne peut simplifier tous

    vos tests Sans bridge, Symfony nous semble bien loin Le debug des certaines erreurs pas toujours simple L’intégration Docker … Il y a un mais SensioLabs
  26. university.sensiolabs.com Et des erreurs de jeunesse Cypress est encore jeune

    et la fougue de la jeunesse le mène à des éceuils L’API est souvent remaniée / améliorée, ce qui peut introduire des BC breaks Des fonctionnalités sont souvent amenées par des plugins peu/plus maintenus (CucumberJS, si tu nous entends …) SensioLabs
  27. Des conseils ?

  28. university.sensiolabs.com Ecrire ses tests en dehors de l’application permet de

    les rendre plus résilients et évolutifs Le cross-browser testing doit devenir la norme A l’instar de Symfony, Cypress pourrait proposer des extensions natives pour les framework / librairies actuelles L’expérience de Behat / Mink devrait nous guider vers des tests plus modernes et structurés. Tout une tartine SensioLabs
  29. university.sensiolabs.com Cypress vous imposera une structure différente, n’ayez pas peur

    de l’adapter à vos besoins Filtrer, grouper, surveiller, répéter Interceptez et mockez vos requêtes HTTP, surveillez vos interfaces Mesurez vos performances N’ayez pas peur de tout contrôler SensioLabs
  30. Au final, tu recommandes?

  31. university.sensiolabs.com Si vous souhaitez produire des tests résilients, rapides et

    adaptés aux dernières évolutions frontend, oui. Si vous souhaitez gérer plusieurs navigateurs, les requêtes reseaux et les dernières nouveautés côté client, oui. Si vous n’avez pas peur du JS, de maintenir vos tests et d’optimiser votre CI, oui. Si je ne vous ai pas convaincu, oui mais en 4eme point. Oui SensioLabs
  32. C’est tout Des questions? SensioLabs