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
640
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
0
370
CircleCI の有料プランを導入するためにやったこと/What I did to introduce CircleCI's paid plan
bake0937
0
1.4k
FlutterアプリのiOSビルドとアーカイブを CircleCI で自動化してみた / Tried automating the iOS build and archive of the Flutter app with CircleCI
bake0937
0
1.1k
Probot で学ぶ TypeScript / Learn with Probot TypeScript
bake0937
0
160
Amazon ECR を利用していたと思ったら、Docker Hub を利用し続けていた / If I thought I was using Amazon ECR, I continued to use Docker Hub
bake0937
0
890
所属企業の Advent Calendar を初めて作った時に学んだこと / What I learned when I first created my company's Advent Calendar
bake0937
1
790
Notion 📚 へ移行して 3ヶ月経った振り返り / Looking back at Notion after 3 months
bake0937
0
5.8k
Bot開発でRubyを学ぶ / Learn Ruby with Bot Development
bake0937
0
410
小さく始めるOSS活動
bake0937
0
100
Other Decks in Programming
See All in Programming
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
140
Ça bouge du côté des animations CSS !
goetter
2
130
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
490
GAEログのコスト削減
mot_techtalk
0
120
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
100
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
250
技術を改善し続ける
gumioji
0
100
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
280
Introduction to kotlinx.rpc
arawn
0
750
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Become a Pro
speakerdeck
PRO
26
5.2k
A Philosophy of Restraint
colly
203
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Facilitating Awesome Meetings
lara
52
6.2k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
4 Signs Your Business is Dying
shpigford
182
22k
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分まで短縮した • 課題もありつつも,速く・安全に質を保証 する手段を得ることができた
ご清聴ありがとうございました