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

Cypress, the E2E must learn from the past

Cypress, the E2E must learn from the past

27021de2df79d619a3ebf52ab6392e82?s=128

Loulier Guillaume

June 18, 2021
Tweet

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