Jest + Puppeteer によるE2Eテストで確認作業を短縮してみた / End-to-end testing by Jest + Puppeteer shortened the confirmation work

「ゆるWeb勉強会@札幌 OnLine #9」での登壇資料です．
https://mild-web-sap.connpass.com/event/192074/

Transcript

1. Jest + Puppeteer によるE2Eテ ストで確認作業を短縮してみた
 okabeeeat 
 2020.10.26 ゆるWeb勉強会@札幌 OnLine #9

2. 某ライフスタイルメディアで Rails や JavsScript を書いてます
 札幌市出身(東京都在住)
 よく使っていたモーグルの技: スプレッドイーグル
 好きなモーグルの技: フロントフリップ
 岡部恭平 @okabeeeat
 Webアプリケーションエンジニア

3. Webマーケター
 レクタングル広告LR 表示ヨシ!
 レクタングル広告L
 レクタングル広告R
 背景
 トップページ(※イメージ)
 • ネットワーク広告を日頃からチューニングしている
 • 広告タグを変更後，広告の表示を目視で確認している

4. Webマーケター
 レクタングル広告L
 背景
 トップページ(※イメージ)
 • 広告の種類や表示条件を変更したら都度確認する
 レクタングル広告LR 
 右レクタングル広告 表示ヨシ! 
 new! 右レクタングル広告
 レクタングル広告R

5. 簡単じゃん

6. ・・・・・

7. 2, 3 個ぐらいならなっっ！

8. 現実
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告

9. 現実
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 連載ページ
 K広告
 L広告
 F広告
 A,B広告 ヨシ!
 J広告
 新着ページ

10. 現実
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 連載ページ
 K広告
 L広告
 F広告
 J広告
 新着ページ
 C,D広告 ヨシ!

11. 現実
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 連載ページ
 K広告
 L広告
 F広告
 J広告
 新着ページ
 E,F,G広告 ヨシ!

12. 現実
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告
 H,I広告 ヨシ!

13. 現実
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告
 J広告 ヨシ!

14. 現実
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告
 K,L広告 ヨシ!

15. 現実
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告
 K,L広告 ヨシ!
 他の広告やページも結構ある!

16. 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告
 お...終わった...

17. 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告
 お...終わった...
 あ！スマホ版も確認必要だよ 

18. 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告
 え!?..あぁ...そうだった... 

19. もう辛い...
 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告

20. 特集ページ
 A広告
 B広告
 記事ページ
 C広告
 D広告
 カテゴリページ
 E広告
 G広告
 PRページ
 H広告
 I広告
 新着ページ
 J広告
 連載ページ
 K広告
 L広告
 F広告
 結局，確認作業で半日掛かることに..

21. この辛い確認作業から解放できないのか

23. 自動化すれば良いじゃないか！！

24. E2Eテストとは
 • End to End(端から端まで) Test の略
 
 • 基本的には人が操作をして確認をするが，E2Eテストを自動化 するツールがある
 ◦ RPAツールの裏側で動いていたりする
 
 • E2Eテストを自動化するツールとして Selenium, Puppeteer, Cypress.io など沢山ある

25. E2Eテストを自動化する方法
 • RSpec + System Spec の導入
 ◦ minitest を使っているため断念 
 • minitest + SystemTestCase の導入
 ◦ Rails のバージョンが5.0系のため断念 
 • minitest + Capybara + selenium-webdriver の導入
 ◦ 今後のRailsのバージョンを上げた時に書き換えが必要になりそうと判 断し，断念 
 • Jest + Puppeteer を導入
 ◦ Ruby, Rails 側のアップデートの作業を切り離して導入できる
 ◦ 前々から JS のテスティングフレームワークを入れたかった
 ◦ Puppeteer で Headless Chrome を操作してみたかった

26. Jest + Puppeteer を導入するぞ

27. 導入手順
 • Puppeteer の Dockerfile を作成
 ◦ 後日 GitHub に アップします 
 • E2Eテスト用のディレクトリを作成
 ◦ パッケージを追加
 ▪ jest, puppeteer, jest-puppeteer
 ▪ dotenv もあると便利
 • ひらすらテストを書く

28. ディレクトリ構成

29. 実装例

30. 実行してみる

31. 実行中
 A,B広告...etc ヨシ!

32. 実行完了

33. 実行完了
 確認作業を半日 → 約2分まで短縮!!!

34. その他良かったこと・わかったこと
 • 他の手動確認のE2Eテストが書ける
 • Jest を導入できた
 ◦ 単体テストが書ける
 • Puppeteer が結構使いやすい
 • JSが書ける領域が増えた

35. 今後の課題
 • メンテナンスコストとの向き合い方
 • もっとブラウザの気持ちになりなさい
 • CI で実行するべきか
 • リファクタリング
 • コード化する手順の改善

36. まとめ
 • Jest + Puppeteer で E2Eテストを導入した
 • 確認作業を半日 → 約2分まで短縮した
 • 課題もありつつも，速く・安全に質を保証 する手段を得ることができた

37. ご清聴ありがとうございました