Effective E2E and Integration Testing with Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Nikola Δuza
Writer and owner at Pragmatic Pineapple
Sr Software Engineer at ToptalΒ π₯
Cypress.io Ambassador
Novi Sad JS Organizer π£
Ruby and JS π
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7935631/me-illustrated-brown-cropped.jpg)
What will you learn?
- Difference between Selenium, Puppeteer, and Cypress
- Cypress Best Practices
- Advanced use of Cypress
Topics
- Why test?
- What about code coverage?
- What kinds of tests to write?
- Cypress VS Selenium VS Puppeteer
- Cypress Best Practices
- Cypress + React = π
- GIFT π
Why test?
Why test?
- Make sure software works
- And that it will work
- Future proof
Why test?
CONFIDENCE
Why test?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5499960/confidence.gif)
Why test?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7962873/maxresdefault.jpg)
Why test?
BE SURE TO
TEST YOUR CODE
What about code coverage?
Code coverage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510263/Screen_Shot_2018-11-20_at_5.22.33_PM.png)
Code coverage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5550417/Screen_Shot_2018-11-30_at_12.37.53_PM.png)
Code coverage
How much is enough?
Code coverage
How much is enough?
Β―\_(γ)_/Β―
Code coverage
How much is enough?
Β―\_(γ)_/Β― IT DEPENDS
Code coverage
YOU SHOULD HAVE IT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6515844/Screenshot_2019-09-07_at_18.25.27.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7153683/carbon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7153693/import_code_coverage_in_support_index.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7153694/carbon__3_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7153901/code-coverage.png)
What kinds of tests to write?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510408/smoking-testing-pyramid.jpg)
The "Smoking" Testing Pyramid
The Testing Square
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510453/testing-square.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7954122/testing-crab.jpeg)
The Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510465/testing-trophy-hq.png)
Static tests (analysis)
TypeScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7954408/Screenshot_2020-11-19_at_18.38.06.png)
ESLint
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510512/eslint_react.png)
Static tests (analysis)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510541/Screen_Shot_2018-02-12_at_9.30.37_PM.png)
Check out
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5550448/prettier-banner-light.png)
Unit tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510563/carbon__1_.png)
Integration tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5520255/carbon__4_.png)
E2E tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547956/carbon__13_.png)
Unit and integration and E2E tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Cypress VS Selenium VS Puppeteer
What are they?
Browser automating tools π
Selenium VS Puppeteer VS Cypress
Selenium
-
Initial idea 2004 by Jason Huggins
- You can cure mercury poisoning by taking selenium supplements
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960819/selenium-logo-DB9103D7CF-seeklogo.com.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960880/0_rRDI9EXVUCvtd2Dj.png)
Selenium
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960819/selenium-logo-DB9103D7CF-seeklogo.com.png)
Selenium
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960819/selenium-logo-DB9103D7CF-seeklogo.com.png)
Supports: Java, C#, JavaScript, Python, Ruby, Objective-C
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960899/java-eps-vector-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960903/512px-C_Sharp_logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960906/768px-Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960907/1200px-Python-logo-notext.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960910/1024px-Ruby_logo.svg.png)
Selenium
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960819/selenium-logo-DB9103D7CF-seeklogo.com.png)
Supports almost all browsers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961105/768px-Google_Chrome_icon__September_2014_.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961111/1200px-Firefox_Logo__2017.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961117/8c9568e0875e71b5c0397f39c50a87f8.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961120/1028px-Safari_browser_logo.svg.png)
Selenium
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960819/selenium-logo-DB9103D7CF-seeklogo.com.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960948/selenium.png)
- First commit in 2017
- Founded by Google
- Node.js library for controlling Chrome
Puppeteer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6534417/Picture_13.png)
Puppeteer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6534417/Picture_13.png)
Uses DevTools protocol
Puppeteer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6534417/Picture_13.png)
Uses DevTools protocol
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961003/1_rc3oFdELXX-ZW7qJBGRF7w.png)
Puppeteer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6534417/Picture_13.png)
Supports writing tests in JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960906/768px-Unofficial_JavaScript_logo_2.svg.png)
Puppeteer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6534417/Picture_13.png)
Supports Chrome and Firefox
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961105/768px-Google_Chrome_icon__September_2014_.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961111/1200px-Firefox_Logo__2017.svg.png)
Puppeteer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6534417/Picture_13.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961013/puppeteer.png)
Puppeteer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6534417/Picture_13.png)
Cons:
- No built-in tooling
- Only Chrome and Firefox
- Parallel builds on CI is difficult
- Started in 2015 Brian Mann and Randall KentΒ
- Testing framework
- Runs inside the browser
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961243/1-Difference-between-cypress-and-Non-Cypress-based-test-frameworks.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7960906/768px-Unofficial_JavaScript_logo_2.svg.png)
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
Supports writing tests in JavaScript
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961105/768px-Google_Chrome_icon__September_2014_.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961111/1200px-Firefox_Logo__2017.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961117/8c9568e0875e71b5c0397f39c50a87f8.gif)
Supports: Chrome-based browsers, Firefox, Edge
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
Cons:
- Can't drive two browsers at the same time
- No multi-tab support
- No Safari and IE support (but are in consideration)
- Limited support for iFrames
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7963152/Screenshot_2020-11-22_at_15.27.36.png)
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/7961223/q1cwqhahz7jbtfzalznd.png)
Show us the tests already
Cypress Best Practices
Cypress Best Practices
Test login flow
Cypress Best Practices
Test login flow
BUT
ONLY ONCE
Login test example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547956/carbon__13_.png)
Login test example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5550590/Screen_Shot_2018-11-29_at_9.07.01_PM.png)
Viewing the settings page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547961/carbon__14_.png)
Viewing the settings page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547961/carbon__14_.png)
Login without UI test example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547975/carbon__15_.png)
Page Object pattern
Page Object pattern
Cypress Custom Commands
Adding a Cypress Custom Command
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547987/carbon__16_.png)
Login without UI test example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5547994/carbon__17_.png)
Testing Login Flow only once
gives you
- More speed π
- Testing in isolation π
- Less complex tests πββοΈ
Cypress Best Practices
DO NOT USE
UI
TO POPULATE DATA
Cypress Best Practices
CLEAN UP STATE
BEFORE
TESTS RUN
Selenium-based tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5528585/carbon__11_.png)
In Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5528585/carbon__11_.png)
There's no guarentee this will run
Clean up state before tests run
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5548031/carbon__19_.png)
Cypress Best Practices
START A WEB SERVER PRIOR TO RUNNING CYPRESS
Start a web server prior to running Cypress
$ npm start & cypress run
Start a web server prior to running Cypress
π ββοΈπβπ ββοΈ
$ npm start & cypress run
Start a web server prior to running Cypress
$ npm start & cypress run
π ββοΈπβπ ββοΈ
$ npm start & wait-on http://localhost:8080 \
& cypress run
Start a web server prior to running Cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5528660/carbon__13_.png)
$ npm test
Cypress Best Practices
Check out more at:
Cypress + React = β€οΈ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5538554/react-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Snapshot testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541015/cypress-plugin-snapshots.png)
Snapshot testing
HTML
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541247/carbon__2_.png)
Snapshot testing
JSON response
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541315/carbon__6_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541300/carbon__5_.png)
Redux
exposing the store
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541327/carbon__7_.png)
Redux
dispatching action objects
Redux
dispatching actions from our code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541366/carbon__9_.png)
Redux + Snapshots
checking state with snapshot testing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541445/carbon__10_.png)
React Unit Tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5552966/carbon__22_.png)
React Unit Tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5552965/react-unit-test.png)
File upload
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5550345/carbon__20_.png)
File upload
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541500/Screen_Shot_2018-11-28_at_2.13.22_PM.png)
BUT WAIT β
BUT WAIT β
Β
YOU JUST STUBBED
A SERVER RESPONSE
BUT WAIT β
Β
YOU JUST STUBBED
A SERVER RESPONSE
Β
IT'S NOT A "TRUE" E2E TEST?! π€
STUBBING REQUESTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541527/Screen_Shot_2018-11-28_at_2.25.17_PM.png)
REAL REQUESTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5541529/Screen_Shot_2018-11-28_at_2.24.40_PM.png)
Writing UI tests in Cypress
MEANS WRITING BOTH
-
E2E tests ππβ°
-
integration tests π»ππ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5499672/Screen_Shot_2018-11-18_at_3.12.05_PM.png)
Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
cheap
π΅π°
Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
cheap
ππ¨
π’
π΅π°
Testing Trophy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5510463/testing-trophy.jpg)
cheap
ππ¨
π’
π΅π°
BIG PROBLEMS π€―
Small problems π
Integration tests provide best balance of:
- π΅
- ππ¨
- π
That's why UI testing in Cypress is:
- cheap π΅
- fast ππ¨
- fun π
$ npm install cypress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Let's see it π
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Gift time π
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5516085/cypress-logo.png)
Free Cypress shirt π
βMore questions? Join Discord
βοΈ Check out my blog https://pragmaticpineapple.com
π¦ Follow me on Twitter https://twitter.com/nikolalsvk
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5551602/cypress-turning.jpg)
Effective E2E and Integration Testing with Cypress
By Nikola Δuza
Effective E2E and Integration Testing with Cypress
Why and how to do (E2E and integration) tests with Cypress. There is also a focus on comparing Selenium to Cypress.
- 1,588