VRTを導入してみた話 (2024/01/31)

社外イベント (AWS勉強会)で登壇した際の資料

1. AWSを活用して Visual Regression Test を導入してみた ディップ株式会社 有村 海星
2. アジェンダ - 自己紹介 - Visual Regression Test (VRT) とは - 導入背景 - どうやって導入したか - 導入した所感
3. 自己紹介 有村 海星 (ありむら かいせい) 所属 ディップ株式会社 2022年新卒入社 「ナースではたらこ」の開発を担当 3
4. Visual Regression Test とは - フロントエンドのテスト手法の一つ - UIにおける差分を確認するテスト
5. 導入背景 ◯ 「UIに意図しない変更が起きていないか」を楽に確認するため 以前はCSSのリファクタリング等をした後、 目視でUIを確認していた 今後も継続的にリファクタリングをしていきたいが、 長期的に考えると、毎回目視で確認するのはしんどい... →　Visual Regression Test 導入へ・・！
6. どうやって導入したか
7. どうやって導入したか - テスト内容 UIコンポーネントのスクリーンショットを自動で撮る（Playwright） ↓ 親ブランチとの差分を比較する (reg-suit) ↓ 差分結果をHTMLファイルで出力する 上記のテストをCodeBuildで自動実行
8. （HTML形式） テスト実行
9. 導入した所感
10. ① 意外に料金が安い • CodeBuild (インスタンスタイプ general1.medium / 1ビルド8分 / 月100回のビルド数) → 8 USD / month • S3 （1ヶ月あたり400リクエスト（PUT, GET）と想定） → 2 USD / month • CloudFront オリジン取得は無料
11. ② サーバレスなので運用が楽 今まではEC2を利用してGitHub Actionsで別の自動テストを行っていた パッケージやストレージの管理等、運用が大変だった →　CodeBuildなら運用コストが比較的低い
12. ③ 自動化最高！ 自動化によって 「UIの差分を毎回目視で確認する」という作業が楽になった（作業効率UP） 自動で生成されるテストレポートを確認するだけ！
13. ありがとうございました!