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

by riririusei99

Slide 1

Slide 1 text

JavaScriptの E2Eフレームワークを触ってみる R I R I R I U S E I 9 9

Slide 2

Slide 2 text

⾃⼰紹介 riririusei99 チームスピリット QAエンジニア/Scrum Master futsal・CTF・1⼈映画 Jリーグ観戦（⼤宮アルディージャ）

Slide 3

Slide 3 text

今⽇のテーマは⾃動テスト（E2E）の紹介です

Slide 4

Slide 4 text

Javascriptを愛してやまないエンジニアの皆様に向けて

Slide 5

Slide 5 text

あなたに合ったE2Eがきっと⾒つかる！！ …といいな

Slide 6

Slide 6 text

JavaScript × E2E Testing R I R I R I U S E I 9 9

Slide 7

Slide 7 text

今回のおしながき・Protractor ・cinnamonjs ・Cypress ・Nightmare.js ・TestCafe ルール動くとこまで確認して、それぞれの特徴を紹介する

Slide 8

Slide 8 text

Protractor 名家⽣まれの E 2 E フレームワーク

Slide 9

Slide 9 text

Protractor URL: http://www.protractortest.org/#/ Github Star: 7242 (2018/1/22時点) 特徴： • Angular.js 向けE2Eフレームワーク(それ以外も使える） • Selenium Webdriverが動く • 拡張性が⾼い – ドライバを切り替えてブラウザを切り替えられる – テストフレームワーク＆アサーションライブラリなど

Slide 10

Slide 10 text

TEST CODE

Slide 11

Slide 11 text

TestCafe a s y n c / a w a i t をバリバリ使いたいあなたに

Slide 12

Slide 12 text

TestCafe URL: https://devexpress.github.io/testcafe/ Github Star: 3883 (2018/1/22時点) 特徴： • Selenium を使わず動く • 設定ファイルなしで動く • 導⼊が簡単 • TypeScript, モダンなJS(async/await)を使って書ける

Slide 13

Slide 13 text

TEST CODE

Slide 14

Slide 14 text

Nightmare 名は体を表す

Slide 15

Slide 15 text

Nightmare URL: https://github.com/segmentio/nightmare Github Star: 14640 (2018/1/22時点) 特徴： • 名前がカッコイイ • Electronベースで動く • Seleniumを使わずに動く • ブラウザ⾃動ツール向け • 名前がカッコイイ（2回⽬）

Slide 16

Slide 16 text

TEST CODE

Slide 17

Slide 17 text

Cypress 最近噂の E 2 E フレームワーク

Slide 18

Slide 18 text

Cypress URL: https://www.cypress.io/ Github Star: 3459(2018/1/22時点) 特徴： • 導⼊が⾮常に簡単 • CLIでも動く • レポーティングにテンションが上がる • 修正を検知して⾃動でテストが⾛る • 今のところChromeで動く

Slide 19

Slide 19 text

TEST CODE

Slide 20

Slide 20 text

cinnamonjs 違いを⾒せたい⼈、独⾃路線を好む⼈

Slide 21

Slide 21 text

cinnamonjs URL: https://github.com/ralphv/cinnamonjs Github Star: １(2018/1/22時点) 特徴： • データ駆動型テスト（DDT）を意識したフレームワーク • 独⾃のレポーティング機能を備えている • Json形式でテストを書く • Seleniumを使ってブラウザ操作する

Slide 22

Slide 22 text

TEST CODE

Slide 23

Slide 23 text

CONCLUSIONS R I R I R I U S E I 9 9

Slide 24

Slide 24 text

E2E選定は置かれた環境による検討事項 • クロスブラウザテストの実施するか • CIに載せたリグレッションテストを⾏うか • テストコードの書きやすさ • 導⼊のしやすさ • レポーティング結果の確認のしやすさ • 証跡の残し⽅（スクリーンショット、動画）

Slide 25

Slide 25 text

⾃分が使うなら既存テストとフロントエンドでの役割分担を⽬指す

Slide 26

Slide 26 text

役割分担 • クロスブラウザテスト • データ⼊出⼒など • CI環境向け⽤ • デモ⼿順の⾃動化 • シナリオテスト • ローカルでの確認⽤

Slide 27

Slide 27 text

まとめ R I R I R I U S E I 9 9

Slide 28

Slide 28 text

偉い⼈は⾔いました “ゆうめいな E2E そうでない E2E そんなのひとのかってほんとうにつよい QAエンジニアならすきな E2E でかてるようにがんばるべき”

Slide 29

Slide 29 text

THANKS A LOT! R I R I R I U S E I 9 9