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
110
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
My Favorite Protocol: Idempotency-Key Header
ohbarye
6
4.3k
エンジニア9名でプロポーザル提出8件, 採択3件を支える技術と文化 / Proposal Fight Culture
ohbarye
1
3.5k
管理機能アーキテクチャパターンの考察と実践 / Learn Architecture through Admin
ohbarye
32
14k
サブスクリプションサービスをつくる時にエンジニアが考えること / Behind the Scenes: Engineering a Subscription Service
ohbarye
15
17k
RuboCop Custom Formatter for Reviewdog Diagnostic Format
ohbarye
2
1.6k
DB外の副作用をトランザクションから分離しよう / Isolate out-of-DB side effects from transactions
ohbarye
7
3.8k
Balance Security and Usability in the Field of 3D Secure
ohbarye
5
3.2k
Safe Retry with Idempotency-Key Header
ohbarye
5
3.6k
Migration from React Native to PWA
ohbarye
1
6k
Other Decks in Technology
See All in Technology
バッチ処理のSLOをどう設計するか
rynsuke
7
550
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
200
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
450
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
1.9k
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
250
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
370
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
OpenTelemetry実践 はじめの一歩
taxin
0
300
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Done Done
chrislema
178
15k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
What's in a price? How to price your products and services
michaelherold
236
11k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Why Our Code Smells
bkeepers
PRO
330
56k
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