Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern e2e testing for complex web applications...

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

Avatar for Fakiolas Marios

Fakiolas Marios

June 13, 2019
Tweet

More Decks by Fakiolas Marios

Other Decks in Programming

Transcript

  1. Modern e2e testing Modern e2e testing for complex web applications

    for complex web applications [email protected] 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 [email protected] - twitter.com/@fakiolinho - medium.com/@fakiolinho Workshops Tutor at 2hog.codes 2
  3. 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
  4. 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
  5. Why this is happening? Why this is happening? New technologies

    and tools appear every day... Big players have stepped up their game 6
  6. 7

  7. Is there any reason Is there any reason we should

    worry we should worry about this? about this? 9
  8. 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
  9. 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
  10. 14

  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. Visual Testing with Visual Testing with Cypress.io Cypress.io Check that

    the application looks as wanted cy.screenshot(); 29
  18. 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