Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
I like my tests, like I like my friends, flake-...
Search
Amir Rustamzadeh
August 22, 2018
Programming
0
200
I like my tests, like I like my friends, flake-free and reliable
Cypress end-to-end testing talk given at JS Conf US in Carlsbad, CA.
Amir Rustamzadeh
August 22, 2018
Tweet
Share
More Decks by Amir Rustamzadeh
See All by Amir Rustamzadeh
Scalable Testing Practices for Modern Apps
amir
1
390
End-to-End Testing Vue Apps with Cypress
amir
2
390
REFACTR.Tech Cypress Workshop Intro
amir
1
170
Next-Generation Web Application End-to-End Testing with Cypress
amir
0
380
Other Decks in Programming
See All in Programming
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
570
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
850
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
技術を根付かせる / How to make technology take root
kubode
1
250
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
150
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
150
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
270
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
300
color-scheme: light dark; を完全に理解する
uhyo
6
430
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1368
200k
Music & Morning Musume
bryan
46
6.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Faster Mobile Websites
deanohume
306
31k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Building Applications with DynamoDB
mza
93
6.2k
The Cult of Friendly URLs
andyhume
78
6.2k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Why Our Code Smells
bkeepers
PRO
336
57k
Rails Girls Zürich Keynote
gr2m
94
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Transcript
I like my tests, like I like my friends, flake-free
and reliable Amir Rustamzadeh @amirrustam JS Conf ! 2018
Sr. Software Engineer @amirrustam Amir Rustamzadeh
[email protected]
E2E Integration Unit Visit The Testing Pyramid @amirrustam
E2E Integration Unit Visit The Testing Pyramid Easy, developers really
like to write these. @amirrustam
E2E Integration Unit Visit The Testing Pyramid Easy, developers really
like to write these. More Difficult, costly, slower… Often completely ignored @amirrustam
E2E Integration Unit Visit The Testing Pyramid Best for users
& business @amirrustam
Renaissance of the Web 2005 2006 2014 2013 @amirrustam
Renaissance of the Web 2005 2006 2014 2013 More complexity
moved from backend to frontend. @amirrustam
2005 2006 2014 2013 Renaissance of the Web + Testing
Automation 2004 @amirrustam
Selenium Architecture Selenium Server Drivers Tests Python Javascript Java @amirrustam
Selenium Architecture Selenium Server Drivers Tests Python Javascript Java ⚠
Classical Syncing Dilemma @amirrustam
Selenium Architecture Flakiness Non-deterministic @amirrustam
✋ JSDOM or DOM Emulation JSDOM is not a real
browser. Your users don’t run your app with JSDOM. One of the primary reasons for E2E is to simulate real user actions. @amirrustam
Don’t let your users be your first E2E test. @amirrustam
Stateless Stateful @amirrustam
Fast, easy and reliable testing for anything that runs in
a browser. Free. Open Source. MIT License @amirrustam
$ npm install -D cypress ☝ All-in-one tool You get
everything you need ❤ Familiar tools underneath Mocha, Chia, Sinon @amirrustam
Lets see it in action…. @amirrustam https://github.com/cypress-io/cypress-example-todomvc
Cypress Architecture Browser Cypress Test Runner Your App @amirrustam
⚡ Native-access to the DOM and your app.
- Fast Test Runs @amirrustam
⏳ Automatic Waiting @amirrustam
Debuggability @amirrustam
Realtime Reloading @amirrustam
Flake-free, consistent, and reliable. @amirrustam
How are commands executed? 1 2 3 @amirrustam
⚙ Component Testing cypress-react-unit-testing vue angular angularjs hyper-app svelte cycle
@amirrustam https:!//github.com/bahmutov/cypress-vue-unit-test#test-adapters-for-other-frameworks
3 cypress open Great for everyday development workflow Cypress +
Editor Side-by-Side TDD Nirvana cypress run Testing in CI/CD Pipeline Headless More efficient for running all your tests @amirrustam
3 cypress open Great for everyday development workflow Cypress +
Editor Side-by-Side TDD Nirvana cypress run --record Video Recordings of Tests @amirrustam
Cypress Dashboard - Great for CI @amirrustam
cypress run --record --parallel Introducing Parallelization Now available in Cypress
3.1 @amirrustam
cypress run --parallel cypress run --parallel cypress run --parallel Your
CI Machines 3x parallelism Ready for work signup.spec.js login.spec.js widget.spec.js @amirrustam
Previous Spec Test Runs Spec Test Duration History Test Duration
(seconds) The Future Automatic Load Balancing of Test Specs Duration Forecast @amirrustam
Automatic Load Balancing of Test Specs login.spec.js signup.spec.js widget.spec.js @amirrustam
Cypress Parallelization Easily optimize your CI usage You save a
lot of ⏳ time and money @amirrustam
cypress run --group frontend Introducing Test Run Grouping Now available
in Cypress 3.1
Documentation docs.cypress.io
Best Practices docs.cypress.io @amirrustam
https:!//youtu.be/5XQOK0v_YRE Cypress Best Practices Brian Mann, Creator of Cypress
End to End testing with Cypress By Andrew Van Slaars
egghead.io/courses/end-to-end-testing-with-cypress
docs.cypress.io/examples/examples/tutorials.html Tutorial Videos
Testing Workshop docs.cypress.io/examples/examples/workshop.html
Podcasts docs.cypress.io/examples/media/podcasts-media.html
We are trying to drastically improve the status quo of
testing on the web. @amirrustam
Thank You npm install -D cypress Free. Open Source. MIT
License Follow @amirrustam for link to slides.