「ゆるWeb勉強会@札幌 OnLine #9」での登壇資料です． https://mild-web-sap.connpass.com/event/192074/
Jest + Puppeteer によるE2Eテストで確認作業を短縮してみた okabeeeat 2020.10.26 ゆるWeb勉強会@札幌 OnLine #9
View Slide
某ライフスタイルメディアで Rails や JavsScript を書いてます 札幌市出身(東京都在住) よく使っていたモーグルの技: スプレッドイーグル 好きなモーグルの技: フロントフリップ 岡部恭平 @okabeeeat Webアプリケーションエンジニア
Webマーケター レクタングル広告LR 表示ヨシ! レクタングル広告L レクタングル広告R 背景 トップページ(※イメージ) ● ネットワーク広告を日頃からチューニングしている ● 広告タグを変更後，広告の表示を目視で確認している
Webマーケター レクタングル広告L 背景 トップページ(※イメージ) ● 広告の種類や表示条件を変更したら都度確認する レクタングル広告LR 右レクタングル広告 表示ヨシ! new! 右レクタングル広告 レクタングル広告R
簡単じゃん
・・・・・
2, 3 個ぐらいならなっっ！
現実 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告
現実 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 連載ページ K広告 L広告 F広告 A,B広告 ヨシ! J広告 新着ページ
現実 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 連載ページ K広告 L広告 F広告 J広告 新着ページ C,D広告 ヨシ!
現実 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 連載ページ K広告 L広告 F広告 J広告 新着ページ E,F,G広告 ヨシ!
現実 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告 H,I広告 ヨシ!
現実 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告 J広告 ヨシ!
現実 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告 K,L広告 ヨシ!
現実 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告 K,L広告 ヨシ! 他の広告やページも結構ある!
特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告 お...終わった...
特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告 お...終わった... あ！スマホ版も確認必要だよ
特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告 え!?..あぁ...そうだった...
もう辛い... 特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告
特集ページ A広告 B広告 記事ページ C広告 D広告 カテゴリページ E広告 G広告 PRページ H広告 I広告 新着ページ J広告 連載ページ K広告 L広告 F広告 結局，確認作業で半日掛かることに..
この辛い確認作業から解放できないのか
自動化すれば良いじゃないか！！
E2Eテストとは ● End to End(端から端まで) Test の略 ● 基本的には人が操作をして確認をするが，E2Eテストを自動化するツールがある ○ RPAツールの裏側で動いていたりする ● E2Eテストを自動化するツールとして Selenium, Puppeteer,Cypress.io など沢山ある
E2Eテストを自動化する方法 ● RSpec + System Spec の導入 ○ minitest を使っているため断念 ● minitest + SystemTestCase の導入 ○ Rails のバージョンが5.0系のため断念 ● minitest + Capybara + selenium-webdriver の導入 ○ 今後のRailsのバージョンを上げた時に書き換えが必要になりそうと判断し，断念 ● Jest + Puppeteer を導入 ○ Ruby, Rails 側のアップデートの作業を切り離して導入できる ○ 前々から JS のテスティングフレームワークを入れたかった ○ Puppeteer で Headless Chrome を操作してみたかった
Jest + Puppeteer を導入するぞ
導入手順 ● Puppeteer の Dockerfile を作成 ○ 後日 GitHub に アップします ● E2Eテスト用のディレクトリを作成 ○ パッケージを追加 ■ jest, puppeteer, jest-puppeteer ■ dotenv もあると便利 ● ひらすらテストを書く
ディレクトリ構成
実装例
実行してみる
実行中 A,B広告...etc ヨシ!
実行完了
実行完了 確認作業を半日 → 約2分まで短縮!!!
その他良かったこと・わかったこと ● 他の手動確認のE2Eテストが書ける ● Jest を導入できた ○ 単体テストが書ける ● Puppeteer が結構使いやすい ● JSが書ける領域が増えた
今後の課題 ● メンテナンスコストとの向き合い方 ● もっとブラウザの気持ちになりなさい ● CI で実行するべきか ● リファクタリング ● コード化する手順の改善
まとめ ● Jest + Puppeteer で E2Eテストを導入した ● 確認作業を半日 → 約2分まで短縮した ● 課題もありつつも，速く・安全に質を保証する手段を得ることができた
ご清聴ありがとうございました
bake0937
usualoma
yuya4
shutooike
kin29
77web
mski_iksm
kentaroutakeda
smiyawaki0820
kanamasa
zoetrope
shgishzk
yusukebe
marcelosomers
holman
reverentgeek
lara
zakiwarfel
edds
ddemaree
mraible
chrislema
myddelton
addyosmani
scottboms