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

Loulier Guillaume

June 18, 2021

More Decks by Loulier Guillaume

Other Decks in Programming


  1. 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
  2. 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
  3. 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)
  4. 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)
  5. 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
  6. 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)?
  7. university.sensiolabs.com Quick & easy installation Both REST and GraphQL APIs

    are natively supported Symfony UX ? Already supported Webpack Encore? Not an issue SensioLabs
  8. 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
  9. 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
  10. university.sensiolabs.com Quick start yarn add --dev cypress (Cypress is not

    required in production environment) symfony serve, launch a new server on yarn run cypress open, create defaults files and required directories then launch Cypress via a GUI SensioLabs
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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