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
【新卒研修資料】効果検証_因果推論 / Impact evaluation Causal inference
brainpadpr
6
1.2k
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
2
200
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
3
560
エンジニア応募者様向け_会社説明資料_202502
brainpadpr
0
2.3k
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
5
410
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
2
380
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
12
2.2k
「ビジネス現場でのデータ分析者」 東京大学 GCI 2024 Winter
brainpadpr
3
2k
白金鉱業Meetup Vol.16_数理最適化案件のはじめかた・すすめかた
brainpadpr
4
1.8k
Other Decks in Programming
See All in Programming
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.9k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
800
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
「App Intent」よくわからんけどすごい!
rinngo0302
1
110
AIともっと楽するE2Eテスト
myohei
8
3k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How GitHub (no longer) Works
holman
314
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
BBQ
matthewcrist
89
9.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Site-Speed That Sticks
csswizardry
10
700
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
We Have a Design System, Now What?
morganepeng
53
7.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Become a Pro
speakerdeck
PRO
29
5.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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
おわり ありがとうございました。