Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Let's Get Started Integration Testing With Cypress
Masato Ohba
September 30, 2019
Technology
0
67
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
Safe Retry with Idempotency-Key Header
ohbarye
5
1.6k
Migration from React Native to PWA
ohbarye
1
5.3k
#RSGT2019 プロダクトの「負債」を「機能」と呼び直すために / Proof of value with AB testing
ohbarye
0
8k
貢献できるOSSの見つけ方 -完結編- / How to find "Good First Issues" Final
ohbarye
8
5.6k
決済のトランザクション管理術 / How to Manage Payment Transaction
ohbarye
3
6k
サブスクリプションサービスにおけるIn-App Purchase再考 / Rethink In-App Purchase on subscription services
ohbarye
7
6.3k
続・貢献できるOSSの見つけ方 / How to find "Good First Issues" part 2
ohbarye
5
2.3k
Quipperが実践する 定量データに基づく意思決定と開発 / Fact-based decision making and development by Quipper
ohbarye
6
3.4k
ドエレー"COOOL"な絵を描くじゃん / Drawing with Ruby on Browser
ohbarye
1
400
Other Decks in Technology
See All in Technology
20220705-BASEDMM
ryotaumebayashi
0
110
紙にまつわる苦しみを機能化してきた カミナシの歴史
kaminashi
0
1.4k
ZephyrRTOSのLongan Nanoへの移植
tokitahiroshi
0
110
今どきのLinux事情
tokida
45
36k
【個人的】オブジェクト指向の現在地
toranoana
0
200
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
950
Strategyパターン
hankehly
0
170
約6年間運用したシステムをKubernetesに完全移行するまで/Kubernetes Novice Tokyo
isaoshimizu
6
970
Inside out - abusing archive file formats
ange
3
600
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
9.2k
AWS Cognito で開発環境を守る
mixi_engineers
PRO
0
110
フィンテック養成勉強会#23
finengine
0
190
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Support Driven Design
roundedbygravity
86
8.5k
Building an army of robots
kneath
299
40k
KATA
mclloyd
7
8.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Designing for humans not robots
tammielis
241
23k
Code Review Best Practice
trishagee
43
9.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.5k
Navigating Team Friction
lara
175
11k
The Cult of Friendly URLs
andyhume
68
4.8k
Atom: Resistance is Futile
akmur
255
20k
Robots, Beer and Maslow
schacon
152
7.1k
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