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.1k
テスコンU30 発表資料
riririusei99
0
1.4k
AutifyMeetUp-2nd
riririusei99
0
2.7k
マトリクス組織におけるリーダシップとは
riririusei99
0
80
JaSSTRejectConf
riririusei99
0
2.4k
JaSST'19 Hokkadio
riririusei99
0
2.4k
QuALiTy
riririusei99
1
660
Automation;Test
riririusei99
0
160
AgileQANight
riririusei99
0
3k
Other Decks in Programming
See All in Programming
GoのGenericsによるslice操作との付き合い方
syumai
3
690
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Is Xcode slowly dying out in 2025?
uetyo
1
210
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
140
童醫院敏捷轉型的實踐經驗
cclai999
0
200
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.6k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
560
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
PicoRuby on Rails
makicamel
2
110
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
5つのアンチパターンから学ぶLT設計
narihara
1
120
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
340
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
380
RailsConf 2023
tenderlove
30
1.1k
Done Done
chrislema
184
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Designing Experiences People Love
moore
142
24k
Producing Creativity
orderedlist
PRO
346
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How GitHub (no longer) Works
holman
314
140k
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