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を採用 (運用開始時点から変更)