Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Cypress

Introduction to Cypress

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


Mitsuyuki Shiiba

July 20, 2019


  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!