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