Slide 1
Slide 1 text
テスト稼働の削減とフロントエンドの品質
担保を行うE2Eテスト
川又由雅
Slide 2
Slide 2 text
自己紹介
● 川又 由雅
● 2018 年入社
● Chat Dealerの開発、運用に携わっています
○ バックエンド
○ フロントエンド
● 学習、趣味で Vue.js を用いて簡単な SPA を作ったりしていました
2
Slide 3
Slide 3 text
本日お話しすること
● ChatDealer とは
● ChatDealer が抱えていた課題について
● ↑の課題をE2Eテストによって解決
● E2Eテストにより実際に出た効果
● 今後やりたいこと
3
Slide 4
Slide 4 text
ChatDealerとは
● サービス概要
○ サイトに専用スクリプトを埋め込んで利用するチャットシステム
○ ボットを用いて自動的に応答することが可能
4
Slide 5
Slide 5 text
まず前提
5
Slide 6
Slide 6 text
まず前提
● チャットボット（自動応答処理）機能
○ エンドユーザからの質問 → 想定した回答を返す
○ チャットシステムにとってはプロダクトの大前提
○ 想定通り動かないのはNG
○ テストはきわめて重要
6
Slide 7
Slide 7 text
まず前提
● チャットボット（自動応答処理）機能
○ ChatDealer は毎月新機能をリリースしている
○ ほぼ毎回チャットボットに何らかの改善が加えられる
○ 絶対に不具合を出せないので毎回テストが必須となる
7
Slide 8
Slide 8 text
ChatDealerが抱えていた課題
8
Slide 9
Slide 9 text
ChatDealerが抱えていた課題
● チャットボット機能のテストを手動でやっていた
○ これがめちゃくちゃ大変
■ ケース数が多い
■ にも関わらず機能がどんどん追加される
■ その結果ケース数が膨大になっていく
9
Slide 10
Slide 10 text
実際どんなテストを行っているか
10
Slide 11
Slide 11 text
ChatDealerが抱えていた課題
● 前提条件に関するテストケース
○ アクション実行のトリガーとなる条件
11
Slide 12
Slide 12 text
ChatDealerが抱えていた課題
● 実行条件に関するテストケース
○ エンドユーザの情報や環境によるもの
12
Slide 13
Slide 13 text
ChatDealerが抱えていた課題
● アクションの種別によるテストケース
● 以上3種類のテストケースをさらに色々なパターンに分岐させて行う
○ 無人対応 / 有人対応
○ 営業時間内 / 営業時間外
○ チャットの開き方 など
13
Slide 14
Slide 14 text
ChatDealerが抱えていた課題
● 全テストケース数：642 個
● テストに 16時間ほどかかっていた
● 16時間 × 1年（12か月） = 192時間
14
Slide 15
Slide 15 text
ChatDealerが抱えていた課題
● 加えて、手動でテストを行うとテストケースの漏れが発生する
○ テストの品質は実施する人によって異なる
15
Slide 16
Slide 16 text
そこで
16
Slide 17
Slide 17 text
E2Eテストを導入
17
Slide 18
Slide 18 text
E2Eテストを導入
● 目的
○ テストにとられる稼働の削減
○ テストの品質を揃える
■ テストケースの漏れを防ぐ
18
Slide 19
Slide 19 text
E2Eテストを導入
● 内容
○ チャットボットのテストを自動化
■ ブラウザ環境を用意して、実際にページにアクセス
■ HTMLの要素をもとにテスト
19
Slide 20
Slide 20 text
E2Eテストを導入
● 例：メッセージを送信
○ チャットボットによるメッセージが送信、表示されているか？
20
Slide 21
Slide 21 text
技術スタック、構成
21
Slide 22
Slide 22 text
技術スタック、構成
● 言語：JavaScript（Node.js）
● 開発ツール：Puppeteer
22
Slide 23
Slide 23 text
技術スタック、構成
● なぜ Puppeteer ?
○ インストールが楽
○ npm コマンドで環境構築が簡単に行える
○ ブラウザ操作が楽
■ ドライバとか別に用意しないくていい
○ JavaScript で書けるので学習コストがかからない
23
Slide 24
Slide 24 text
技術スタック、構成
● Selenium を使う案もあった
○ 色々必要なライブラリやミドルウェアがある
○ 環境構築が大変そう
○ 結果 Puppeteer を使用することになった
24
Slide 25
Slide 25 text
環境準備
25
Slide 26
Slide 26 text
環境準備
● Node.js のインストール
○ バージョンは 8 以上を使用する
26
Slide 27
Slide 27 text
環境準備
● E2Eテスト用のディレクトリ内で npm install 実行
○ puppeteer のインストール
27
Slide 28
Slide 28 text
実行コマンド
28
Slide 29
Slide 29 text
実行コマンド
● すべてのテストファイルの一括実行
○ package.json にテスト一括実行用コマンドを設定
○ “npm （設定したコマンド）” で実行
○ チャットボットの設定などの隙間の時間を省くことができる
29
Slide 30
Slide 30 text
得られた効果
30
Slide 31
Slide 31 text
得られた効果
● ChatDealerのチャットボットのテストの工数削減効果
○ 16時間 → 2時間程度まで削減！
■ 約14時間も削減！
○ 毎月リリースで年12回のリリースに換算
■ 14時間の削減 × 12か月＝ 168時間
■ 1年で 168時間も削減できる！
31
Slide 32
Slide 32 text
得られた効果
● 実装にかかった工数：約86時間
● 86時間 ÷ 14時間（テスト1回あたり削減できる時間）= 6.14 …
○ 7回テストをすれば実装時間の元をとれる！
32
Slide 33
Slide 33 text
得られた効果
● リリース前に検知できた不具合
○ 詳細については省略
○ 特定条件が組み合わさったときにチャットボットが正常に動作しなくな
るという「致命的」な不具合
○ 発動条件がマニアック
○ だが、網羅的・自動的にチェックできるE2Eテストのおかげで事前検知
できた！
33
Slide 34
Slide 34 text
今後やりたいこと
34
Slide 35
Slide 35 text
今後やりたいこと
● チャットボット以外の機能もE2Eテストで自動化したい
○ テストを自動化したい機能
■ エンドユーザと対話するスタッフ側の機能
■ マスタメンテ、レポートなどの管理系機能 など
○ ケース数：428個
○ テスト工数：1か月あたり 16時間
○ 16時間 → 約7時間（約 9時間の削減見込み）
■ 1年間で 9時間 × 12回 = 108時間の削減効果
35
Slide 36
Slide 36 text
今後やりたいこと
● 不安定なところを解消したい
○ 原因
■ ネットワーク遅延で画面表示前にテストが進行してしまう
■ JavaScript ファイルが取得できないことがたまにある
○ テスト待機設定を見直したい
36
Slide 37
Slide 37 text
今後やりたいこと
● リファクタリング
○ テストを突貫で実装してきた
■ テストコードが粗くなってしまっている
■ リファクタリングを行いたい
37
Slide 38
Slide 38 text
E2Eテストを導入してみて
38
Slide 39
Slide 39 text
E2Eテストを導入してみて
● 良かった点
○ Puppeteer の導入コストがかからなかった
○ チャットボットの動きはインプット、アウトプットともに文字列
■ In / Out の定義が楽
● In：エンドユーザーが送信するメッセージ
● Out：チャットボットにより送信されたメッセージ
39
Slide 40
Slide 40 text
E2Eテストを導入してみて
● 苦労した点
○ 初めて実装したとき Node.js の不明点が多く詰まる
■ Node.js について学習
■ メンバーに質問
○ 不安定
■ 待機時間を設けて遅延を防ぐ
40
Slide 41
Slide 41 text
ちなみに
41
Slide 42
Slide 42 text
なぜ最初からE2Eテストを導入できなかった？
● プロダクト立ち上げ当初
○ テスト駆動で開発しようという計画があったのは事実
○ が、リリース最優先のためテスト構築は後回しになった
● 今後
○ テスト構築コストとランニングコストとの比較を適切なタイミングで行い
たい（反省）
42
Slide 43
Slide 43 text
まとめ
43
Slide 44
Slide 44 text
まとめ
● E2Eテストは以下のような場面で効果絶大
○ In / Out がはっきりしている
○ 手動で何度も同じようなことをやっている
○ 定期的にテストタイミングが発生する
● 費用対効果が見込める場合はぜひやるべき！
44