The document discusses modern end-to-end testing for complex web applications, highlighting the rapid evolution of web technologies and the challenges in assuring quality amidst increasing complexity. It emphasizes Cypress.io as a powerful testing framework, explaining its architecture that allows for better speed, control, and debugging compared to traditional tools. The document also outlines features, benefits, and limitations of using Cypress for functional and visual testing.

1. Modern e2e testingModern e2e testing
for complex web applicationsfor 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 technologiesWeb technologies
evolve rapidlyevolve 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

7. 7

8. So yeah, web technologiesSo yeah, web technologies
are skyrocketingare skyrocketing
8

9. Is there any reasonIs there any reason
we should worrywe should worry
about this?about this?
9

10. All these can backfireAll 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 modernAssuring the quality of a modern
web application is getting moreweb application is getting more
difficult!!!difficult!!!
11

12. Basics about testingBasics about testing
12

13. UI / E2E tests optionsUI / E2E tests options
13

14. 14

15. Browsers supportBrowsers support
Chrome
Chromium
Canary
Electron (headless mode for CI)
15

16. Technologies used by Cypress.ioTechnologies 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.io4 steps that cypress.io
makes easymakes easy
Setup tests
Write tests
Run tests
Debugging (tests and codebase)
22

23. Setup testsSetup tests
23

24. Write testsWrite tests
24

25. Run testsRun tests
25

26. Debugging (tests and codebase)Debugging (tests and codebase)
26

27. Cypress.io featuresCypress.io features
27

28. Functional Testing withFunctional Testing with
Cypress.ioCypress.io
Check that the application works as wanted
28

29. Visual Testing withVisual Testing with
Cypress.ioCypress.io
Check that the application looks as wanted
cy.screenshot();
29

30. Visual Testing withVisual Testing with
Cypress.io + PercyCypress.io + Percy
cy.percySnapshot(); 30

31. Cypress.io consCypress.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. QuestionsQuestions
32