Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
MeetUP2_E2Eテストと自動化への取り組み_20220419
BrainPad
May 31, 2022
Programming
0
120
MeetUP2_E2Eテストと自動化への取り組み_20220419
BrainPad
May 31, 2022
Tweet
Share
More Decks by BrainPad
See All by BrainPad
BrainPad_Company_20230126
brainpadpr
0
87k
【技育祭2022】VUCA時代のサバイバル術!~ソフトスキルを獲得して強いエンジニアになろう_v3
brainpadpr
0
280
MeetUP4_データマネジメント_20221208
brainpadpr
0
350
MeetUP3_機械学習とプロダクト開発_20220929
brainpadpr
0
510
BrainPad_BZ_202209
brainpadpr
0
400
BrainPad_DE_202209ver
brainpadpr
1
4.6k
BrainPad_AN_202208
brainpadpr
1
6k
ブレインパッドPB本部紹介資料(キャリア採用向けweb公開版 )
brainpadpr
0
5.6k
MeetUP2_フロントエンド結合テスト_20220419
brainpadpr
0
260
Other Decks in Programming
See All in Programming
Swift Concurrency in GoodNotes
inamiy
4
1.4k
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
610
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
290
Unityでのチート対策を簡単かつ高品質に行う為の取り組み
trapezoid
0
510
TokyoR#103_DataProcessing
kilometer
0
540
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
320
2023年にクル(かもしれない)通信ミドルウェア技術(仮)
s_hosoai
0
220
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
150
T3 Stack and TypeScript ecosystem
quramy
3
770
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
Swift Observation
shiz
4
290
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
Featured
See All Featured
Building an army of robots
kneath
301
40k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
How to train your dragon (web standard)
notwaldorf
66
4.3k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
Design by the Numbers
sachag
271
18k
Scaling GitHub
holman
453
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Transcript
株式会社ブレインパッド 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 2回目に実際の写真を撮ります。 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
おわり ありがとうございました。