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
430
Data Migration on Rails
ohbarye
8
8.6k
Unlocking Potential of Property Based Testing with Ractor
ohbarye
3
15k
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
870
My Favorite Protocol: Idempotency-Key Header
ohbarye
7
6.3k
エンジニア9名でプロポーザル提出8件, 採択3件を支える技術と文化 / Proposal Fight Culture
ohbarye
4
6.5k
管理機能アーキテクチャパターンの考察と実践 / 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
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
180
まだチケットを手動で書いてるの?!GitHub Actionsと生成AIでチケットの作成を自動化してみた話 / 20241207 Yoshinori Katayama
shift_evolve
1
820
pmconf2024_UPSIDER
upsider_tech
0
8k
KubeCon NA 2024 Recap: Managing and Distributing AI Models Using OCI Standards and Harbor / Kubernetes Meetup Tokyo #68
pfn
PRO
0
140
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
130
2024/12/05 AITuber本著者によるAIキャラクター入門 - AITuberの基礎からソフトウェア設計、失敗談まで
sr2mg4
2
590
実務につなげる数理最適化
recruitengineers
PRO
4
440
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
130
Amazon Bedrock Multi-Agent Collaboration Workshop の紹介 - ワークショップでAIエージェントを学ぼう
nasuvitz
4
370
目玉アップデート!のSageMaker LakehouseとUnified Studioは何たるかを見てみよう!
nayuts
0
140
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
200
2000年てづくりキーボードの旅
tagomoris
1
170
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Why Our Code Smells
bkeepers
PRO
335
57k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Adaptive Systems
keathley
38
2.3k
Thoughts on Productivity
jonyablonski
67
4.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Bash Introduction
62gerente
608
210k
Speed Design
sergeychernyshev
25
650
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
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