Changing the Game with
TESTING IN A WAY THAT WAS NEVER POSSIBLE BEFORE
@elmd_
NG-Talks
Slide 2
Slide 2 text
ARE YOUR E2E TESTS SLOW?
Slide 3
Slide 3 text
FLAKY or UNRELIABLE?
Slide 4
Slide 4 text
HARD TO MAINTAIN?
Slide 5
Slide 5 text
OR HARD TO WRITE?
Slide 6
Slide 6 text
IGNORE TESTING COMPLETELY?
Slide 7
Slide 7 text
IGNORE TESTING COMPLETELY?
Slide 8
Slide 8 text
WELCOME TO THE CLUB
Slide 9
Slide 9 text
What are the biggest challanges you want solved?
SETUP
Having sane configuration
Less hassle to set up
Frictionless test setup
Being easy to set up
…
Source: Brian Mann - Testing The Way It Should Be
WRITING
Simplier to write
Fast and reliable
Testing responsive design
Visually see what broke
…
MANAGEMENT
Flaky
Easy to maintain
Understand test failures
Less brittle to changes
…
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
WHAT TO EXPECT
• Understanding the key difference between Selenium and Cypress
• Getting started with Cypress
• Write some basic tests
• Working with HTTP and the DOM
• Explore debugging capabilities
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Blogging blog.thoughtram.io
Dominic Elm
Trainer @thoughtram
@elmd_
=
ABOUT MYSELF
Slide 14
Slide 14 text
What is Cypress?
• Cypress is an electron-based E2E test runner
• The goal is to revolutionize E2E testing
• Cypress allows for flake-free and reliable tests that run inside the browser
• It provides a powerful debugging tools and rich UI
• All-in-one solution that uses a good set of testing libraries
Slide 15
Slide 15 text
What is Cypress?
Integration
Unit
E2E
Slide 16
Slide 16 text
What is Cypress?
Integration
Unit
E2E
Cypress
Slide 17
Slide 17 text
HOW IS CYPRESS DIFFERENT
FROM SELENIUM?
Slide 18
Slide 18 text
Selenium vs. Cypress (1)
Selenium Cypress
Configuration
Browser Support
Open Source
Architecture
Remote commands
across the network
Runs inside the browser
and uses Node for anything
outside of the browser
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Selenium vs. Cypress (1)
Selenium Cypress
Configuration
Browser Support
Open Source
Architecture
Remote commands
across the network
Runs inside the browser
and uses Node for anything
outside of the browser
Slide 21
Slide 21 text
Selenium vs. Cypress (1)
Selenium Cypress
Configuration
Browser Support
Open Source
Architecture
Remote commands
across the network
Runs inside the browser
and uses Node for anything
outside of the browser
IE11 comes next
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Selenium vs. Cypress (1)
Selenium Cypress
Configuration
Browser Support
Open Source
Architecture
Remote commands
across the network
Runs inside the browser
and uses Node for anything
outside of the browser
IE11 comes next
Slide 24
Slide 24 text
Selenium’s Architecture
Ruby C#
Java PHP
JS
Other
Bindings (Client)
Chrome Safari
IE FF
Edge
Other
WebDriver (Server)
BROWSER
JSON «controls»
via HTTP via HTTP
Slide 25
Slide 25 text
Cypress’s Architecture
Browser
RUN LOOP
Cypress App
Cypress
via Websocket
Node.js Process
OS
Slide 26
Slide 26 text
Cypress’s Architecture
Browser
RUN LOOP
Cypress App
Cypress
via Websocket
Node.js Process
OS
DOM
Service Worker
…
LocalStorage
Window
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Selenium vs. Cypress (1)
Selenium Cypress
Debuggability
Speed
Waiting for Elements
Parallelism
⏳ ⏳
Headless Browser
⏳
Multiple Browsers / Tabs
Slide 29
Slide 29 text
Selenium vs. Cypress (1)
Selenium Cypress
Debuggability
Speed
Waiting for Elements
Parallelism
⏳ ⏳
Headless Browser
⏳
Multiple Browsers / Tabs
Comming in 3.1
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Selenium vs. Cypress (1)
Selenium Cypress
Debuggability
Speed
Waiting for Elements
Parallelism
⏳ ⏳
Headless Browser
⏳
Multiple Browsers / Tabs
Comming in 3.1
Slide 32
Slide 32 text
LET’S CODE!
Slide 33
Slide 33 text
What I ❤ about Cypress
• Super intuitive and easy to use
• No flaky tests (waits for XHR requests and DOM elements)
• Rich UI and lots of debugging capabilities (screenshots and videos)
• One step install (all in one solution)
• Open source
• Documentation
Slide 34
Slide 34 text
What I ❤ about Cypress
• Super intuitive and easy to use
• No flaky tests (waits for XHR requests and DOM elements)
• Rich UI and lots of debugging capabilities (screenshots and videos)
• One step install (all in one solution)
• Open source
• Documentation
References
• Images from https://www.pexels.com/ and https://unsplash.com/
• cypress.io
• Cypress vs. Selenium, is it the end of an era? - Lyudmil Latinov
• Testing the way it should be - Brian Mann
• Painless Testing for React Applications - Gleb Bahmutov