Cypress, le E2E moderne doit encore apprendre du passé

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. Tester, en2021,
   tout un art
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. Et le E2E dans
   tout ça?
   

   View Slide

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)
   

   View Slide

9. OuimaisCypress
   dans tout ça?
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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 ?
    

    View Slide

13. Cypress&
    Symfony
    SensioLabs
    

    View Slide

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
    

    View Slide

15. Pas si vite
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. Et situnous
    montrais?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. university.sensiolabs.com
    Premier test
    Syntaxe connue et intuitive
    Structure inspiré par Mocha
    Assertions simple et configurable
    basée autour de Chai
    SensioLabs
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Ouimaisvoilà …
    

    View Slide

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
    

    View Slide

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
    

    View Slide

27. Des conseils ?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. Au final, tu
    recommandes?
    

    View Slide

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
    

    View Slide

32. C’est tout
    Des questions?
    SensioLabs
    

    View Slide