Cypress, the E2E must learn from the past

Transcript

1. Easing developers’ life university.sensiolabs.com Cypress, the E2Emust learn from the past SensioLabs
2. Embrace the past, learnfromit Sensiolabs SensioLabs
3. university.sensiolabs.com Guillaume Loulier / @Guikingone Developer @SensioLabs SensioLabs
4. Imperfectly balanced, as all things should be
5. university.sensiolabs.com Unit: PHPUnit, Atoum E2E / Functional: PHPSpec, Behat, Mink, Panther, CodeCeption, Pest, Khalan, Peridot, Storyplayer Did I mention extensions, bridges and so on? State of the art - PHP SensioLabs
6. university.sensiolabs.com Unit: Jest, Mocha, Chai, Sinon E2E / Functional: Karma, Puppeter, Jasmine, Cypress, CodeceptJS, Nightwatch As before, we can talk about thousands of tools … State of the art - JS SensioLabs
7. Have you ever heard the tragedy of E2E testing?
8. university.sensiolabs.com That’s a sad story SensioLabs By convention, E2E force us to think about the application as the final user Maintenance and writing cost are way bigger than unit tests Regarding the layers that we engage during E2E tests, the whole testing experience can be slower (UI, DB, API’s, etc), not to mention external services (Mercure, Vulain, emails, message brokers, etc) Modern architectures can slow down the testing process (SPA, PWA, etc)
9. Could we learn this power to solve issues?
10. university.sensiolabs.com SensioLabs Cypress is an E2E framework Available via Yarn, NPM and Docker Well known syntax (easy to use and fast) , a lot of shortcuts and commands to ease the writing experience Main browsers natively supported (except IE, let be serious) Backed and developed by the Cypress company (under MIT licence)
11. university.sensiolabs.com Cypress act as a wrapper around Chai, jQuery, Sinon, Mocha and many more Cypress can intercept, mock and wait for XHR / fetch requests The whole UI can be bypass to speed up tests The debug experience is improved thanks to screenshots, videos and a dedicated replay for failing steps Sell me this library SensioLabs
12. university.sensiolabs.com More? SensioLabs Code coverage, visual testing tools, Typescript, IDE support, BrowserStack, parallelization, dashboard Github / Gitlab / Bitbucket integrations, Slack notifications Unit tests, API tests (REST/GraphQL), Lighthouse integration, performances analyzes, carbon footprint analyze, component testing and much more! Want to test hybrid apps (Ionic, React Native, etc)?
13. Cypress& Symfony SensioLabs
14. university.sensiolabs.com Quick & easy installation Both REST and GraphQL APIs are natively supported Symfony UX ? Already supported Webpack Encore? Not an issue SensioLabs
15. Holdon, not so fast
16. university.sensiolabs.com Poor integration with Symfony No Selenium support (for now?) No isolated client support Clients configuration poorly documented Better browser support and network requests support out of the box What about Panther ? SensioLabs
17. university.sensiolabs.com Native DOM access, JS support Need to adapt against the PO / QA syntax / usages No locale support Less drivers (but easier browser configuration) And Behat? SensioLabs
18. And what if you show me some code?
19. university.sensiolabs.com Quick start yarn add --dev cypress (Cypress is not required in production environment) symfony serve, launch a new server on https://127.0.0.1:8000 yarn run cypress open, create defaults files and required directories then launch Cypress via a GUI SensioLabs
20. university.sensiolabs.com Easy setup SensioLabs A dashboard is available in GUI mode to configure the tests and launch them Each test can be isolated and launch to separate the errors / debug Instant access to the documentation and support, not to mention the replay and the online dashboard
21. university.sensiolabs.com Let’s test SensioLabs
22. university.sensiolabs.com Deep dive Cypress allows to use hooks to use repetitive tasks / commands Thanks to commands, we can automate tasks and ease the writing experience Assertions can be chained to improve readability and focus on the end requirement Thanks to the “jQuery” syntax, elements can be easily found SensioLabs
23. university.sensiolabs.com Time to ease our steps Commands helps to ease and automate the recurrent tasks (fixtures, cache, etc) Can be used in tests, hooks, loops, etc No limitations regarding HTTP calls, other commands usage, assertions, etc SensioLabs
24. university.sensiolabs.com Automate everything SensioLabs Repetitive tasks as login can be boring to test Commands are a great way to ease these use cases If needed, commands can be overwritten, chained, etc
25. university.sensiolabs.com Develop, test, adapt, repeat SensioLabs Want to test on multiple devices? Can be defined via the configuration, hooks, commands or during the tests Wide support for modern devices and custom sizes
26. Sadly, there’s something that I need to tell you
27. university.sensiolabs.com Sad news SensioLabs As easy as it looks, Cypress cannot handle every use case Without a proper bridge, Symfony seems hard to interact with Server errors debug can be a real pain The Docker integration / usage is quite hard BC breaks, unmaintained bridges / extensions
28. Any advices?
29. university.sensiolabs.com Writing tests outside of the tested application tend to make them easier to maintain and more resilient Cross-browser testing must become the standard Thanks to the bundle approach, Cypress could welcome a dedicated bundle Thanks to our experience with Behat and other tools, we could easily structure and improve Cypress tests A lot SensioLabs
30. university.sensiolabs.com Don’t fear control, embrace it SensioLabs Cypress forces us to use a specific structure / approach, don’t be afraid to adapt it and modernize it Filter, group, watch, repeat Intercept, mock heavy network requests, watch and test your UI (thanks to visual testing) Measure performances, frontend indicators, etc
31. So, should I use it?
32. university.sensiolabs.com Yes SensioLabs If you wish to write resilient, fast and up- to-date tests which support recent frontend evolutions, yes If you need to handle actual browsers, network requests and modern practices / frameworks, yes If you’re not afraid of maintaining tests, writing JS and improving your CI / CD, yes If you need to improve teamwork, improve delivery and deploy more often, yes
33. The end Any questions? SensioLabs