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
Let's Get Started Integration Testing With Cypress
Search
Masato Ohba
September 30, 2019
Technology
0
180
Let's Get Started Integration Testing With Cypress
Masato Ohba
September 30, 2019
Tweet
Share
More Decks by Masato Ohba
See All by Masato Ohba
5年間のFintech × Rails実践に学ぶ - 基本に忠実な運用で築く高信頼性システム / 5 Years Fintech Rails Retrospective
ohbarye
9
5.3k
On-the-fly Suggestions of Rewriting Method Deprecations
ohbarye
3
9.1k
組織のスケールを見据えたプロジェクトリードエンジニア制度の実践 / Project Lead Engineer for Scaling Engineering Organization
ohbarye
14
3.7k
Two Blades, One Journey: Engineering While Managing
ohbarye
5
6k
Git scrapingで始める継続的なデータ追跡 / Git Scraping
ohbarye
5
2.3k
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
7
1.9k
Data Migration on Rails
ohbarye
8
14k
Unlocking Potential of Property Based Testing with Ractor
ohbarye
3
19k
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
2.3k
Other Decks in Technology
See All in Technology
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
400
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
230
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
100
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
150
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
880
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
170
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
270
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
110
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
360
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.9k
How to train your dragon (web standard)
notwaldorf
97
6.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Why Our Code Smells
bkeepers
PRO
340
57k
Producing Creativity
orderedlist
PRO
347
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
BBQ
matthewcrist
89
9.8k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Transcript
Let's Get Started Integration Testing With Cypress Let's Get Started
Integration Testing With Cypress Quipper Engineering Knowledge Sharing Session @ohbarye
Let's Get Started Integration Testing With Cypress 話すこと ➔ ReactNativeからPWAに移ったことでテストツールの選択肢が変わった。
Cypressというツールを検討しているのでその話 ➔ 今回の聴衆イメージ ◆ フロントエンドのE2E、Integrationテストに興味があるがやったことがな いので雰囲気を知りたい ◆ QA EngineerやProduct Managerとして外部仕様からテスト自動化に 取り組みたい 2
Let's Get Started Integration Testing With Cypress Agenda | 01
02 03 What’s Cypress? Demo Impression 3
Let's Get Started Integration Testing With Cypress What’s Cypress? 01
4
Let's Get Started Integration Testing With Cypress What’s Cypress? ➔
Cypress.io社が開発するオープンソースの自動テストツール(MIT License) ◆ 実行結果の集積・分析を行うDashboard Serviceは有料 ➔ Chromium, Chrome, Electron上でテストが実行可能 ◆ クロスブラウザ対応はあまり期待しないほうが良さそう https://github.com/cypress-io/cypress/issues/310 5
Let's Get Started Integration Testing With Cypress ➔ For E2E
test, Integration test, Unit test ◆ ネットワークを介したリクエストはバイパスすることもできるし、スタブす ることもできる ➔ JavaScriptやTypeScriptでテストケースを書く ➔ 基本的にはCypressとは別プロセスで立ち上がっているアプリケーションに 対するテストを行う What’s Cypress? 6
Let's Get Started Integration Testing With Cypress Demo 02 7
Let's Get Started Integration Testing With Cypress https://github.com/ohbarye/cypress-demo
Let's Get Started Integration Testing With Cypress CircleCI with orb
9 ※実際は自分のアプリケーションを立ち上げるコマンドなどが必要
Let's Get Started Integration Testing With Cypress CircleCI 10
Let's Get Started Integration Testing With Cypress Impression 03 11
Let's Get Started Integration Testing With Cypress ➔ 公式ドキュメントが充実している(API理解もサンプルもほぼ足りる) ➔
外部仕様しか知らない人でも振る舞いに関してそれなりのテストケースが書 ける(E2E, integration test全般に言えること) ➔ mocha, chai, sinonあたりのフロントエンドテストツールに馴染みがある人な らほぼ迷わず書ける ➔ should, expectが入り混じりクセがある面も テストの書き味 12
Let's Get Started Integration Testing With Cypress ➔ 公式のガイドに従えばさほど詰まることはない ◆
https://docs.cypress.io/guides/guides/continuous-integration.html ◆ 実行環境入りのDocker imageがあるがNode versionがかなり限定さ れている ➔ CI上にscreenshot, videoを保存できるようになるとワクワクする ◆ Visual regression testは非公式のpluginでできるが… ◆ https://github.com/meinaart/cypress-plugin-snapshots CI Integration 13
Let's Get Started Integration Testing With Cypress ➔ 今回レベルのテストはどのツールでもできるのでもう少し深堀りたい ➔
Selenium, WebdriverIO に比べて... 直接ブラウザを操作する、テストに 特化している ➔ puppeteer に比べて... npm installしてすぐテストを書ける (test runner, assertion, 全てall in one) ➔ testcafe に比べて... documentが充実、コミュニティが活発、会社が新しめ (DevExpress: found 1998, Cypress.io founded 2015) 他ツールとの比較 14
Let's Get Started Integration Testing With Cypress 15 なぜE2E testや
Integration testを やっていくのか
Let's Get Started Integration Testing With Cypress https://kentcdodds.com/blog/write-tests 16
Let's Get Started Integration Testing With Cypress This world needs
more integration tests
Let's Get Started Integration Testing With Cypress Enjoy your test
life! 18