2023-12-26 完全に理解した Talk #48

1. © Magic Moment 2023
© Magic Moment 2023
2023-12-26 / 完全に理解した Talk / @morishin
エンジニアの気持ちを完全に
理解してくれている Cypress Cloud
1

2. © Magic Moment 2023
話す
● テストって ダルいよね 大事だよね
● E2E テストが何故面倒か
● Cypress Cloud 良いよ
● 特に Test Replay が良いよ
● こんなワークフローを考えてみた
今日話すことと話さないこと
話さない
● QA とは
● E2E テストとは
● Cypress とは
● Cypress の tips
● 弊社の開発・QA スタイル

3. © Magic Moment 2023
morishin
(株) Magic Moment
営業組織が使う SaaS を開発・販売しているスタートアップ
ロール
フロントエンドエンジニア
趣味
フォートナイト、ボルダリング、イタリア料理、赤ワイン
おまえだれよ

4. © Magic Moment 2023
morishin
(株) Magic Moment
営業組織が使う SaaS を開発・販売しているスタートアップ
ロール
フロントエンドエンジニア
趣味
フォートナイト、ボルダリング、イタリア料理、赤ワイン
おまえだれよ
設計
実装
テスト
リリース
不具合調査・修正

5. © Magic Moment 2023
morishin
(株) Magic Moment
営業組織が使う SaaS を開発・販売しているスタートアップ
ロール
フロントエンドエンジニア
趣味
フォートナイト、ボルダリング、イタリア料理、赤ワイン
おまえだれよ
設計
実装
テスト
リリース
不具合調査・修正
単体テスト (UT)
結合テスト (IT)
E2E テスト
etc.

6. © Magic Moment 2023
morishin
(株) Magic Moment
営業組織が使う SaaS を開発・販売しているスタートアップ
ロール
フロントエンドエンジニア
趣味
フォートナイト、ボルダリング、イタリア料理、赤ワイン
おまえだれよ
設計
実装
テスト
リリース
不具合調査・修正
単体テスト (UT)
結合テスト (IT)
E2E テスト
etc.

7. © Magic Moment 2023
Testing Pyramid
The Testing Pyramid: Simplified for One and All
https://www.headspin.io/blog/the-testing-pyramid-simplified-for-one-and-all

8. © Magic Moment 2023
Testing Pyramid
E2E テストはコストが高い → テスト量は少なくする
The Testing Pyramid: Simplified for One and All
https://www.headspin.io/blog/the-testing-pyramid-simplified-for-one-and-all

9. © Magic Moment 2023
Testing Trophy
The Testing Trophy and Testing Classifications
https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications

10. © Magic Moment 2023
Testing Trophy
E2E テストは信頼度が高いがコストも高い → テスト量は少な (ry
The Testing Trophy and Testing Classifications
https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications

11. © Magic Moment 2023
要するに
E2E テストは少量、大事、面倒

12. © Magic Moment 2023
要するに
E2E テストは少量、大事、面倒
● テストを書くのが難しい
● テストが Flaky になりやすい
● テストが壊れやすい (陳腐化しやすい)
● 失敗したときに原因を特定しづらい

13. © Magic Moment 2023
要するに
E2E テストは少量、大事、面倒
● テストを書くのが難しい
● テストが Flaky になりやすい
● テストが壊れやすい (陳腐化しやすい)
● 失敗したときに原因を特定しづらい

14. © Magic Moment 2023
テストが失敗しているけどすぐに原因が分からない
↓
いったん無視してリリースしてしまおう
(開発状況がカツカツだから、 E2E テストって Flaky だから、etc.)
↓
リリース後も慢性的に Failed が出続ける
↓
対応されないまま放置 (エラー通知の常態化)
↓
プロダクト品質の低下、品質意識の低下、大障害
失敗の原因を特定しづらいと

15. © Magic Moment 2023
そこでコレですよ
cloud
Cypress で書かれた E2E テストを実行したり、結果を見たり、分析
したりできる、無料で使えるダッシュボードサービス
※案件じゃないです

16. © Magic Moment 2023
始め方
1. https://www.cypress.io/cloud?v=2 にアクセスしてサインナップする
2. Project settings にある Record Keys をコピーする
3. Cypress を実行する環境 (自分の PC とか) の環境変数にセットする
4. オプションつきで Cypress を実行する
詳しくはドキュメントを見て下さい → https://docs.cypress.io/guides/cloud/getting-started
export CYPRESS_RECORD_KEY=<record key>
npx cyprss run --record

17. © Magic Moment 2023
始め方
1. https://www.cypress.io/cloud?v=2 にアクセスしてサインナップする
2. Project settings にある Record Keys をコピーする
3. Cypress を実行する環境 (自分の PC とか) の環境変数にセットする
4. オプションつきで Cypress を実行する
詳しくはドキュメントを見て下さい → https://docs.cypress.io/guides/cloud/getting-started
export CYPRESS_RECORD_KEY=<record key>
npx cyprss run --record
Cypress の実行結果が Cypress Cloud に貯まるようになる

18. © Magic Moment 2023
ここが凄いよ Cyprss Cloud

19. © Magic Moment 2023
ここが凄いよ Cyprss Cloud

20. © Magic Moment 2023
ここが凄いよ Cyprss Cloud
Test Replay

21. © Magic Moment 2023 21

22. © Magic Moment 2023 22
テストが失敗したときの様子を動画で観れる

23. © Magic Moment 2023 23
直観的で、テストの失敗原因を究明しやすい

24. © Magic Moment 2023 24
Cypress Cloud を活用した開発 & QA ワークフロー
ポイント
● Cypress Cloud 上の Test Replay 機能で
直観的にテスト失敗の原因分析ができる
● Cypress Cloud 上でテストの再実行ができる
● ローカルマシンの Cypress 実行結果を
Cypress Cloud 上で確認できる
開発と QA を分離できる (ある程度)
非エンジニアでも QA ができる (ある程度)

25. © Magic Moment 2023
みんなも使おう
cloud
※案件じゃないです

26. © Magic Moment 2023 26
WE ARE HIRING

27. © Magic Moment 2023
THANK YOU
© Magic Moment 2023 27