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
180
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
530
エンジニア応募者様向け_会社説明資料_202502
brainpadpr
0
2.3k
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
5
380
白金鉱業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
XP, Testing and ninja testing
m_seki
3
220
ふつうの技術スタックでアート作品を作ってみる
akira888
0
340
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
590
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
840
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
2.4k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
3.6k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
3k
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
NPOでのDevinの活用
codeforeveryone
0
720
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
550
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Side Projects
sachag
455
42k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
The Cult of Friendly URLs
andyhume
79
6.5k
The Invisible Side of Design
smashingmag
300
51k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Become a Pro
speakerdeck
PRO
28
5.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Visualization
eitanlees
146
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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
おわり ありがとうございました。