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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

簡単じゃん 

Slide 6

Slide 6 text

・・・・・ 

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Jest + Puppeteer を導入するぞ 

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ディレクトリ構成 

Slide 29

Slide 29 text

実装例 

Slide 30

Slide 30 text

実行してみる 

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

実行完了 

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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