Slide 1

Slide 1 text

© 2023 Findy Inc. VRTを自炊してコスト削減した話 川村純平 (2023/12/12)

Slide 2

Slide 2 text

© 2023 Findy Inc. ○ 川村純平(Junpei Kawamura) ○ フロントエンド ○ 趣味: hip-hop ○ 2021年に(株)JX通信社に入社し、新規事業『KAIZODE』の開発を担当 ○ 2023年6月より(株)ファインディに入社し『Findy Team+』の開発を担当 ⾃⼰紹介

Slide 3

Slide 3 text

© 2023 Findy Inc. 今⽇話すこと

Slide 4

Slide 4 text

© 2023 Findy Inc. VRTを⾃炊することでやりたいことを 妥当なコストで全部できるようにした!

Slide 5

Slide 5 text

© 2023 Findy Inc. 1. VRTとはそもそも何か 2. 現状のChromaticを使ったUIレビューについて 3. VRTを構築した話 4. 運用してみて 5. まとめ ⽬次

Slide 6

Slide 6 text

© 2023 Findy Inc. VRTとは

Slide 7

Slide 7 text

© 2023 Findy Inc. VRTとは 参照: https://www.chromatic.com/features/visual-test

Slide 8

Slide 8 text

© 2023 Findy Inc. VRTとは 参照: https://www.chromatic.com/features/visual-test ● Visual Regression Testing(以降 VRT)とはフロントエンドの テストの⼀つ ● UI のスナップショットをコード変更前後で取得し、ビジュア ルとしての⽐較差分を確認 ● 意図せぬ UI の変更や新規 UI の追加など、UI の追加‧変更‧ 削除を Story をベースに検知することができる

Slide 9

Slide 9 text

© 2023 Findy Inc. 現状のChromaticを使ったUIレビューについて

Slide 10

Slide 10 text

© 2023 Findy Inc. Chromaticを使ったUIレビュー

Slide 11

Slide 11 text

© 2023 Findy Inc. Chromaticを使ったUIレビュー 1. リリースプルリクが作成される 2. ChromaticのUIレビューのリンクへ⾶び確認 3. UI Reviewが不要な場合は⾃分で確認しApproveする a. 必要な場合はレビューワーをアサイン

Slide 12

Slide 12 text

© 2023 Findy Inc. Chromaticを使ったUIレビューの問題点 ● ChromaticのRequiredを動作が安定するまでは解除するなどしてUIレ ビューが仕組み化されていない状態 ● VRTをリリース、PR単位で気軽に動かすなどやりたいことをChromaticで 全部やろうとするとかなりのコストがかかることがわかった ● 使い⽅次第ではとても優秀だが、コストに⾒合った運⽤ができていない

Slide 13

Slide 13 text

© 2023 Findy Inc. VRTを⾃炊してやりたいことを妥当な コストで全部できるようにする!💪

Slide 14

Slide 14 text

© 2023 Findy Inc. VRTを構築 https://reg-viz.github.io/reg-suit/

Slide 15

Slide 15 text

© 2023 Findy Inc. VRTを構築 といってもゼロから作るわけではなくツールがある reg-suit x Stroycap でVRTを構築できる

Slide 16

Slide 16 text

© 2023 Findy Inc. VRTを構築

Slide 17

Slide 17 text

© 2023 Findy Inc. VRTを構築 1. リリースプルリク作成時 GitHub Actions が起動 2. reg-suit の reg-keygen-git-hash-pluginプラグインにより、トピックブランチ (作業ブランチ)のソースである親のコミットを⾃動的に検出 3. トピックブランチにて Storycap により Storybook をクロールし、スクリーン ショット画像の取得を⾏います。(この時点では CI コンテナに⼀時的に保存 されます。) 4. reg-suit run コマンドにより差分の html レポートを AWS の S3 に保存し、作 成したプルリクにレポートコメントを残します。

Slide 18

Slide 18 text

© 2023 Findy Inc. VRTを構築 実質S3の料⾦だけ!

Slide 19

Slide 19 text

© 2023 Findy Inc. VRTを構築 差分の結果をコメントしてくれる

Slide 20

Slide 20 text

© 2023 Findy Inc. VRTを構築 レポートページにて確認できる

Slide 21

Slide 21 text

© 2023 Findy Inc. 運⽤してみてでた課題

Slide 22

Slide 22 text

© 2023 Findy Inc. 運⽤してみてでた課題 1. 全部のstoryをVRTにかける必要があるかどうか CIが4-5分程度で終わるので、全部のstoryをVRTに 全部のstoryに対して差分検知した⽅が予期せぬ事故を防げる 2. flakyな差分に対してどうアプローチするか グラフ描画のコンポーネントでアニメーションが終わる前にスナッ プショットが撮影されていた Storycapのdelayを使いアニメーションが終わってからスナップ ショットを撮影するように対応

Slide 23

Slide 23 text

© 2023 Findy Inc. まとめ

Slide 24

Slide 24 text

© 2023 Findy Inc. 1. コストの削減と⾒直し 現状のツール⾒直しにより、より効率的で経済的に運⽤できるようになった。 2. VRTの効果 UIの変更やバグを早期に検知し、修正の負荷が下がる。予期せぬ画⾯崩れに気づける。 3. 課題への対応策 全storyをVRTにかける必要性や、flakyな差分に対するアプローチについて検討。 flakyなテストを容認してしまうと、本来気づく必要のあるUI差分を⾒逃す可能性がある。 4. 今後の展望 他部署‧フロントエンドチームへの導⼊促進や布教活動の展開、ノウハウの共有 VRTの更なる最適化 まとめ