Gleb Bahmutov, PhD

VP of Engineering

Dr Gleb Bahmutov PhD

github.com/bahmutov

glebbahmutov.com/blog/

C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / functional

https://slides.com/bahmutov/cypress-intro

(these slides)

20 people. Atlanta, Philly, Boston, Chicago, NYC

Fast, easy and reliable testing for anything that runs in a browser

Quality software behaves the way users expect it to behave

We going to need some tests

E2E

integration

unit

Testing Pyramid △

E2E

integration

unit

Web application

Open real browser
Load actual app
Interact with app like a real user
See if it works

E2E

integration

unit

Really important to users

Really important to developers

$ npm install -D cypress

Win / Mac / Linux
MIT License
OSS https://github.com/cypress-io/cypress
http://on.cypress.io/introduction-to-cypress

// ui-spec.js
it('loads the app', () => {
  cy.visit('http://localhost:3000')
  cy.get('.todoapp').should('be.visible')
})

https://on.cypress.io/api

Mocha BDD syntax

Chai assertions

it('adds 2 todos', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .type('learn testing{enter}')
    .type('be cool{enter}')
  cy.get('.todo-list li')
    .should('have.length', 2)
})

https://on.cypress.io/api

https://github.com/cypress-io/cypress-example-todomvc

$ npx cypress open

https://github.com/cypress-io/cypress-example-todomvc

Cypress demo

Typical test
Failing test
Recording tests
CI setup
Cypress dashboard

https://github.com/cypress-io/cypress-example-todomvc

DOM

storage

location

cookies

Cypress tests run in the same browser

https://on.cypress.io/key-differences

DOM

storage

location

cookies

Cypress acts as a proxy for your app

https://docs.cypress.io/

Tutorials

Api

Examples

"cypress open" - GUI interactive mode
"cypress run" - headless mode

Cypress CLI has 2 main commands

full video of the run, screenshots of every failure

Every CI should be good
Or use a Docker image we provide

Running E2E on CI

https://on.cypress.io/continuous-integration

https://github.com/cypress-io/cypress-docker-images

https://github.com/cypress-io/cypress-example-kitchensink

https://on.cypress.io/ci

Making it easy for users is not easy

Other Demos

https://on.cypress.io/talks-media

presentations and videos about Cypress

Paid Features 💵

https://on.cypress.io/dashboard-service

recording test artifacts
test parallelization
GitHub integration
(WIP) historical insights

Paid Features 💵

https://on.cypress.io/dashboard-service

Paid Features 💵: artifacts

test output, video, screenshots

I have 100s of tests ...

https://www.cypress.io/blog/2018/09/05/run-end-to-end-tests-on-ci-faster/

https://on.cypress.io/parallelization

$ npx cypress run --record --parallel

https://on.cypress.io/parallelization

Cypress v3.1.0

Spin N CI machines and

Text

cypress-dashboard parallelization

https://slides.com/bahmutov/cy-parallelization

cypress-dashboard parallelization

https://slides.com/bahmutov/cy-parallelization

# machines	run duration	time savings
1	22:50	~
2	11:47	48%
3	7:51	65%
4	5:56	74%
6	3:50	83%
8	3:00	87%
10	2:19	90%

cypress-dashboard parallelization

10 machines = 10x speed up

https://slides.com/bahmutov/cy-parallelization

If you can write E2E tests in a framework-agnostic way

You can replace framework X with Y

(without breaking things)

Cypress Philosophy

https://on.cypress.io/testing-your-app

Test your app
Stub 3rd party services

Why developers love Cypress

Fast, flake-free
GUI, time travel
Test recording
Documentation

https://www.cypress.io/#testimonials

https://on.cypress.io/roadmap

Coming soon

Retries / flake factor
Cross-browser
Full network stubbing
so many more ideas ...

IE11

Thank you 👏

@cypress_io

@bahmutov

https://slides.com/bahmutov/cypress-intro

github.com/cypress-io/cypress ⭐️