Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
テスト稼働の削減とフロントエンドの品質担保を行うE2Eテスト
Search
yugkwmt
October 29, 2020
Technology
3
1.9k
テスト稼働の削減とフロントエンドの品質担保を行うE2Eテスト
yugkwmt
October 29, 2020
Tweet
Share
More Decks by yugkwmt
See All by yugkwmt
Laravel バージョンアップと品質担保の話
yugkwmt
2
570
JavaScript も jQuery も未経験の新人エンジニアが 1 年間 Vue.js を 学習して感じた話 / frontend conference 2019
yugkwmt
1
1.8k
Other Decks in Technology
See All in Technology
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
2
850
コンテナサプライチェーンセキュリティ
kyohmizu
1
110
深層学習と古典的画像アルゴリズムを組み合わせた類似画像検索内製化
shutotakahashi
1
270
Windows の新しい管理者保護モード
murachiakira
0
180
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
130
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
370
Share my, our lessons from the road to re:Invent
naospon
0
110
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
130
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
150
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
脳波を用いた嗜好マッチングシステム
hokkey621
0
180
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
610
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Optimizing for Happiness
mojombo
376
70k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
It's Worth the Effort
3n
184
28k
Designing for Performance
lara
604
68k
A Tale of Four Properties
chriscoyier
158
23k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Unsuck your backbone
ammeep
669
57k
Embracing the Ebb and Flow
colly
84
4.6k
Transcript
テスト稼働の削減とフロントエンドの品質 担保を行うE2Eテスト 川又由雅
自己紹介 • 川又 由雅 • 2018 年入社 • Chat Dealerの開発、運用に携わっています
◦ バックエンド ◦ フロントエンド • 学習、趣味で Vue.js を用いて簡単な SPA を作ったりしていました 2
本日お話しすること • ChatDealer とは • ChatDealer が抱えていた課題について • ↑の課題をE2Eテストによって解決 •
E2Eテストにより実際に出た効果 • 今後やりたいこと 3
ChatDealerとは • サービス概要 ◦ サイトに専用スクリプトを埋め込んで利用するチャットシステム ◦ ボットを用いて自動的に応答することが可能 4
まず前提 5
まず前提 • チャットボット(自動応答処理)機能 ◦ エンドユーザからの質問 → 想定した回答を返す ◦ チャットシステムにとってはプロダクトの大前提 ◦
想定通り動かないのはNG ◦ テストはきわめて重要 6
まず前提 • チャットボット(自動応答処理)機能 ◦ ChatDealer は毎月新機能をリリースしている ◦ ほぼ毎回チャットボットに何らかの改善が加えられる ◦ 絶対に不具合を出せないので毎回テストが必須となる
7
ChatDealerが抱えていた課題 8
ChatDealerが抱えていた課題 • チャットボット機能のテストを手動でやっていた ◦ これがめちゃくちゃ大変 ▪ ケース数が多い ▪ にも関わらず機能がどんどん追加される ▪
その結果ケース数が膨大になっていく 9
実際どんなテストを行っているか 10
ChatDealerが抱えていた課題 • 前提条件に関するテストケース ◦ アクション実行のトリガーとなる条件 11
ChatDealerが抱えていた課題 • 実行条件に関するテストケース ◦ エンドユーザの情報や環境によるもの 12
ChatDealerが抱えていた課題 • アクションの種別によるテストケース • 以上3種類のテストケースをさらに色々なパターンに分岐させて行う ◦ 無人対応 / 有人対応 ◦
営業時間内 / 営業時間外 ◦ チャットの開き方 など 13
ChatDealerが抱えていた課題 • 全テストケース数:642 個 • テストに 16時間ほどかかっていた • 16時間 ×
1年(12か月) = 192時間 14
ChatDealerが抱えていた課題 • 加えて、手動でテストを行うとテストケースの漏れが発生する ◦ テストの品質は実施する人によって異なる 15
そこで 16
E2Eテストを導入 17
E2Eテストを導入 • 目的 ◦ テストにとられる稼働の削減 ◦ テストの品質を揃える ▪ テストケースの漏れを防ぐ 18
E2Eテストを導入 • 内容 ◦ チャットボットのテストを自動化 ▪ ブラウザ環境を用意して、実際にページにアクセス ▪ HTMLの要素をもとにテスト 19
E2Eテストを導入 • 例:メッセージを送信 ◦ チャットボットによるメッセージが送信、表示されているか? 20
技術スタック、構成 21
技術スタック、構成 • 言語:JavaScript(Node.js) • 開発ツール:Puppeteer 22
技術スタック、構成 • なぜ Puppeteer ? ◦ インストールが楽 ◦ npm コマンドで環境構築が簡単に行える
◦ ブラウザ操作が楽 ▪ ドライバとか別に用意しないくていい ◦ JavaScript で書けるので学習コストがかからない 23
技術スタック、構成 • Selenium を使う案もあった ◦ 色々必要なライブラリやミドルウェアがある ◦ 環境構築が大変そう ◦ 結果
Puppeteer を使用することになった 24
環境準備 25
環境準備 • Node.js のインストール ◦ バージョンは 8 以上を使用する 26
環境準備 • E2Eテスト用のディレクトリ内で npm install 実行 ◦ puppeteer のインストール 27
実行コマンド 28
実行コマンド • すべてのテストファイルの一括実行 ◦ package.json にテスト一括実行用コマンドを設定 ◦ “npm (設定したコマンド)” で実行
◦ チャットボットの設定などの隙間の時間を省くことができる 29
得られた効果 30
得られた効果 • ChatDealerのチャットボットのテストの工数削減効果 ◦ 16時間 → 2時間程度まで削減! ▪ 約14時間も削減! ◦
毎月リリースで年12回のリリースに換算 ▪ 14時間の削減 × 12か月= 168時間 ▪ 1年で 168時間も削減できる! 31
得られた効果 • 実装にかかった工数:約86時間 • 86時間 ÷ 14時間(テスト1回あたり削減できる時間)= 6.14 … ◦
7回テストをすれば実装時間の元をとれる! 32
得られた効果 • リリース前に検知できた不具合 ◦ 詳細については省略 ◦ 特定条件が組み合わさったときにチャットボットが正常に動作しなくな るという「致命的」な不具合 ◦ 発動条件がマニアック
◦ だが、網羅的・自動的にチェックできるE2Eテストのおかげで事前検知 できた! 33
今後やりたいこと 34
今後やりたいこと • チャットボット以外の機能もE2Eテストで自動化したい ◦ テストを自動化したい機能 ▪ エンドユーザと対話するスタッフ側の機能 ▪ マスタメンテ、レポートなどの管理系機能 など ◦
ケース数:428個 ◦ テスト工数:1か月あたり 16時間 ◦ 16時間 → 約7時間(約 9時間の削減見込み) ▪ 1年間で 9時間 × 12回 = 108時間の削減効果 35
今後やりたいこと • 不安定なところを解消したい ◦ 原因 ▪ ネットワーク遅延で画面表示前にテストが進行してしまう ▪ JavaScript ファイルが取得できないことがたまにある
◦ テスト待機設定を見直したい 36
今後やりたいこと • リファクタリング ◦ テストを突貫で実装してきた ▪ テストコードが粗くなってしまっている ▪ リファクタリングを行いたい 37
E2Eテストを導入してみて 38
E2Eテストを導入してみて • 良かった点 ◦ Puppeteer の導入コストがかからなかった ◦ チャットボットの動きはインプット、アウトプットともに文字列 ▪ In
/ Out の定義が楽 • In:エンドユーザーが送信するメッセージ • Out:チャットボットにより送信されたメッセージ 39
E2Eテストを導入してみて • 苦労した点 ◦ 初めて実装したとき Node.js の不明点が多く詰まる ▪ Node.js について学習
▪ メンバーに質問 ◦ 不安定 ▪ 待機時間を設けて遅延を防ぐ 40
ちなみに 41
なぜ最初からE2Eテストを導入できなかった? • プロダクト立ち上げ当初 ◦ テスト駆動で開発しようという計画があったのは事実 ◦ が、リリース最優先のためテスト構築は後回しになった • 今後 ◦
テスト構築コストとランニングコストとの比較を適切なタイミングで行い たい(反省) 42
まとめ 43
まとめ • E2Eテストは以下のような場面で効果絶大 ◦ In / Out がはっきりしている ◦ 手動で何度も同じようなことをやっている
◦ 定期的にテストタイミングが発生する • 費用対効果が見込める場合はぜひやるべき! 44