$30 off During Our Annual Pro Sale. View details »

Introduction to Cypress

Introduction to Cypress

Lightning talk at E2E Test Automation Day 2019 with Selenium (Osaka)

Mitsuyuki Shiiba

July 20, 2019

More Decks by Mitsuyuki Shiiba

Other Decks in Programming


  1. Lightning Talk – Introduction to Cypress Jul 20, 2019 at

    E2E Test Automation Day with Selenium Mitsuyuki Shiiba EC Incubation Development Dept. Rakuten, Inc. tw: bufferings
  2. 2 Testing Pyramid E2E Integration Unit • Slow? • Unreliable?

    • Hard?
  3. 3 https://www.cypress.io/ "Fast, easy and reliable testing for anything that

    runs in a browser." Cypress doesn't use Selenium. Free / Open Source / MIT License
  4. 4 Cypress Test Runner

  5. 5 Cypress Test Runner Test Spec

  6. 6 Cypress Test Runner Test Spec Target App

  7. 7 Demo

  8. 8 Easy to install, easy to run # Install everything

    with one command $ npm install cypress --save-dev # GUI Runner $ npx cypress open # Headless Runner $ npx cypress run
  9. 9 Fast Selenium WebDriver's Architecture Test Script WebDriver Browser HTTP

  10. 10 Fast Cypress runs in the same run-loop as your

    app. Test Spec Target App
  11. 11 Time Travel We can check DOM snapshot for each

    test step.
  12. 12 Automatic Waiting & Retry We can focus on what

    to test. it('adds 2 todos', function () { cy.visit('/') cy.get('.new-todo') .type('learn testing{enter}') .type('be cool{enter}') cy.get('.todo-list li') .should('have.length', 2) })
  13. 13 Debuggability We can debug our application.

  14. 14 Cypress Architecture Browser (Using same domain with proxy) NodeJS

    Process Reference Dominic Elm - Cypress: The future of E2E testing https://youtu.be/pXyBligMMr0?t=1107 Tests (iframe) App (iframe) Cypress Proxy OS Web Websocket Start with Proxy DOM LocalStorage ... Service Worker
  15. 15 Many other good parts! • Real time reloads •

    Spies, stubs, and clocks • Network traffic control • Consistent results • Screenshots and videos (headless runner) • Dashboard (paid feature)
  16. 16 Restrictions • Only support Chromium currently • Seem to

    be working on Firefox, IE, Edge • Not supported (because of its architecture) • Multiple tabs/browsers • Multiple domains in one test case
  17. 17 and we want you! Let's talk about Cypress!