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

Embrace the past, learnfromit Sensiolabs SensioLabs 

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

Imperfectly balanced, as all things should be 

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 

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 

Have you ever heard the tragedy of E2E testing? 

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) 

Could we learn this power to solve issues? 

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) 

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 

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

Cypress& Symfony SensioLabs 

university.sensiolabs.com Quick & easy installation Both REST and GraphQL APIs are natively supported Symfony UX ? Already supported Webpack Encore? Not an issue SensioLabs 

Holdon, not so fast 

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 

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 

And what if you show me some code? 

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 

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 

university.sensiolabs.com Let’s test SensioLabs 

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 

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 

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 

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 

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

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 

Any advices? 

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 

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 

So, should I use it? 

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 

The end Any questions? SensioLabs