Painless Testing for Modern Web Applications with Cypress.io

Ministry of Testing

Rio de Janeiro (online meetup)

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

Gleb Bahmutov, PhD

VP of Engineering Cypress.io

11 people. Atlanta, Philly, Boston, LA

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

Why is all software broken?

Will Klein

Quality software behaves the way users expect it to behave

We going to need some tests

E2E

integration

unit

Smallest pieces

Testing Pyramid △

Unit tests pass...

E2E

integration

unit

Component

E2E

integration

unit

Website / API

E2E

integration

unit

Really important to users

Really important to developers

$ npm install -D cypress
it('opens the page', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .should('be.visible')
})
it('opens the page', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .should('be.visible')
})

Mocha test syntax

it('opens the page', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .should('be.visible')
})

Select elements and chain commands just like jQuery

it('opens the page', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .should('be.visible')
})

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)
})

branch: mot-rio-demo

git clone git@github.com:cypress-io/testing-workshop-cph.git
cd testing-workshop-cph
git checkout mot-rio-demo
npm install
npm start & npm run cy:open

Other Demos

Many presentations and videos about Cypress

Egghead.io Cypress Course

Free course (same author Andrew Van Slaars!)

Cypress documentation

Cypress examples

Test components from these frameworks with ease

Main Cypress Advantages

  • Automatic assertion retries

  • Built-in network spying and stubbing

  • Built-in method spying and stubbing

  • Screenshots and video recording

100% FREE & OSS

Paid Features 💵

Paid Features 💵: artifacts

Paid Features 💵: load balancing

cypress run --record
cypress run --record --group single
cypress run --record --group parallel --parallel

Most CIs should just work 🙏

Paid Features 💵: load balancing

Paid Features 💵: load balancing

one group

another group

Paid Features 💵: load balancing

one group

another group

--parallel

Paid Features 💵

  • Keeps all test data for you

  • Makes use of test history to do more than a single test runner can

Paid Features 💵

are FREE for OSS projects

  • Keeps all test data for you

  • Makes use of test history to do more than a single test runner can

Future work

  • Retries / flake factor

  • Cross-browser

  • Full network stubbing

  • so many more ideas ...

Thank you 👏

Painless Testing for Modern Web Applications with Cypress.io

By Gleb Bahmutov

Painless Testing for Modern Web Applications with Cypress.io

This presentation showcases Cypress.io - an open source, MIT-licensed end-to-end test runner that radically breaks with existing technologies (like Selenium, WebDriver) to be able to test _modern_ web applications. The main focus of Cypress is to give every developer a tool that helps rather than hinders the development process. Thus it has such features as GUI with time traveling debugger and DOM snapshots; headless run mode on CI with video recording by default; full browser DevTools to inspect the application's behavior; spying and stubbing of network calls; and many other advantages compared to existing solutions. Presented at Ministry of Testing Rio de Janeiro.

  • 2,694