Slide 1
Slide 1 text
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
Slide 2
Slide 2 text
2
Testing Pyramid
E2E
Integration
Unit
• Slow?
• Unreliable?
• Hard?
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
4
Cypress Test Runner
Slide 5
Slide 5 text
5
Cypress Test Runner
Test Spec
Slide 6
Slide 6 text
6
Cypress Test Runner
Test Spec Target App
Slide 7
Slide 7 text
7
Demo
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
9
Fast
Selenium WebDriver's Architecture
Test Script WebDriver Browser
HTTP Control
Slide 10
Slide 10 text
10
Fast
Cypress runs in the same run-loop as your app.
Test Spec Target App
Slide 11
Slide 11 text
11
Time Travel
We can check DOM snapshot for each test step.
Slide 12
Slide 12 text
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)
})
Slide 13
Slide 13 text
13
Debuggability
We can debug our application.
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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)
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
17
and we want you!
Let's talk about Cypress!