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
150
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
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
5
440
Data Migration on Rails
ohbarye
8
8.8k
Unlocking Potential of Property Based Testing with Ractor
ohbarye
3
15k
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
880
My Favorite Protocol: Idempotency-Key Header
ohbarye
7
6.3k
エンジニア9名でプロポーザル提出8件, 採択3件を支える技術と文化 / Proposal Fight Culture
ohbarye
4
6.6k
管理機能アーキテクチャパターンの考察と実践 / Learn Architecture through Admin
ohbarye
33
18k
サブスクリプションサービスをつくる時にエンジニアが考えること / Behind the Scenes: Engineering a Subscription Service
ohbarye
15
18k
RuboCop Custom Formatter for Reviewdog Diagnostic Format
ohbarye
2
2.4k
Other Decks in Technology
See All in Technology
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
16
13k
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
200
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
17
4.5k
Wantedly での Datadog 活用事例
bgpat
1
500
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
470
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
37
14k
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
130
5分でわかるDuckDB
chanyou0311
10
3.2k
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
820
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Six Lessons from altMBA
skipperchong
27
3.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Side Projects
sachag
452
42k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
A designer walks into a library…
pauljervisheath
204
24k
Adopting Sorbet at Scale
ufuk
73
9.1k
Writing Fast Ruby
sferik
628
61k
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