Slide 1

Slide 1 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Inspirations • todomvc, https://github.com/d3lm/todomvc • ngx-drag-to-select, https://github.com/d3lm/ngx-drag-to-select • MachineLabs, https://github.com/machinelabs/machinelabs

Slide 37

Slide 37 text

@elmd_

Slide 38

Slide 38 text

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