【まとめ】JavaScriptのE2Eフレームワークを触ってみる

はじめに

これまで5回に渡り書いたE2Eフレームワークを使ってみる系の記事は、We Are JavaScripters! @15th【初心者歓迎LT大会】 - connpassに登壇するにあたり書きました。
今回はLTに組み込めなかった補足とかを書ければ良いかなと思います。
事前に盛大にネタバレしていた訳ですが、LTは総集編だから良いだろうという目論見です wajs.connpass.com

発表資料

speakerdeck.com

E2Eフレームワークを使ってみる系の記事

Cypressを使ってみる - riririusei99’s blog
TestCafeを使ってみる - riririusei99’s blog
cinnamonjsを使ってみる - riririusei99’s blog
nightmare.jsを使ってみる - riririusei99’s blog
protractorを使ってみる - riririusei99’s blog

紹介したツールの選び方

LTの中で5つのツールを紹介したのですが、検討条件・紹介した理由みたいなのを書きます。

検討条件

  • テーマであるJavaScriptを使っているもの
  • 自分の勉強のため、これまで使ったことないもの
  • LTで紹介することを意識してテストコードの書き方に違いが出そうなもの

そこからぼんやりと紹介するテーマを選んでから紹介するツールを当てはめてみました。

紹介するラインナップ案(結果)

  • 拡張性が高い、いろいろカスタマイズできるもの(Protractor)
  • 導入が簡単で、単品で色々できるもの(Cypress)
  • Seleniumを使わないもの(Nightmare)
  • モダンな書き方ができる新しいもの(TestCafe)
  • テストケースの書き方に特徴があるもの(cinnamonjs)

※今回WebdriverIOやNightWatch.jsなどを紹介しなかったのは実は触ったことがあったのと、WebdriverIOはProtractor、NightWatchはCypressと方向性が近いかなということで紹介から外れています。
ちなみにpuppetterを使ったHeadlessChromeを使ったE2Eを紹介できなかったのは単純に触る時間がなかったためです…スミマセン。
触っていたら名前がカッコイイNightmareと入れ替えるか考えるので悩ましいですね。

LTの中でCypressを選んだ理由

現在の開発チームに導入することを考えた場合、我々の特徴として下記がありました。

特徴

  • 既に稼働している自動テストがある
  • 開発エンジニアに好まれるツールが良さそう

拡張性があるツールより、簡単に導入ができてレポーティングが便利なツールが望まれ、既存のテスト領域を補えるツールを考えた結果、Cypressが良いとしています。

f:id:riririusei99:20180110233044p:plain
Cypressの実施&レポート画面

やってみての感想

社内イベント以外で登壇したのは初めてだったので非常に緊張しました。

緊張しすぎて2番手だったのに頂いたお酒を1本飲みきった状態でLTに挑みました。
終わった直後は緊張か酔ってるの分からないくらい頭が真っ白になりました。
普段から登壇されている人は改めてすごいですね。

改めて、場を提供していただいたWeJSの皆様、ありがとうございます。

また発表するので精一杯で、質疑に対して正しい返答ができず本当に申し訳ないです。
次回頑張る&自分なりの回答をブログのネタにしますので大目に見て下さい。

最後に、資料をあげた後にたくさんの人に閲覧してもらう形になりいい経験になりました。

当初は簡単な暗号文を解析をしてくれるツールを作って、オリジナルコンテンツとしてFF10で使っていたアルベド語翻訳ツール(最近実況動画を見た)みたいなネタツールを作る話をしようと思っていました。

作った時のテンションで発表は到底できなかったので結果的に自分の仕事に関係するようなテーマを選んでよかったと思っています。
要所要所に笑いどころを入れようと考えて作ったのですが、同僚に指摘された通りポケモンの下りはやめておけばよかった。かなり恥ずかしい

本当にありがとうございます。過去は取り戻せないのでこれからを頑張ります。

といったところで勉強会の初登壇の話はこの辺で終わりです。
ここまで読んでいただきありがとうございました。

追記

発表資料がはてブでホットエントリーに取り上げられてちょっとバズりました。 b.hatena.ne.jp ありがたいです。

riririusei99