Cypress_-_e2e_testing_for_Web_in__2019_.pdf

by Shahjada Talukdar

Slide 1

Slide 1 text

Cypress - e2e testing for Web in 2019 21.08.2019

Slide 2

Slide 2 text

Shahjada Talukdar Senior Software Engineer @eBay

Slide 3

Slide 3 text

What is Cypress? JavaScript e2e Testing Framework

Slide 4

Slide 4 text

Why we need another tool? Selenium, Robots

Slide 5

Slide 5 text

Limitations of Selenium ● Old(2004) and was not built for the today’s modern webapps ● Slow, flaky tests, not stable enough

Slide 6

Slide 6 text

Experience with robot ● It’s hard to make dev env ● Hard to write and run tests ● Local env test running is hard while development ● Not sure if it’s very good for TDD

Slide 7

Slide 7 text

Objective ( to solve the problem ) To have a testing environment with possibly fewer flaky tests and faster & easier dev experience.

Slide 8

Slide 8 text

Challenges for companies ● Existing test framework(Robot) is already in power. ● Existing app(already built), harder than apps from scratch. ● Need to think about the existing DevOps environment.

Slide 9

Slide 9 text

Current Limitations of cypress ● Still pretty new ( I think it as react’s beginning time ). ● No IE support yet (they say to test with chrome and if the app works 100% means it is tested e2e so it’s a big relief too ).

Slide 10

Slide 10 text

Benefits(?) of Cypress ● Same JS code everywhere. ● Development environment couldn’t be easier than this. ● We can use our existing testing knowledge like mocha, jest, jasmine

Slide 11

Slide 11 text

● https://www.cypress.io/how-it-works

Slide 12

Slide 12 text

Old Team, Old App and We have 50 developers, what to do? npm install

Slide 13

Slide 13 text

Initiate cypress for an existing app cypress open

Slide 14

Slide 14 text

e2e tests need to wait for the page to render and finish the http calls Cypress does this by default ( at least they say so ) That’s why, fewer/no manual time waits

Slide 15

Slide 15 text

My app is developed with React(redux), Angular, Vue, Polymer, Vanilla? Cypress does not need to know the framework. And no major application code changes for the tests to run

Slide 16

Slide 16 text

Demo

Slide 17

Slide 17 text

Features of Cypress

Slide 18

Slide 18 text

Time travelling Cypress takes snapshots as your tests run. Simply hover over commands in the Command Log to see exactly what happened at each step.

Slide 19

Slide 19 text

Real time reloads Cypress automatically reloads whenever you make changes to your tests. See commands execute in real time in your app.

Slide 20

Slide 20 text

Debuggability Stop guessing why your tests are failing. Debug directly from familiar tools like Chrome DevTools. Our readable errors and stack traces make debugging lightning fast.

Slide 21

Slide 21 text

Automatic waiting Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.

Slide 22

Slide 22 text

Network traffic control - Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like. - Fixtures

Slide 23

Slide 23 text

Screenshots and videos - View screenshots taken automatically on failure, or videos of your entire test suite when run headlessly. - Screenshots using API

Slide 24

Slide 24 text

Selectors Playground

Slide 25

Slide 25 text

Environment Variables

Slide 26

Slide 26 text

Dashboard in Cypress

Slide 27

Slide 27 text

Comparisons - With cypress it will be less waits and sleeps or probably close to none. Cypress is growing so fast, we can hope it will be even more stable & better.