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
81
JaSSTRejectConf
riririusei99
0
2.4k
JaSST'19 Hokkadio
riririusei99
0
2.5k
QuALiTy
riririusei99
1
670
Automation;Test
riririusei99
0
170
AgileQANight
riririusei99
0
3.1k
Other Decks in Programming
See All in Programming
型で語るカタ
irof
1
840
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
コーディングエージェント概観(2025/07)
itsuki_t88
0
430
What's new in AppKit on macOS 26
1024jp
0
170
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
460
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
220
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
830
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
700
階層化自動テストで開発に機動力を
ickx
1
420
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
160
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Music & Morning Musume
bryan
46
6.7k
Faster Mobile Websites
deanohume
308
31k
Balancing Empowerment & Direction
lara
1
500
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Speed Design
sergeychernyshev
32
1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Optimizing for Happiness
mojombo
379
70k
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