Modern e2e testing for complex web applications with Cypress.io

Why modern web applications are becoming even more difficult to test and maintain and how cypress.io fits into this equation

Transcript

1. Modern e2e testing Modern e2e testing for complex web applications for complex web applications fakiolasmarios@gmail.com twitter.com/@fakiolinho - medium.com/@fakiolinho 1
2. Full-stack JavaScript lover, happy husband, proud father Software Engineering Manager / Frontend Head at omilia.com Fakiolas Marios fakiolasmarios@gmail.com - twitter.com/@fakiolinho - medium.com/@fakiolinho Workshops Tutor at 2hog.codes 2
3. Web technologies Web technologies evolve rapidly evolve rapidly We are living in an era where 3
4. Why this is happening? Why this is happening? Browsers are much more reliable and consistent (no more < ie11 craziness) Browsers offer much more features & utilities (HTML5, Service Workers, IndexedDB, PWAs etc) Devices - even mobile ones - are hell stronger (RAM, multi-core processors) Browsers & Devices evolution 4
5. Why this is happening? Why this is happening? JavaScript has made huge steps because of ES2015 and nodejs (2009) Frontend frameworks & libraries have evolved so we can build more complex applications RIAs (Rich Internet Applications) and SPAs (Single Page Applications) are flourishing JavaScript & Frontend evolution 5
6. Why this is happening? Why this is happening? New technologies and tools appear every day... Big players have stepped up their game 6
8. So yeah, web technologies So yeah, web technologies are skyrocketing are skyrocketing 8
9. Is there any reason Is there any reason we should worry we should worry about this? about this? 9
10. All these can backfire All these can backfire Even more complex technology stacks are used Even more side-effects and async events take place It is becoming even more difficult to reproduce production setup in dev and testing environments 10
11. Assuring the quality of a modern Assuring the quality of a modern web application is getting more web application is getting more difficult!!! difficult!!! 11
12. Basics about testing Basics about testing 12
13. UI / E2E tests options UI / E2E tests options 13
15. Browsers support Browsers support Chrome Chromium Canary Electron (headless mode for CI) 15
16. Technologies used by Cypress.io Technologies used by Cypress.io Cypress.io under the hood uses and extends some well-known technologies in JavaScript ecosystem: Mocha testing framework for tests structuring Chai assertions library Sinon library for stubs and spies Lolex to fake native timers 16
17. Why Cypress.io? Why Cypress.io? architecture 17
18. Why Cypress.io? Why Cypress.io? It runs in the browser itself In fact it runs in the same run loop the application is executing From architectural perspective this means that we don't send external commands remotely to control the browser (Selenium, Webdriver API, Puppeteer etc.) architecture 18
19. Why Cypress.io? Why Cypress.io? Cypress is fully aware of all things happening in the browser even of all async events that take place We can spot exactly the root of evil in our application even in super-complex situations (Selenium will return a generic error) More speed, better control and easier debugging architecture 19
20. Why Cypress.io? Why Cypress.io? It makes Developers & QA engineers life easier because they can use the browser to write tests and debug them through Developer tools It feels really familiar right from the start because of the tools it relies on such as Mocha, Chai & Sinon Engineers can write tests really fast by using css selectors (jQuery-like) engineers perspective 20
21. Why Cypress.io? Why Cypress.io? Developers can use it for BDD / TDD while developing a new feature We can access tricky parts of an app like global stores (Redux, Vuex etc), storages, cookies etc. It is framework-agnostic (AngularJS, VueJS, ReactJS, jQuery etc.) engineers perspective 21
22. 4 steps that cypress.io 4 steps that cypress.io makes easy makes easy Setup tests Write tests Run tests Debugging (tests and codebase) 22
23. Setup tests Setup tests 23
24. Write tests Write tests 24
25. Run tests Run tests 25
26. Debugging (tests and codebase) Debugging (tests and codebase) 26
27. Cypress.io features Cypress.io features 27
28. Functional Testing with Functional Testing with Cypress.io Cypress.io Check that the application works as wanted 28
29. Visual Testing with Visual Testing with Cypress.io Cypress.io Check that the application looks as wanted cy.screenshot(); 29
30. Visual Testing with Visual Testing with Cypress.io + Percy Cypress.io + Percy cy.percySnapshot(); 30
31. Cypress.io cons Cypress.io cons Cross-browser support (only Chrome family) It works only for apps that have a DOM (not React native etc) It cannot support multi-tabs because it works in the browser It cannot support also multiple open browsers at the same time Each test is limited to only visiting a single superdomain. We cannot visit two different superdomains in the same test There are some difficulties in using it with iframes (Storybook etc) 31
32. Questions Questions 32