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-to-end testing by Jest + Puppeteer shortened the confirmation work
Search
bake0937
October 26, 2020
Programming
0
550
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
250
CircleCI の有料プランを導入するためにやったこと/What I did to introduce CircleCI's paid plan
bake0937
0
1.1k
FlutterアプリのiOSビルドとアーカイブを CircleCI で自動化してみた / Tried automating the iOS build and archive of the Flutter app with CircleCI
bake0937
0
970
Probot で学ぶ TypeScript / Learn with Probot TypeScript
bake0937
0
110
Amazon ECR を利用していたと思ったら、Docker Hub を利用し続けていた / If I thought I was using Amazon ECR, I continued to use Docker Hub
bake0937
0
740
所属企業の Advent Calendar を初めて作った時に学んだこと / What I learned when I first created my company's Advent Calendar
bake0937
1
690
Notion 📚 へ移行して 3ヶ月経った振り返り / Looking back at Notion after 3 months
bake0937
0
5.6k
Bot開発でRubyを学ぶ / Learn Ruby with Bot Development
bake0937
0
380
小さく始めるOSS活動
bake0937
0
85
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
130
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.7k
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
Java 22 Overview
kishida
1
170
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
180
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
YesSQL, Process and Tooling at Scale
rocio
163
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Building Applications with DynamoDB
mza
88
5.6k
Teambox: Starting and Learning
jrom
128
8.4k
Automating Front-end Workflow
addyosmani
1355
200k
How GitHub (no longer) Works
holman
304
140k
How STYLIGHT went responsive
nonsquared
92
4.8k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Design by the Numbers
sachag
274
18k
Designing for Performance
lara
601
67k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
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分まで短縮した • 課題もありつつも,速く・安全に質を保証 する手段を得ることができた
ご清聴ありがとうございました