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.5k
JavaScriptのE2Eフレームワークを触ってみる
E2Eフレームワークを触って、特徴を紹介する
riririusei99
January 24, 2018
Tweet
Share
More Decks by riririusei99
See All by riririusei99
JaSST Tokyo'21
riririusei99
0
970
テスコンU30 発表資料
riririusei99
0
1.3k
AutifyMeetUp-2nd
riririusei99
0
2.5k
マトリクス組織におけるリーダシップとは
riririusei99
0
54
JaSSTRejectConf
riririusei99
0
2.3k
JaSST'19 Hokkadio
riririusei99
0
2.3k
QuALiTy
riririusei99
1
610
Automation;Test
riririusei99
0
130
AgileQANight
riririusei99
0
3k
Other Decks in Programming
See All in Programming
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100
初めてDefinitelyTypedにPRを出した話
syumai
0
400
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Arm移行タイムアタック
qnighy
0
310
Realtime API 入門
riofujimon
0
150
Outline View in SwiftUI
1024jp
1
320
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
310
Amazon Qを使ってIaCを触ろう!
maruto
0
400
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
170
Jakarta EE meets AI
ivargrimstad
0
520
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
250
Featured
See All Featured
Happy Clients
brianwarren
98
6.7k
BBQ
matthewcrist
85
9.3k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Facilitating Awesome Meetings
lara
50
6.1k
Docker and Python
trallard
40
3.1k
Building Your Own Lightsaber
phodgson
103
6.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
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