Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

JunpeiKawamura
December 12, 2023
520

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

JunpeiKawamura

December 12, 2023
Tweet

Transcript

  1. © 2023 Findy Inc. ◦ 川村純平(Junpei Kawamura) ◦ フロントエンド ◦

    趣味: hip-hop ◦ 2021年に(株)JX通信社に入社し、新規事業『KAIZODE』の開発を担当 ◦ 2023年6月より(株)ファインディに入社し『Findy Team+』の開発を担当 ⾃⼰紹介
  2. © 2023 Findy Inc. VRTとは 参照: https://www.chromatic.com/features/visual-test • Visual Regression

    Testing(以降 VRT)とはフロントエンドの テストの⼀つ • UI のスナップショットをコード変更前後で取得し、ビジュア ルとしての⽐較差分を確認 • 意図せぬ UI の変更や新規 UI の追加など、UI の追加‧変更‧ 削除を Story をベースに検知することができる
  3. © 2023 Findy Inc. Chromaticを使ったUIレビュー 1. リリースプルリクが作成される 2. ChromaticのUIレビューのリンクへ⾶び確認 3.

    UI Reviewが不要な場合は⾃分で確認しApproveする a. 必要な場合はレビューワーをアサイン
  4. © 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 に保存し、作 成したプルリクにレポートコメントを残します。
  5. © 2023 Findy Inc. 運⽤してみてでた課題 1. 全部のstoryをVRTにかける必要があるかどうか CIが4-5分程度で終わるので、全部のstoryをVRTに 全部のstoryに対して差分検知した⽅が予期せぬ事故を防げる 2.

    flakyな差分に対してどうアプローチするか グラフ描画のコンポーネントでアニメーションが終わる前にスナッ プショットが撮影されていた Storycapのdelayを使いアニメーションが終わってからスナップ ショットを撮影するように対応
  6. © 2023 Findy Inc. 1. コストの削減と⾒直し 現状のツール⾒直しにより、より効率的で経済的に運⽤できるようになった。 2. VRTの効果 UIの変更やバグを早期に検知し、修正の負荷が下がる。予期せぬ画⾯崩れに気づける。

    3. 課題への対応策 全storyをVRTにかける必要性や、flakyな差分に対するアプローチについて検討。 flakyなテストを容認してしまうと、本来気づく必要のあるUI差分を⾒逃す可能性がある。 4. 今後の展望 他部署‧フロントエンドチームへの導⼊促進や布教活動の展開、ノウハウの共有 VRTの更なる最適化 まとめ