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

Cypress, le E2E moderne doit encore apprendre du passé

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. 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