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

   

   View Slide

2. 某ライフスタイルメディアで Rails や JavsScript を書いてます

   札幌市出身(東京都在住)

   よく使っていたモーグルの技: スプレッドイーグル

   好きなモーグルの技: フロントフリップ

   岡部恭平 @okabeeeat

   Webアプリケーションエンジニア

   

   View Slide

3. Webマーケター

   レクタングル広告LR 表示ヨシ!

   レクタングル広告L

   レクタングル広告R

   背景

   トップページ(※イメージ)

   ● ネットワーク広告を日頃からチューニングしている

   ● 広告タグを変更後，広告の表示を目視で確認している

   

   View Slide

4. Webマーケター

   レクタングル広告L

   背景

   トップページ(※イメージ)

   ● 広告の種類や表示条件を変更したら都度確認する

   レクタングル広告LR 

   右レクタングル広告 表示ヨシ! 

   new! 右レクタングル広告

   レクタングル広告R

   

   View Slide

5. 簡単じゃん

   

   View Slide

6. ・・・・・

   

   View Slide

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

   

   View Slide

8. 現実

   特集ページ

   A広告

   B広告
 記事ページ

   C広告

   D広告
 カテゴリページ

   E広告

   G広告

   PRページ

   H広告

   I広告
 新着ページ

   J広告
 連載ページ

   K広告

   L広告

   F広告

   

   View Slide

9. 現実

   特集ページ

   A広告

   B広告
 記事ページ

   C広告

   D広告
 カテゴリページ

   E広告

   G広告

   PRページ

   H広告

   I広告
 連載ページ

   K広告

   L広告

   F広告

   A,B広告 ヨシ!

   J広告
 新着ページ

   

   View Slide

10. 現実

    特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 連載ページ

    K広告

    L広告

    F広告

    J広告
 新着ページ

    C,D広告 ヨシ!

    

    View Slide

11. 現実

    特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 連載ページ

    K広告

    L広告

    F広告

    J広告
 新着ページ

    E,F,G広告 ヨシ!

    

    View Slide

12. 現実

    特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    H,I広告 ヨシ!

    

    View Slide

13. 現実

    特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    J広告 ヨシ!

    

    View Slide

14. 現実

    特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    K,L広告 ヨシ!

    

    View Slide

15. 現実

    特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    K,L広告 ヨシ!

    他の広告やページも結構ある!

    

    View Slide

16. 特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    お...終わった...

    

    View Slide

17. 特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    お...終わった...
 あ！スマホ版も確認必要だよ 

    

    View Slide

18. 特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    え!?..あぁ...そうだった... 

    

    View Slide

19. もう辛い...

    特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    

    View Slide

20. 特集ページ

    A広告

    B広告
 記事ページ

    C広告

    D広告
 カテゴリページ

    E広告

    G広告

    PRページ

    H広告

    I広告
 新着ページ

    J広告
 連載ページ

    K広告

    L広告

    F広告

    結局，確認作業で半日掛かることに..

    

    View Slide

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

    

    View Slide

22. View Slide

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

    

    View Slide

24. E2Eテストとは

    ● End to End(端から端まで) Test の略

    

    ● 基本的には人が操作をして確認をするが，E2Eテストを自動化
    するツールがある

    ○ RPAツールの裏側で動いていたりする

    

    ● E2Eテストを自動化するツールとして Selenium, Puppeteer,
    Cypress.io など沢山ある

    

    View Slide

25. E2Eテストを自動化する方法

    ● RSpec + System Spec の導入

    ○ minitest を使っているため断念 

    ● minitest + SystemTestCase の導入

    ○ Rails のバージョンが5.0系のため断念 

    ● minitest + Capybara + selenium-webdriver の導入

    ○ 今後のRailsのバージョンを上げた時に書き換えが必要になりそうと判
    断し，断念 

    ● Jest + Puppeteer を導入

    ○ Ruby, Rails 側のアップデートの作業を切り離して導入できる

    ○ 前々から JS のテスティングフレームワークを入れたかった

    ○ Puppeteer で Headless Chrome を操作してみたかった

    

    View Slide

26. Jest + Puppeteer を導入するぞ

    

    View Slide

27. 導入手順

    ● Puppeteer の Dockerfile を作成

    ○ 後日 GitHub に アップします 

    ● E2Eテスト用のディレクトリを作成

    ○ パッケージを追加

    ■ jest, puppeteer, jest-puppeteer

    ■ dotenv もあると便利

    ● ひらすらテストを書く

    

    View Slide

28. ディレクトリ構成

    

    View Slide

29. 実装例

    

    View Slide

30. 実行してみる

    

    View Slide

31. 実行中

    A,B広告...etc ヨシ!

    

    View Slide

32. 実行完了

    

    View Slide

33. 実行完了

    確認作業を半日 → 約2分まで短縮!!!

    

    View Slide

34. その他良かったこと・わかったこと

    ● 他の手動確認のE2Eテストが書ける

    ● Jest を導入できた

    ○ 単体テストが書ける

    ● Puppeteer が結構使いやすい

    ● JSが書ける領域が増えた

    

    View Slide

35. 今後の課題

    ● メンテナンスコストとの向き合い方

    ● もっとブラウザの気持ちになりなさい

    ● CI で実行するべきか

    ● リファクタリング

    ● コード化する手順の改善

    

    View Slide

36. まとめ

    ● Jest + Puppeteer で E2Eテストを導入した

    ● 確認作業を半日 → 約2分まで短縮した

    ● 課題もありつつも，速く・安全に質を保証
    する手段を得ることができた

    

    View Slide

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

    

    View Slide