株式会社ブレインパッド 2022年04月19日 E2Eテストと自動化への取り組み 1

©2017 BrainPad Inc. 名前
 ● 高橋 聡 (タカハシ　ソウ)
 
 所属
 ● 株式会社ブレインパッド
 　　　　プロダクトビジネス本部 開発部
 ● Rtoaster reach+の開発担当
 
 
 趣味
 ● 最近：パスタ・ゴルフ
 ● ラグビー・ハンバーガー　
 自己紹介 2

©2017 BrainPad Inc. Rtoaster reach+の自動化に関する取り組み - はじめに - 課題 - Renovate - TestCafe - 今後について アジェンダ 3

はじめに

©2017 BrainPad Inc. ● Rtoaster reach+ 最初開発スピードを重視していたので運用面に関し て考慮できていなかった部分が多数存在しました。 ● CI/CD導入による自動化などには取り組み運用、まだ属人的な運用が 課題として残っています。 ● 課題の中からパッケージ管理やE2Eテストへの取り組みについて今回 お話しできたらと思います。 背景 5

©2017 BrainPad Inc. 開発環境 6 ● 言語 ○ Python, TypeScript, javascript ● フレームワーク ○ Flask, Vue.js ● インフラ ○ App Engine, BigQuery, Firestore, Dataflow他... ● ソースコード管理 ○ Bitbucket ● その他 ○ CircleCI, Terraform

課題

©2017 BrainPad Inc. ● Rtoaster reach+ではパッケージのバージョンアップに関して新しくライブラリを 追加する際やセキュリティの問題があった際にバージョンアップをする運用に なっています。 ● Poetry やnpmなどでパッケージの依存関係には考慮していますが、自動化 はできていません。またTerrafromのパッケージなどは考慮に入っていないの でバージョン管理ができていない状況です。 ● そこでRenovateを導入して依存関係の更新を自動化しようと現在取り組んで います。 課題 - パッケージ管理 - 8

Renovate

©2017 BrainPad Inc. Renovateはライブラリの依存関係の更新を自動化するツールです。依存関係を更新するプルリクエ ストを自動で作成してくれます。 類似したツールとしてはDepandabotなどがあります。 選んだ理由 ● Bitbucketだから・・・・ ● Dockerイメージを公開しているのでCircleCIで動かすことができる。 ● 設定できる内容が豊富でチームに合わせた運用にできる Renovateとは？ 10

©2017 BrainPad Inc. プルリクエストの制限 ● プルリクエストを自動で作ってくれるのはいいですが、数が多すぎると開発への影響も出るため制 限を現状10程度に設定しようと考えています。 実行頻度 ● プルリクエストの作成頻度はスプリントミーティングの前日に作成するようにしてスプリントでチーム で確認しマージする運用を考えています。そうすることで開発作業のPRと混在することがなくなるの で開発作業のストレスにならないと考えています。 アップデートの除外 ● Rtoaster reach+は現在リファクタリング中ということもあり利用されなくなるライブラも存在します。 それらのライブラリをrenovete.jsonで除外設定することができます Renovateの運用 11

©2017 BrainPad Inc. Renovate.jsonは右のように設定します。 設定ファイル 12

©2017 BrainPad Inc. Patchをオートマージしたい ● メジャーやマイナーバージョンアップに関してはQAで回帰テストを行う必要性があるにしてもPatch のバージョンアップで毎回回帰テストを行うのはQAに負担がかかるので安全を担保しつつオート マージがしたい。 回帰テストの負担 ● オートマージはしたいがRtoaster reach+では単体テストの自動化などは取り組んでいたが、E2Eテ ストの導入はできていなかった。 これらの課題解決のためE2Eテスト(TestCafe)の導入にも取り組んでいます。 Renovate導入の中での課題 13

testcafe

©2017 BrainPad Inc. TestCafeはE2Eテストを行うフレームワークです。 選んだ理由 ● ツールを選んでいた当時、画像比較が無料でできるのはTestCafeだけだった。 ● 導入が楽にできる ○ npm install -g testcafe のみで環境構築は大丈夫 TestCafeとは 15

©2017 BrainPad Inc. 画像比較機能 TestCafeでは画像比較という機能があり、TestCafeを実行した際に撮ったスクリーンショットと期待する 画面を比較する機能があります。 1回目に期待の写真を撮ります。 testcafe chrome sample_testcafe.js -s path=./screenshots --take-snapshot base ２回目に実際の写真を撮ります。 testcafe chrome sample_testcafe.js -s path=./screenshots --take-snapshot actual 画像比較機能 16

©2017 BrainPad Inc. 実行コマンド testcafe-blink-diff ./screenshots --compare base:actual --open --threshold 0.0001 画像比較機能 17

©2017 BrainPad Inc. 画像比較（Open diff） 18

©2017 BrainPad Inc. 画像比較（Compare） 19

©2017 BrainPad Inc. テストケース 過去の回帰テストから機能ごとに必要なテストを一覧の表にまとめ、それをTestCafeで実装する運用をし ています。 自動化 TestをCircleCIで実行するようにしています。 各種ブラウザ（chrome, firefox, Edgeなど）をCI上で実行できるように準備の必要がありますがイメージ が公開されているので簡単に構築できます。 TestCafe運用 20

©2017 BrainPad Inc. Renovateの運用 ● E2Eテストで回帰テストの80%~90%くらいまでカバーして快適にRenovateを運用できるように したいと考えております。 配信までのチェック ● Rtoaster reach+は配信サービスなのでアプリプッシュ通知の確認までテストできたらと考えて います。TestCafeはモバイル端末でのテストも可能なので考慮すべき点は多いと思いますが 可能だと考えています。 今後について 21

おわり ありがとうございました。