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
170
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
On-the-fly Suggestions of Rewriting Method Deprecations
ohbarye
3
7.4k
組織のスケールを見据えたプロジェクトリードエンジニア制度の実践 / Project Lead Engineer for Scaling Engineering Organization
ohbarye
14
3.6k
Two Blades, One Journey: Engineering While Managing
ohbarye
5
5.4k
Git scrapingで始める継続的なデータ追跡 / Git Scraping
ohbarye
5
1.8k
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
7
1.4k
Data Migration on Rails
ohbarye
8
12k
Unlocking Potential of Property Based Testing with Ractor
ohbarye
3
18k
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
1.9k
My Favorite Protocol: Idempotency-Key Header
ohbarye
7
7.8k
Other Decks in Technology
See All in Technology
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
190
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
430
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Automating Front-end Workflow
addyosmani
1370
200k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building Adaptive Systems
keathley
43
2.7k
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