Introduction to Cypress

Lightning talk at E2E Test Automation Day 2019 with Selenium (Osaka)
https://seleniumjp.connpass.com/event/133553/

Transcript

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
   

   View Slide

2. 2
   Testing Pyramid
   E2E
   Integration
   Unit
   • Slow?
   • Unreliable?
   • Hard?
   

   View Slide

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
   

   View Slide

4. 4
   Cypress Test Runner
   

   View Slide

5. 5
   Cypress Test Runner
   Test Spec
   

   View Slide

6. 6
   Cypress Test Runner
   Test Spec Target App
   

   View Slide

7. 7
   Demo
   

   View Slide

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
   

   View Slide

9. 9
   Fast
   Selenium WebDriver's Architecture
   Test Script WebDriver Browser
   HTTP Control
   

   View Slide

10. 10
    Fast
    Cypress runs in the same run-loop as your app.
    Test Spec Target App
    

    View Slide

11. 11
    Time Travel
    We can check DOM snapshot for each test step.
    

    View Slide

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

    View Slide

13. 13
    Debuggability
    We can debug our application.
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

17. 17
    and we want you!
    Let's talk about Cypress!
    

    View Slide