Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

05aa2872bc4c3a92aca20f009c58a5dd?s=47 riririusei99
January 24, 2018

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

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

05aa2872bc4c3a92aca20f009c58a5dd?s=128

riririusei99

January 24, 2018
Tweet

More Decks by riririusei99

Other Decks in Programming

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: 1(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