Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cypress, le E2E moderne doit encore apprendre d...

Cypress, le E2E moderne doit encore apprendre du passé

Loulier Guillaume

April 09, 2021
Tweet

More Decks by Loulier Guillaume

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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)
  4. 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
  5. 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
  6. 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 ?
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. university.sensiolabs.com Premier test Syntaxe connue et intuitive Structure inspiré par

    Mocha Assertions simple et configurable basée autour de Chai SensioLabs
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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