4年間のVRT運用、続ける理由とその方法

2025/2/20に開催したRecruit Tech Conference 2025の蝦名のLT資料です

Transcript

1. 4年間のVRT運用、続ける理由とその方法 RECRUIT TECH CONFERENCE 2025 蝦名 一真 株式会社リクルート プロダクトディベロップメント室　マネジャー
2. 蝦名 一真 (えびな かずま) アコースティックギター 経歴 / Career SIerでSE職を勤めたのち、2019年にリクルートに キャリア採用入社。 『スタディサプリENGLISH』のWebフロント開発担当。 2022年からマネジャー任用。 ビルド環境をwebpackからViteに移行したり、 GitHub Actionsによるデプロイフローを整えたり、 Frontend Opsも得意。 趣味 / Hobbies プロダクトディベロップメント室 まなび 社会人・語学プロダクト開発部 Englishフロントエンド開発グループ GitHub @kazuma1989
3. Agenda 1. Visual Regression Testing (VRT)を身近にしたい 2. 『スタディサプリENGLISH』のVRT事情 3. VRTの恩恵: 修正結果の検証が簡単になる 4. VRTの苦労: ”育てる”ことと”品質”の維持 5. VRTを”育てる” 6. VRTの”品質”を維持する 7. 4年間のVRT運用、続ける理由とその方法 8. (付録) 具体的なVRT構成 メリット訴求 導入判断、運用設計 の参考に まとめ
4. Visual Regression Testing (VRT)を身近にしたい Visual Regression Testing (VRT)とは？ • スナップショットテストの1種で、コード改修前後のUIの視覚的変化を検知するテスト • 改修による意図しないデザイン崩れ(visual regression)を早期発見できる CHANGED NEW DELETED が期待どおりか 調べる
5. Visual Regression Testing (VRT)を身近にしたい VRTはコストに比べて得られる安心感が高いので、おすすめ！ 具体的な事例をお伝えして、みなさんのVRTに対する解像度を高めたい 図: 初めてのVRTに驚嘆する様子
6. 『スタディサプリENGLISH』のVRT事情 『スタディサプリENGLISH』 英語のオンライン学習サービス (iOS/Android/Web対応) • AndroidとWebでVRTを導入 (詳細は付録ページで) • Visual Regression Testing はじめました - 具体的な運用 Tips (Web導入時の紹介) から4年！ 開発フロー 1. エディタやブラウザでプレビューしながらUIを実装し プルリクエストとしてレビューに提出 2. 10分〜20分ほど待つと、プレビューしていたものが VRTレポートとしてプルリクエストのコメントに届く 3. レビュアーはVRTレポートを参考にレビュー
7. VRTの恩恵: 修正結果の検証が簡単になる ∵ フロントエンドの修正結果 ≒ 見た目(UI)の変化 = VRTレポート • 全UIの全バリエーションを見直す手間を省いてくれる ◦ ブラウザ間の挙動 (とくにCSS) の違い、複数の画面サイズ ◦ 到達しづらいUIステート (日数が必要、クレジットカードが必要、など) • 致命的なランタイムエラーを見つけてくれる ◦ Botによるライブラリアップデートにとくに有効 修正内容の検証が簡単になると… • リファクタリングに対する心理的な障壁が下がる • ライブラリアップデートを滞らせない • ほかのチームにも修正してもらえる 積極的にコード改善に取り組める！
8. 素敵なVRTライフを！ …困りごとも当然あるでしょう？
9. VRTの苦労: ”育てる”ことと”品質”の維持 2500枚に”育てる”までの苦労と、2500枚の”品質”を維持する苦労 （VRTに限らず、自動テスト一般に当てはまる） • ”育てる” ◦ 撮影対象が十分な数あること • ”品質” ◦ Flaky tests (結果が”安定しない”テスト)が少なく、実行時間が短いこと ※ともかく始めることに については、ツール/ サービス/ブログが充実 しておりハードルは低め 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成 図: VRT実行の3ステップ ↓”育てる”対象 ↓”品質”維持対象
10. VRTを”育てる”
11. VRTを”育てる” VRTを”育てる”公式: 手間 < インセンティブ 手間を減らす（≒ 1.を簡単にする） • コンポーネント設計を改善する（グローバルステートへの依存を減らすなど） • ボイラープレートを減らす or コピー＆ペースト実装を推奨する or 生成AI活用 インセンティブを増やす（≒ 1.を増やしたい状況をつくる） • VRTを使うのが速くて安心という意識の醸成 • 「コードの品質担保は”自分たち”の責務」という意識を持つ組織を見つける ◦ 『スタディサプリENGLISH』では、開発者＝”自分たち”だった (幸運) ◦ 開発者以外が1.を推進するか、組織設計や契約設計を考えるか 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成
12. VRTの”品質”を維持する
13. VRTの”品質”を維持する VRTを”育てる”公式: 手間 < インセンティブ Flaky tests (結果が”安定しない”テスト) を減らす • CHANGED🟥対象が毎回変わる • 変えていないのにCHANGED🟥になる • 全部NEW⬜になる Flaky testsが多いと… • VRTへの信頼を損なう＝インセンティブが減る • 撮影対象個別のflaky対策をすると、手間が増える VRTが”育たない” (∵公式) 定常的な CHANGED🟥の山 全部NEW⬜の 縦縞
14. VRTの”品質”を維持する ※「変えていないのにCHANGED🟥になる」の具体例
15. VRTの”品質”を維持する 1.よりもまず2.の描画と撮影で対策。本番との差異を許容するのも大事 描画環境(CIコンテナ)の準備 • 画像はコンテナローカルのダミーに差し替える • Webフォントはコンテナにインストール（フォントの中身が別でも名前を揃えればOK） 撮影の工夫 • アンチエイリアスやCSSアニメーションをオフにする • リソース読み込みを待つ（実行時間とトレードオフ） • DOM要素や属性の変化を検知して撮影タイミングを図る • 複数回撮影し、画像のバイナリデータに変化がなくなるのを待つ 1.撮影対象の実装 2.描画, 撮影 (保存) 3.差分レポート作成
16. 4年間のVRT運用、続ける理由とその方法 まとめ • 4年間続けたのは、苦労もあるが得るものが大きいから • 4年間続けるには、インセンティブ設計が最重要 素敵なVRTライフを！
17. (付録) 具体的な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.差分レポート作成
18. 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を採用
19. 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を採用 (運用開始時点から変更)