Beeeat’s log

Beeeat’s log

プログラミングで出くわした知識やツール、日常生活、働き方その他色々なことをメモしていくブログ

「ゆるWeb勉強会@札幌 OnLine #9」で Jest + Puppeteer で E2E テストを導入した話をしました

この記事は マイナビ Advent Calendar 2020 の1日目の記事となります. (なんか去年も1日目だった気がする...)

今年の10月頃になりますが「ゆるWeb勉強会@札幌 OnLine #9」という勉強会で登壇しました.

mild-web-sap.connpass.com

私の地元は札幌で前々からゆるWeb勉強会に参加してみたかったのですが.帰省する日が盆と正月でいつも参加のタイミングを逃していましたが, 今回はオンラインでの参加ができるとのことなので,思い切って参加してみました.

オンラインでの登壇のためいつもと勝手が違い緊張しましたがオンライン上で参加者の皆さんと交流ができ,充実したイベントとなりました.

このイベントでは,私が業務で担当しているニュースメディアに Jest + Puppeteer で E2Eテストを導入した話をしました. 今回は登壇した資料についての補足や発表時にあまり話せていなかった内容を書いていこうと思います.

登壇資料

広告の表示確認を目視で確認している

f:id:bake0937:20201201223558p:plain

担当しているニュースメディアでは Google Ad Manager(以下,GAM) などを利用してネットワーク広告を表示するようにしています.

初回は GAM で発行されたタグをWebアプリ(Rails)の View に設定する必要があるのですが,どんな種類の広告が表示されるかはGAM側の設定になるため, 基本的には社内のネットワーク広告のチームのメンバーが表示を確認していました.

表示の確認なら簡単じゃん...と思うじゃん!

f:id:bake0937:20201201223641p:plain

1つ2つの広告タグの追加や変更くらいならパッと目視で確認ができるのですが,変更数が多かったりページ全体をリニューアルする時は確認作業って結構大変になります.

f:id:bake0937:20201201204415p:plain

確認作業は慣れてはいきますが,その分ヒューマンエラーも発生するリスクもあります.

f:id:bake0937:20201201204731p:plain

PC版に加えて,スマホ版のチェックもあったりと結局,広告チームのメンバーは確認作業で約半日掛かったようです.

回数を重ねれば,慣れてはいきますが,全体に関わるような変更を都度行ってしまうとその都度すべてのパターンを確認することになるのでかなり消耗します.

E2Eテストを導入して自動できそう!?

f:id:bake0937:20201201210555p:plain

E2Eテストの存在は前職で RSpec + Capybara + Poltergeist でE2Eテストを実装した経験もあり,導入してネットワーク広告のチームのメンバーの確認作業の負担を減らせそうと思いトライしてみました.

技術選定は色々なパターンを検討しましたが結果的には Jest + Puppeteer の構成にしました.

選定理由はスライドにも書いてありますが,さらに補足すると Poltergeist を使って操作することができる PhantomJS は現在では EOL になってしまい,その代替として Headless Chrome が話題になっていたことがずっと気になっており,いつか使ってみたいという気持ちがあったからというのもありました.

jser.info

導入手順とディレクトリ構成

f:id:bake0937:20201201223728p:plain

元々ローカル開発環境が Docker で作られていたため,それに併せて Puppeteer 用の Dockerfile を作成しました.(GtiHub にサンプルを後日アップします.)

結構...というかかなり Docker の勉強もすることもできて良かったです. ディレクトリ構成としてはフロントエンド用のディレクトリをすでに作っていたためそこにE2Eテストを導入するような構成しました.

実装例

f:id:bake0937:20201201211548p:plain

基本的にはbeforeAllで特定のページにアクセスし,GAM で発行したタグを取得できるか・できないかを確認のためテストの内容自体は簡単でした. しかし,タグが何十個もあるためその分のテストケースを書く必要がありました.

全テストを実行してみた

f:id:bake0937:20201201212027p:plain

適宜リファクタリングもし,全テストを実行してみたところ確認作業がなんと半日から約2分間まで短縮できました. この結果にはかなり驚き,とても達成感が溢れていた記憶があります.

とはいえ課題はある

f:id:bake0937:20201201212249p:plain

確認作業の大幅な時間短縮を期待できそうではあるのですが,メンテナンスコストや CI で回すかどうかなど色々と課題はありました.

E2Eテストはページの読み込みが上手く行かなったりすると,「たまに落ちる」が起きてしまうためあまり細かい粒度で書いてしまうと苦労するような話をよく聞きました.

今回はネットワーク広告という収益に大きく関わる内容だったため,E2Eテストを書く価値があると判断しましたが他の種類のテストケースを書く時はその都度検討したほうが良いと思いました.

発表中

発表中は Twitterハッシュタグや, Youtube のコメント,質疑応答を通してたくさんのコメントやフォードバックを頂きました.ありがとうございます.

当日の様子は「ゆるWeb勉強会@札幌 OnLine #9」あたりのツイートのリンクをざっくりではありますが,作ってみたの良ければこちらからどうぞ.

mobile.twitter.com

追記

tacck さんがまとめてくださってました.ありがとうございます!

togetter.com

まとめと所感

「ゆるWeb勉強会@札幌 OnLine #9」で登壇しました. オンラインでの登壇ははじめてでしたが,久しぶりに地元の勉強会に参加できてとても楽しかったです.

E2Eテストについては今回の登壇を通してフィードバッグをたくさん頂いたため,それらを基に引き続き頑張っていこうと思います.

来月も「ゆるWeb勉強会@札幌 OnLine #11」が開催されるとのことなので5分 LT で参加しようと思います💪

mild-web-sap.connpass.com