fakiolasmarios@gmail.com
twitter.com/@fakiolinho - medium.com/@fakiolinho
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
We are living in an era where
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
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
New technologies and tools appear every day...
Big players have stepped up their game
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
Chrome
Chromium
Canary
Electron (headless mode for CI)
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
architecture
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
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
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
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
Setup tests
Write tests
Run tests
Debugging (tests and codebase)
Check that the application works as wanted
Check that the application looks as wanted
cy.screenshot();
cy.percySnapshot();
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)
By Marios Fakiolas
Why modern web applications are becoming even more difficult to test and maintain and how cypress.io fits into this equation
