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
Tweet

More Decks by Loulier Guillaume

Other Decks in Programming

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