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.4k
JavaScriptのE2Eフレームワークを触ってみる
E2Eフレームワークを触って、特徴を紹介する
riririusei99
January 24, 2018
Tweet
Share
More Decks by riririusei99
See All by riririusei99
JaSST Tokyo'21
riririusei99
0
840
テスコンU30 発表資料
riririusei99
0
1.1k
AutifyMeetUp-2nd
riririusei99
0
2.3k
マトリクス組織におけるリーダシップとは
riririusei99
0
37
JaSSTRejectConf
riririusei99
0
2.1k
JaSST'19 Hokkadio
riririusei99
0
2.2k
QuALiTy
riririusei99
1
590
Automation;Test
riririusei99
0
110
AgileQANight
riririusei99
0
2.9k
Other Decks in Programming
See All in Programming
puregoの活用例
aethiopicuschan
0
220
Elm 0.19.0 Changes
bkuhlmann
0
480
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
780
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
受託開発でGitLab CI を活用していく
xiombatsg
1
270
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
ONE WEDGE_company_guide
1wedge_one
0
380
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.6k
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
72
5.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
It's Worth the Effort
3n
180
27k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Why Our Code Smells
bkeepers
PRO
331
56k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Code Review Best Practice
trishagee
54
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
The Invisible Customer
myddelton
114
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Writing Fast Ruby
sferik
620
60k
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