Modern e2e testing

for complex web applications

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

Web technologies evolve rapidly

We are living in an era where

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

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

Why this is happening?

New technologies and tools appear every day...

Big players have stepped up their game

So yeah, web technologies

are skyrocketing

Is there any reason we should worry about this?

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

Assuring the quality of a modern web application is getting more difficult!!!

Basics about testing

UI / E2E tests options

Browsers support

Chrome
Chromium
Canary
Electron (headless mode for CI)

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

Why Cypress.io?

architecture

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

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

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

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

4 steps that cypress.io makes easy

Setup tests
Write tests
Run tests
Debugging (tests and codebase)

Setup tests

Write tests

Run tests

Debugging (tests and codebase)

Cypress.io features

Functional Testing with Cypress.io

Check that the application works as wanted

Visual Testing with Cypress.io

Check that the application looks as wanted

cy.screenshot();

Visual Testing with Cypress.io + Percy

cy.percySnapshot();

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)

Questions