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
JavaScriptのE2Eフレームワークを触ってみる
Search
riririusei99
January 24, 2018
Programming
2
5.6k
JavaScriptのE2Eフレームワークを触ってみる
E2Eフレームワークを触って、特徴を紹介する
riririusei99
January 24, 2018
Tweet
Share
More Decks by riririusei99
See All by riririusei99
JaSST Tokyo'21
riririusei99
0
1.2k
テスコンU30 発表資料
riririusei99
0
1.5k
AutifyMeetUp-2nd
riririusei99
0
2.7k
マトリクス組織におけるリーダシップとは
riririusei99
0
84
JaSSTRejectConf
riririusei99
0
2.5k
JaSST'19 Hokkadio
riririusei99
0
2.5k
QuALiTy
riririusei99
1
680
Automation;Test
riririusei99
0
170
AgileQANight
riririusei99
0
3.1k
Other Decks in Programming
See All in Programming
MLH State of the League: 2026 Season
theycallmeswift
0
210
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
540
TDD 実践ミニトーク
contour_gara
1
280
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
1
860
RDoc meets YARD
okuramasafumi
4
160
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
300
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
410
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Typedesign – Prime Four
hannesfritz
42
2.8k
Producing Creativity
orderedlist
PRO
347
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Automating Front-end Workflow
addyosmani
1370
200k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
It's Worth the Effort
3n
187
28k
Docker and Python
trallard
45
3.5k
Six Lessons from altMBA
skipperchong
28
4k
Faster Mobile Websites
deanohume
309
31k
Transcript
JavaScriptの E2Eフレームワークを 触ってみる R I R I R I U
S E I 9 9
⾃⼰紹介 riririusei99 チームスピリット QAエンジニア/Scrum Master futsal・CTF・1⼈映画 Jリーグ観戦(⼤宮アルディージャ)
今⽇のテーマは ⾃動テスト(E2E) の紹介です
Javascriptを愛して やまないエンジニアの 皆様に向けて
あなたに合ったE2Eが きっと⾒つかる!! …といいな
JavaScript × E2E Testing R I R I R I
U S E I 9 9
今回のおしながき ・Protractor ・cinnamonjs ・Cypress ・Nightmare.js ・TestCafe ルール 動くとこまで確認して、 それぞれの特徴を紹介する
Protractor 名 家 ⽣ ま れ の E 2 E
フ レ ー ム ワ ー ク
Protractor URL: http://www.protractortest.org/#/ Github Star: 7242 (2018/1/22時点) 特徴: • Angular.js
向けE2Eフレームワーク(それ以外も使える) • Selenium Webdriverが動く • 拡張性が⾼い – ドライバを切り替えてブラウザを切り替えられる – テストフレームワーク&アサーションライブラリなど
TEST CODE
TestCafe a s y n c / a w a
i t を バ リ バ リ 使 い た い あ な た に
TestCafe URL: https://devexpress.github.io/testcafe/ Github Star: 3883 (2018/1/22時点) 特徴: • Selenium
を使わず動く • 設定ファイルなしで動く • 導⼊が簡単 • TypeScript, モダンなJS(async/await)を使って書ける
TEST CODE
Nightmare 名 は 体 を 表 す
Nightmare URL: https://github.com/segmentio/nightmare Github Star: 14640 (2018/1/22時点) 特徴: • 名前がカッコイイ
• Electronベースで動く • Seleniumを使わずに動く • ブラウザ⾃動ツール向け • 名前がカッコイイ(2回⽬)
TEST CODE
Cypress 最 近 噂 の E 2 E フ レ
ー ム ワ ー ク
Cypress URL: https://www.cypress.io/ Github Star: 3459(2018/1/22時点) 特徴: • 導⼊が⾮常に簡単 •
CLIでも動く • レポーティングにテンションが上がる • 修正を検知して⾃動でテストが⾛る • 今のところChromeで動く
TEST CODE
cinnamonjs 違 い を ⾒ せ た い ⼈ 、
独 ⾃ 路 線 を 好 む ⼈
cinnamonjs URL: https://github.com/ralphv/cinnamonjs Github Star: 1(2018/1/22時点) 特徴: • データ駆動型テスト(DDT)を意識したフレームワーク •
独⾃のレポーティング機能を備えている • Json形式でテストを書く • Seleniumを使ってブラウザ操作する
TEST CODE
CONCLUSIONS R I R I R I U S E
I 9 9
E2E選定は置かれた環境による 検討事項 • クロスブラウザテストの実施するか • CIに載せたリグレッションテストを⾏うか • テストコードの書きやすさ • 導⼊のしやすさ
• レポーティング結果の確認のしやすさ • 証跡の残し⽅(スクリーンショット、動画)
⾃分が使うなら 既存テストとフロントエンド での役割分担を⽬指す
役割分担 • クロスブラウザテスト • データ⼊出⼒など • CI環境向け⽤ • デモ⼿順の⾃動化 •
シナリオテスト • ローカルでの確認⽤
まとめ R I R I R I U S E
I 9 9
偉い⼈は⾔いました “ゆうめいな E2E そうでない E2E そんなの ひとの かって ほんとうに つよい
QAエンジニアなら すきな E2E でかてるように がんばるべき”
THANKS A LOT! R I R I R I U
S E I 9 9