JavaScriptのE2Eフレームワークを触ってみる

E2Eフレームワークを触って、特徴を紹介する

Transcript

1. JavaScriptの E2Eフレームワークを 触ってみる R I R I R I U S E I 9 9
2. ⾃⼰紹介 riririusei99 チームスピリット QAエンジニア/Scrum Master futsal・CTF・1⼈映画 Jリーグ観戦（⼤宮アルディージャ）
3. 今⽇のテーマは ⾃動テスト（E2E） の紹介です
4. Javascriptを愛して やまないエンジニアの 皆様に向けて
5. あなたに合ったE2Eが きっと⾒つかる！！ …といいな
6. JavaScript × E2E Testing R I R I R I U S E I 9 9
7. 今回のおしながき ・Protractor ・cinnamonjs ・Cypress ・Nightmare.js ・TestCafe ルール 動くとこまで確認して、 それぞれの特徴を紹介する
8. Protractor 名 家 ⽣ ま れ の E 2 E フ レ ー ム ワ ー ク
9. Protractor URL: http://www.protractortest.org/#/ Github Star: 7242 (2018/1/22時点) 特徴： • Angular.js 向けE2Eフレームワーク(それ以外も使える） • Selenium Webdriverが動く • 拡張性が⾼い – ドライバを切り替えてブラウザを切り替えられる – テストフレームワーク＆アサーションライブラリなど
10. TEST CODE
11. TestCafe a s y n c / a w a i t を バ リ バ リ 使 い た い あ な た に
12. TestCafe URL: https://devexpress.github.io/testcafe/ Github Star: 3883 (2018/1/22時点) 特徴： • Selenium を使わず動く • 設定ファイルなしで動く • 導⼊が簡単 • TypeScript, モダンなJS(async/await)を使って書ける
13. TEST CODE
14. Nightmare 名 は 体 を 表 す
15. Nightmare URL: https://github.com/segmentio/nightmare Github Star: 14640 (2018/1/22時点) 特徴： • 名前がカッコイイ • Electronベースで動く • Seleniumを使わずに動く • ブラウザ⾃動ツール向け • 名前がカッコイイ（2回⽬）
16. TEST CODE
17. Cypress 最 近 噂 の E 2 E フ レ ー ム ワ ー ク
18. Cypress URL: https://www.cypress.io/ Github Star: 3459(2018/1/22時点) 特徴： • 導⼊が⾮常に簡単 • CLIでも動く • レポーティングにテンションが上がる • 修正を検知して⾃動でテストが⾛る • 今のところChromeで動く
19. TEST CODE
20. cinnamonjs 違 い を ⾒ せ た い ⼈ 、 独 ⾃ 路 線 を 好 む ⼈
21. cinnamonjs URL: https://github.com/ralphv/cinnamonjs Github Star: １(2018/1/22時点) 特徴： • データ駆動型テスト（DDT）を意識したフレームワーク • 独⾃のレポーティング機能を備えている • Json形式でテストを書く • Seleniumを使ってブラウザ操作する
22. TEST CODE
23. CONCLUSIONS R I R I R I U S E I 9 9
24. E2E選定は置かれた環境による 検討事項 • クロスブラウザテストの実施するか • CIに載せたリグレッションテストを⾏うか • テストコードの書きやすさ • 導⼊のしやすさ • レポーティング結果の確認のしやすさ • 証跡の残し⽅（スクリーンショット、動画）
25. ⾃分が使うなら 既存テストとフロントエンド での役割分担を⽬指す
26. 役割分担 • クロスブラウザテスト • データ⼊出⼒など • CI環境向け⽤ • デモ⼿順の⾃動化 • シナリオテスト • ローカルでの確認⽤
27. まとめ R I R I R I U S E I 9 9
28. 偉い⼈は⾔いました “ゆうめいな E2E そうでない E2E そんなの ひとの かって ほんとうに つよい QAエンジニアなら すきな E2E でかてるように がんばるべき”
29. THANKS A LOT! R I R I R I U S E I 9 9