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
Cypress_-_e2e_testing_for_Web_in__2019_.pdf
Search
Shahjada Talukdar
August 21, 2019
Programming
0
1.3k
Cypress_-_e2e_testing_for_Web_in__2019_.pdf
Shahjada Talukdar
August 21, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
120
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
860
Design Foundational Data Engineering Observability
sucitw
3
200
Testing Trophyは叫ばない
toms74209200
0
880
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.3k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
160
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
170
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
220
はじめてのMaterial3 Expressive
ym223
2
400
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
300
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How GitHub (no longer) Works
holman
315
140k
KATA
mclloyd
32
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Transcript
Cypress - e2e testing for Web in 2019 21.08.2019
Shahjada Talukdar Senior Software Engineer @eBay
What is Cypress? JavaScript e2e Testing Framework
Why we need another tool? Selenium, Robots
Limitations of Selenium • Old(2004) and was not built for
the today’s modern webapps • Slow, flaky tests, not stable enough
Experience with robot • It’s hard to make dev env
• Hard to write and run tests • Local env test running is hard while development • Not sure if it’s very good for TDD
Objective ( to solve the problem ) To have a
testing environment with possibly fewer flaky tests and faster & easier dev experience.
Challenges for companies • Existing test framework(Robot) is already in
power. • Existing app(already built), harder than apps from scratch. • Need to think about the existing DevOps environment.
Current Limitations of cypress • Still pretty new ( I
think it as react’s beginning time ). • No IE support yet (they say to test with chrome and if the app works 100% means it is tested e2e so it’s a big relief too ).
Benefits(?) of Cypress • Same JS code everywhere. • Development
environment couldn’t be easier than this. • We can use our existing testing knowledge like mocha, jest, jasmine
• https://www.cypress.io/how-it-works
Old Team, Old App and We have 50 developers, what
to do? npm install
Initiate cypress for an existing app cypress open
e2e tests need to wait for the page to render
and finish the http calls Cypress does this by default ( at least they say so ) That’s why, fewer/no manual time waits
My app is developed with React(redux), Angular, Vue, Polymer, Vanilla?
Cypress does not need to know the framework. And no major application code changes for the tests to run
Demo
Features of Cypress
Time travelling Cypress takes snapshots as your tests run. Simply
hover over commands in the Command Log to see exactly what happened at each step.
Real time reloads Cypress automatically reloads whenever you make changes
to your tests. See commands execute in real time in your app.
Debuggability Stop guessing why your tests are failing. Debug directly
from familiar tools like Chrome DevTools. Our readable errors and stack traces make debugging lightning fast.
Automatic waiting Never add waits or sleeps to your tests.
Cypress automatically waits for commands and assertions before moving on. No more async hell.
Network traffic control - Easily control, stub, and test edge
cases without involving your server. You can stub network traffic however you like. - Fixtures
Screenshots and videos - View screenshots taken automatically on failure,
or videos of your entire test suite when run headlessly. - Screenshots using API
Selectors Playground
Environment Variables
Dashboard in Cypress
Comparisons - With cypress it will be less waits and
sleeps or probably close to none. Cypress is growing so fast, we can hope it will be even more stable & better.
None
Thank you Shahjada Talukdar https://shahjada.me https://twitter.com/destro_mas
Questions and discussions