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
420
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
190
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
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
はじめてのMaterial3 Expressive
ym223
2
290
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
1から理解するWeb Push
dora1998
7
1.9k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
260
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Thoughts on Productivity
jonyablonski
70
4.8k
Six Lessons from altMBA
skipperchong
28
4k
Designing for Performance
lara
610
69k
A designer walks into a library…
pauljervisheath
207
24k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Agile that works and the tools we love
rasmusluckow
330
21k
GitHub's CSS Performance
jonrohan
1032
460k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Into the Great Unknown - MozCon
thekraken
40
2k
The Language of Interfaces
destraynor
161
25k
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分まで短縮した • 課題もありつつも,速く・安全に質を保証 する手段を得ることができた
ご清聴ありがとうございました