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
MeetUP2_E2Eテストと自動化への取り組み_20220419
Search
BrainPad
May 31, 2022
Programming
0
410
MeetUP2_E2Eテストと自動化への取り組み_20220419
BrainPad
May 31, 2022
Tweet
Share
More Decks by BrainPad
See All by BrainPad
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
530
エンジニア応募者様向け_会社説明資料_202502
brainpadpr
0
2.2k
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
5
370
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
2
370
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
12
2.1k
「ビジネス現場でのデータ分析者」 東京大学 GCI 2024 Winter
brainpadpr
3
1.9k
白金鉱業Meetup Vol.16_数理最適化案件のはじめかた・すすめかた
brainpadpr
3
1.8k
白金鉱業Meetup Vol.16_【初学者向け発表】 数理最適化のはじめの一歩 〜身近な問題で学ぶ最適化の面白さ〜
brainpadpr
11
2.2k
Other Decks in Programming
See All in Programming
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
XSLTで作るBrainfuck処理系
makki_d
0
210
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
280
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
120
VS Code Update for GitHub Copilot
74th
1
410
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
870
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
ReadMoreTextView
fornewid
1
480
XP, Testing and ninja testing
m_seki
3
200
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
Team operations that are not burdened by SRE
kazatohiei
1
260
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The World Runs on Bad Software
bkeepers
PRO
69
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Docker and Python
trallard
44
3.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
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
おわり ありがとうございました。