Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jest + Puppeteer によるE2Eテストで確認作業を短縮してみた / End-t...
Search
bake0937
October 26, 2020
Programming
0
660
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/
bake0937
October 26, 2020
Tweet
Share
More Decks by bake0937
See All by bake0937
GASを使って非エンジニアが AWS Step Functions を 操作できる仕組みの紹介 / Introducing how non-engineers can operate AWS Step Functions using GAS
bake0937
1
400
CircleCI の有料プランを導入するためにやったこと/What I did to introduce CircleCI's paid plan
bake0937
0
1.5k
FlutterアプリのiOSビルドとアーカイブを CircleCI で自動化してみた / Tried automating the iOS build and archive of the Flutter app with CircleCI
bake0937
0
1.2k
Probot で学ぶ TypeScript / Learn with Probot TypeScript
bake0937
0
170
Amazon ECR を利用していたと思ったら、Docker Hub を利用し続けていた / If I thought I was using Amazon ECR, I continued to use Docker Hub
bake0937
0
940
所属企業の Advent Calendar を初めて作った時に学んだこと / What I learned when I first created my company's Advent Calendar
bake0937
1
810
Notion 📚 へ移行して 3ヶ月経った振り返り / Looking back at Notion after 3 months
bake0937
0
5.9k
Bot開発でRubyを学ぶ / Learn Ruby with Bot Development
bake0937
0
440
小さく始めるOSS活動
bake0937
0
120
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
850
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
120
AIともっと楽するE2Eテスト
myohei
7
2.7k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PicoRuby on Rails
makicamel
2
130
Goで作る、開発・CI環境
sin392
0
240
効率的な開発手段として VRTを活用する
ishkawa
0
140
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
Discover Metal 4
rei315
2
140
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Music & Morning Musume
bryan
46
6.6k
Unsuck your backbone
ammeep
671
58k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How to Ace a Technical Interview
jacobian
278
23k
Transcript
Jest + Puppeteer によるE2Eテ ストで確認作業を短縮してみた okabeeeat 2020.10.26 ゆるWeb勉強会@札幌 OnLine
#9
某ライフスタイルメディアで 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広告 結局,確認作業で半日掛かることに..
この辛い確認作業から解放できないのか
None
自動化すれば良いじゃないか!!
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分まで短縮した • 課題もありつつも,速く・安全に質を保証 する手段を得ることができた
ご清聴ありがとうございました