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
4年間のVRT運用、続ける理由とその方法
Search
Recruit
PRO
March 03, 2025
Technology
2
13
4年間のVRT運用、続ける理由とその方法
2025/2/20に開催したRecruit Tech Conference 2025の蝦名のLT資料です
Recruit
PRO
March 03, 2025
Tweet
Share
More Decks by Recruit
See All by Recruit
大規模プロダクトにおける フロントエンドモダナイズの取り組み紹介
recruitengineers
PRO
4
31
技術的ミスと深堀り
recruitengineers
PRO
3
32
『ホットペッパーグルメ』における マルチプラットフォーム化の歩み
recruitengineers
PRO
2
15
『じゃらんnet』アプリ 改善活動の軌跡
recruitengineers
PRO
2
16
『スタディサプリ for SCHOOL』における Flutter導入とその成果
recruitengineers
PRO
2
13
よりよいビジネスの「実現」のために エンジニアリングを発揮する
recruitengineers
PRO
3
35
イテレーティブな開発で 不確実性を乗り越える
recruitengineers
PRO
3
14
株式会社リクルート 社内ISUCONの裏側
recruitengineers
PRO
1
19
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
29
Other Decks in Technology
See All in Technology
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
520
クラウド食堂とは?
hiyanger
0
120
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
EDRの検知の仕組みと検知回避について
chayakonanaika
12
4.9k
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
210
AIエージェント元年@日本生成AIユーザ会
shukob
1
220
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
190
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
330
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
900
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
230
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
260
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing for Performance
lara
604
68k
Side Projects
sachag
452
42k
A better future with KSS
kneath
238
17k
Fireside Chat
paigeccino
34
3.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
Being A Developer After 40
akosma
89
590k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Raft: Consensus for Rubyists
vanstee
137
6.8k
A Modern Web Designer's Workflow
chriscoyier
693
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Transcript
4年間のVRT運用、続ける理由とその方法 RECRUIT TECH CONFERENCE 2025 蝦名 一真 株式会社リクルート プロダクトディベロップメント室 マネジャー
蝦名 一真 (えびな かずま) アコースティックギター 経歴 / Career SIerでSE職を勤めたのち、2019年にリクルートに キャリア採用入社。
『スタディサプリENGLISH』のWebフロント開発担当。 2022年からマネジャー任用。 ビルド環境をwebpackからViteに移行したり、 GitHub Actionsによるデプロイフローを整えたり、 Frontend Opsも得意。 趣味 / Hobbies プロダクトディベロップメント室 まなび 社会人・語学プロダクト開発部 Englishフロントエンド開発グループ GitHub @kazuma1989
Agenda 1. Visual Regression Testing (VRT)を身近にしたい 2. 『スタディサプリENGLISH』のVRT事情 3. VRTの恩恵:
修正結果の検証が簡単になる 4. VRTの苦労: ”育てる”ことと”品質”の維持 5. VRTを”育てる” 6. VRTの”品質”を維持する 7. 4年間のVRT運用、続ける理由とその方法 8. (付録) 具体的なVRT構成 メリット訴求 導入判断、運用設計 の参考に まとめ
Visual Regression Testing (VRT)を身近にしたい Visual Regression Testing (VRT)とは? • スナップショットテストの1種で、コード改修前後のUIの視覚的変化を検知するテスト
• 改修による意図しないデザイン崩れ(visual regression)を早期発見できる CHANGED NEW DELETED が期待どおりか 調べる
Visual Regression Testing (VRT)を身近にしたい VRTはコストに比べて得られる安心感が高いので、おすすめ! 具体的な事例をお伝えして、みなさんのVRTに対する解像度を高めたい 図: 初めてのVRTに驚嘆する様子
『スタディサプリENGLISH』のVRT事情 『スタディサプリENGLISH』 英語のオンライン学習サービス (iOS/Android/Web対応) • AndroidとWebでVRTを導入 (詳細は付録ページで) • Visual Regression
Testing はじめました - 具体的な運用 Tips (Web導入時の紹介) から4年! 開発フロー 1. エディタやブラウザでプレビューしながらUIを実装し プルリクエストとしてレビューに提出 2. 10分〜20分ほど待つと、プレビューしていたものが VRTレポートとしてプルリクエストのコメントに届く 3. レビュアーはVRTレポートを参考にレビュー
VRTの恩恵: 修正結果の検証が簡単になる ∵ フロントエンドの修正結果 ≒ 見た目(UI)の変化 = VRTレポート • 全UIの全バリエーションを見直す手間を省いてくれる
◦ ブラウザ間の挙動 (とくにCSS) の違い、複数の画面サイズ ◦ 到達しづらいUIステート (日数が必要、クレジットカードが必要、など) • 致命的なランタイムエラーを見つけてくれる ◦ Botによるライブラリアップデートにとくに有効 修正内容の検証が簡単になると… • リファクタリングに対する心理的な障壁が下がる • ライブラリアップデートを滞らせない • ほかのチームにも修正してもらえる 積極的にコード改善に取り組める!
素敵なVRTライフを! …困りごとも当然あるでしょう?
VRTの苦労: ”育てる”ことと”品質”の維持 2500枚に”育てる”までの苦労と、2500枚の”品質”を維持する苦労 (VRTに限らず、自動テスト一般に当てはまる) • ”育てる” ◦ 撮影対象が十分な数あること • ”品質”
◦ Flaky tests (結果が”安定しない”テスト)が少なく、実行時間が短いこと ※ともかく始めることに については、ツール/ サービス/ブログが充実 しておりハードルは低め 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成 図: VRT実行の3ステップ ↓”育てる”対象 ↓”品質”維持対象
VRTを”育てる”
VRTを”育てる” VRTを”育てる”公式: 手間 < インセンティブ 手間を減らす(≒ 1.を簡単にする) • コンポーネント設計を改善する(グローバルステートへの依存を減らすなど) •
ボイラープレートを減らす or コピー&ペースト実装を推奨する or 生成AI活用 インセンティブを増やす(≒ 1.を増やしたい状況をつくる) • VRTを使うのが速くて安心という意識の醸成 • 「コードの品質担保は”自分たち”の責務」という意識を持つ組織を見つける ◦ 『スタディサプリENGLISH』では、開発者=”自分たち”だった (幸運) ◦ 開発者以外が1.を推進するか、組織設計や契約設計を考えるか 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成
VRTの”品質”を維持する
VRTの”品質”を維持する VRTを”育てる”公式: 手間 < インセンティブ Flaky tests (結果が”安定しない”テスト) を減らす •
CHANGED🟥対象が毎回変わる • 変えていないのにCHANGED🟥になる • 全部NEW⬜になる Flaky testsが多いと… • VRTへの信頼を損なう=インセンティブが減る • 撮影対象個別のflaky対策をすると、手間が増える VRTが”育たない” (∵公式) 定常的な CHANGED🟥の山 全部NEW⬜の 縦縞
VRTの”品質”を維持する ※「変えていないのにCHANGED🟥になる」の具体例
VRTの”品質”を維持する 1.よりもまず2.の描画と撮影で対策。本番との差異を許容するのも大事 描画環境(CIコンテナ)の準備 • 画像はコンテナローカルのダミーに差し替える • Webフォントはコンテナにインストール(フォントの中身が別でも名前を揃えればOK) 撮影の工夫 • アンチエイリアスやCSSアニメーションをオフにする
• リソース読み込みを待つ(実行時間とトレードオフ) • DOM要素や属性の変化を検知して撮影タイミングを図る • 複数回撮影し、画像のバイナリデータに変化がなくなるのを待つ 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成
4年間のVRT運用、続ける理由とその方法 まとめ • 4年間続けたのは、苦労もあるが得るものが大きいから • 4年間続けるには、インセンティブ設計が最重要 素敵なVRTライフを!
(付録) 具体的なVRT構成 Android (Jetpack Compose) 1. エディタでのプレビュー用に `@Preview` アノテーションを付与して実装 (UIカタログはShowkaseが自動で収集して作ってくれる)
2. Paparazziで描画しスクリーンショットを撮影、Cloud Storage(GCS)に保存 3. reg-suitで差分レポートを作成、プルリクエストに添付 Web (React) 1. Storybook(UIカタログ共有)用に `*.stories.tsx` を実装 2. Playwrightで、Chromium/WebKitブラウザに描画させ、スクリーンショットを撮影、 Amazon S3に保存 3. reg-suitで差分レポートを作成、プルリクエストに添付 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成
Showkase & Paparazzi (or Roborazzi)がおすすめ Roborazzi*, Paparazzi* reg-suit (w/ plugins)
reg-cli Roborazzi Paparazzi Showkase (付録) VRTツール/サービスの守備範囲(Android) 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成 Roborazzi*, Paparazzi* … 差分レポート作成のタスクも持つ ※『スタディサプリENGLISH』ではShowkase, Paparazzi (撮影のみ), reg-suitを採用 ※『スタディサプリ小学・中学講座』ではShowkase, Roborazzi (撮影のみ), reg-suitを採用
1.は開発環境、2.&3.はPlaywright (visual comparisons)がもっとも手軽。 StorybookがすでにあるならChromaticもおすすめ SaaS (Chromatic, Lost Pixel) Playwright (visual
comparisons) reg-suit (w/ plugins) reg-cli Browsers* Storycap Storybook your dev server (付録) VRTツール/サービスの守備範囲(Web) 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成 Browsers* … Puppeteer, Playwright, Selenium, etc. ※『スタディサプリ ENGLISH』ではStorybook, Playwright (撮影のみ), reg-suitを採用 (運用開始時点から変更)