VRTを自炊してコスト削減した話

Transcript

1. © 2023 Findy Inc. VRTを自炊してコスト削減した話 川村純平 （2023/12/12）
2. © 2023 Findy Inc. ◦ 川村純平（Junpei Kawamura） ◦ フロントエンド ◦ 趣味: hip-hop ◦ 2021年に(株)JX通信社に入社し、新規事業『KAIZODE』の開発を担当 ◦ 2023年6月より(株)ファインディに入社し『Findy Team+』の開発を担当 ⾃⼰紹介
3. © 2023 Findy Inc. 今⽇話すこと
4. © 2023 Findy Inc. VRTを⾃炊することでやりたいことを 妥当なコストで全部できるようにした!
5. © 2023 Findy Inc. 1. VRTとはそもそも何か 2. 現状のChromaticを使ったUIレビューについて 3. VRTを構築した話 4. 運用してみて 5. まとめ ⽬次
6. © 2023 Findy Inc. VRTとは
7. © 2023 Findy Inc. VRTとは 参照: https://www.chromatic.com/features/visual-test
8. © 2023 Findy Inc. VRTとは 参照: https://www.chromatic.com/features/visual-test • Visual Regression Testing（以降 VRT）とはフロントエンドの テストの⼀つ • UI のスナップショットをコード変更前後で取得し、ビジュア ルとしての⽐較差分を確認 • 意図せぬ UI の変更や新規 UI の追加など、UI の追加‧変更‧ 削除を Story をベースに検知することができる
9. © 2023 Findy Inc. 現状のChromaticを使ったUIレビューについて
10. © 2023 Findy Inc. Chromaticを使ったUIレビュー
11. © 2023 Findy Inc. Chromaticを使ったUIレビュー 1. リリースプルリクが作成される 2. ChromaticのUIレビューのリンクへ⾶び確認 3. UI Reviewが不要な場合は⾃分で確認しApproveする a. 必要な場合はレビューワーをアサイン
12. © 2023 Findy Inc. Chromaticを使ったUIレビューの問題点 • ChromaticのRequiredを動作が安定するまでは解除するなどしてUIレ ビューが仕組み化されていない状態 • VRTをリリース、PR単位で気軽に動かすなどやりたいことをChromaticで 全部やろうとするとかなりのコストがかかることがわかった • 使い⽅次第ではとても優秀だが、コストに⾒合った運⽤ができていない
13. © 2023 Findy Inc. VRTを⾃炊してやりたいことを妥当な コストで全部できるようにする！💪
14. © 2023 Findy Inc. VRTを構築 https://reg-viz.github.io/reg-suit/
15. © 2023 Findy Inc. VRTを構築 といってもゼロから作るわけではなくツールがある reg-suit x Stroycap でVRTを構築できる
16. © 2023 Findy Inc. VRTを構築
17. © 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 に保存し、作 成したプルリクにレポートコメントを残します。
18. © 2023 Findy Inc. VRTを構築 実質S3の料⾦だけ！
19. © 2023 Findy Inc. VRTを構築 差分の結果をコメントしてくれる
20. © 2023 Findy Inc. VRTを構築 レポートページにて確認できる
21. © 2023 Findy Inc. 運⽤してみてでた課題
22. © 2023 Findy Inc. 運⽤してみてでた課題 1. 全部のstoryをVRTにかける必要があるかどうか CIが4-5分程度で終わるので、全部のstoryをVRTに 全部のstoryに対して差分検知した⽅が予期せぬ事故を防げる 2. flakyな差分に対してどうアプローチするか グラフ描画のコンポーネントでアニメーションが終わる前にスナッ プショットが撮影されていた Storycapのdelayを使いアニメーションが終わってからスナップ ショットを撮影するように対応
23. © 2023 Findy Inc. まとめ
24. © 2023 Findy Inc. 1. コストの削減と⾒直し 現状のツール⾒直しにより、より効率的で経済的に運⽤できるようになった。 2. VRTの効果 UIの変更やバグを早期に検知し、修正の負荷が下がる。予期せぬ画⾯崩れに気づける。 3. 課題への対応策 全storyをVRTにかける必要性や、flakyな差分に対するアプローチについて検討。 flakyなテストを容認してしまうと、本来気づく必要のあるUI差分を⾒逃す可能性がある。 4. 今後の展望 他部署‧フロントエンドチームへの導⼊促進や布教活動の展開、ノウハウの共有 VRTの更なる最適化 まとめ