Cypress, the E2E must learn from the past

Transcript

1. Easing
   developers’
   life
   university.sensiolabs.com
   Cypress, the E2Emust
   learn from the past
   SensioLabs
   

   View Slide

2. Embrace
   the past,
   learnfromit
   Sensiolabs
   SensioLabs
   

   View Slide

3. university.sensiolabs.com
   Guillaume Loulier / @Guikingone
   Developer @SensioLabs
   SensioLabs
   

   View Slide

4. Imperfectly
   balanced, as all
   things should be
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. Have you ever
   heard the tragedy
   of E2E testing?
   

   View Slide

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)
   

   View Slide

9. Could we learn
   this power to
   solve issues?
   

   View Slide

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)
    

    View Slide

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
    

    View Slide

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

    View Slide

13. Cypress&
    Symfony
    SensioLabs
    

    View Slide

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
    

    View Slide

15. Holdon, not so
    fast
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. And what if you
    show me some
    code?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. university.sensiolabs.com
    Let’s test
    SensioLabs
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. Sadly, there’s
    something that I
    need to tell you
    

    View Slide

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
    

    View Slide

28. Any advices?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. So, should I use it?
    

    View Slide

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
    

    View Slide

33. The end
    Any questions?
    SensioLabs
    

    View Slide