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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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