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

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

Avatar for Kaisei Arimura Kaisei Arimura
January 31, 2024
Technology
0
41

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

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

Avatar for Kaisei Arimura

Kaisei Arimura

January 31, 2024
Tweet

More Decks by Kaisei Arimura

See All by Kaisei Arimura
MCPサーバーを活用したAWSコスト管理
Avatar for Kaisei Arimura arie0703
0
320
【制作物紹介】みんなのポルトガル語単語帳
Avatar for Kaisei Arimura arie0703
0
69
楽しい個人開発のすゝめ (2023/04/26)
Avatar for Kaisei Arimura arie0703
0
32

Other Decks in Technology

See All in Technology
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
270
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
240
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
Avatar for nihonbuson nihonbuson
PRO
2
330
仕様書駆動AI開発の実践： Issue→Skill→PRテンプレで 再現性を作る
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
680
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
15
400k
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
610
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
360
顧客の言葉を、そのまま信じない勇気
Avatar for yamatai12 yamatai1212
1
360
20260208_第66回 コンピュータビジョン勉強会
Avatar for KeiichiIto1978 keiichiito1978
0
190
配列に見る bash と zsh の違い
Avatar for kazzpapa3 kazzpapa3
3
160
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
490
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
550

Featured

See All Featured
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
380
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
HDC tutorial
Avatar for Michiel Stock michielstock
1
390
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
420
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
86
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k

Transcript

  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. ありがとうございました!