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
670
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
410
CircleCI の有料プランを導入するためにやったこと/What I did to introduce CircleCI's paid plan
bake0937
0
1.6k
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
180
Amazon ECR を利用していたと思ったら、Docker Hub を利用し続けていた / If I thought I was using Amazon ECR, I continued to use Docker Hub
bake0937
0
960
所属企業の Advent Calendar を初めて作った時に学んだこと / What I learned when I first created my company's Advent Calendar
bake0937
1
820
Notion 📚 へ移行して 3ヶ月経った振り返り / Looking back at Notion after 3 months
bake0937
0
5.9k
Bot開発でRubyを学ぶ / Learn Ruby with Bot Development
bake0937
0
450
小さく始めるOSS活動
bake0937
0
120
Other Decks in Programming
See All in Programming
令和最新版手のひらコンピュータ
koba789
14
7.9k
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
180
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
660
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
140
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
120
Constant integer division faster than compiler-generated code
herumi
2
670
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
140
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
570
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
870
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
720
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Done Done
chrislema
185
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Making Projects Easy
brettharned
117
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Agile that works and the tools we love
rasmusluckow
329
21k
Rails Girls Zürich Keynote
gr2m
95
14k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Designing for Performance
lara
610
69k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
470
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分まで短縮した • 課題もありつつも,速く・安全に質を保証 する手段を得ることができた
ご清聴ありがとうございました