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
320
MeetUP2_E2Eテストと自動化への取り組み_20220419
BrainPad
May 31, 2022
Tweet
Share
More Decks by BrainPad
See All by BrainPad
拡散モデルの原理紹介
brainpadpr
1
770
位相的データ解析とその応用例
brainpadpr
0
17
ベイズ最適化をゼロから
brainpadpr
1
28
0年目から意識したい、スピーディーに誤解無くコミュニケーションを取る方法
brainpadpr
3
650
データサイエンティストである前にビジネスマンとして必要なこと
brainpadpr
2
720
エンジニア応募者様向け_会社説明資料_202401
brainpadpr
0
1.1k
BrainPad_Company_20231003
brainpadpr
1
170k
【新卒研修資料】基礎統計学 / Basic of statistics
brainpadpr
133
97k
2023.05.19 東邦システムサイエンス講演資料
brainpadpr
2
1.5k
Other Decks in Programming
See All in Programming
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
520
仕様と実装で学ぶOpenTelemetry
drumato
2
150
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
360
Apache Hive 4 on Treasure Data
ryukobayashi
1
460
ペパボOpenTelemetry革命
pyama86
2
190
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
150
Fast JSX: Don't clone props object #28768
yossydev
1
220
AppRouter Panel Talk
yosuke_furukawa
PRO
1
510
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.8k
Ruby Pattern Matching
bkuhlmann
0
940
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
110
2024 コーディング研修
ckazu
0
480
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
A Tale of Four Properties
chriscoyier
153
22k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Done Done
chrislema
178
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Building Adaptive Systems
keathley
32
1.9k
Making the Leap to Tech Lead
cromwellryan
125
8.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
おわり ありがとうございました。