Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
実践Flutter Visual Regression Testing
Search
Tomoki_Takahashi
April 27, 2021
Technology
0
290
実践Flutter Visual Regression Testing
Flutter × Kotlin Multiplatform by CyberAgent #3
2021/4/27
Tomoki_Takahashi
April 27, 2021
Tweet
Share
More Decks by Tomoki_Takahashi
See All by Tomoki_Takahashi
SwiftUI Components Management
tomokitakahashi
0
210
旅行アプリでより正確にパスポートを読み込む技術 ~ MLKit / Vision / CoreNFC ~
tomokitakahashi
2
790
Other Decks in Technology
See All in Technology
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
1
100
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
270
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
AWSで始める実践Dagster入門
kitagawaz
1
680
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
290
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
170
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
180
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Automating Front-end Workflow
addyosmani
1370
200k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
4 Signs Your Business is Dying
shpigford
184
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Transcript
2021/4/27 ࣮ફFlutter Visual Regression Testing 'MVUUFSº,PUMJO.VMUJQMBUGPSNCZ$ZCFS"HFOU
Tomoki Takahashi - Twitter: @tomosan_dev - CyberAgent / 2019~ -
Github: @tomokitakahashi - Flutter: ~6month
Visual Regression Testing - ը૾ճؼςετ - मਖ਼લޙͷը૾Λൺֱ͠ɺ͕ࠩͳ͍ɺҙਤͨࠩ͠Ͱ͋Δ͜ͱΛ֬ೝ - ࠷ۙωΠςΟϒͰঃʑʹར༻͞ΕΔΑ͏ʹ -
https://github.com/playbook-ui/playbook-ios
FlutterͰVRT࣮ݱͰ͖Δͷ͔… 😨 ·ͩ·ͩൃల్্ͳͷͰ…. Flutter࢝Ίͯ·ͩ1ϲ݄… DartͰ͢ΒΒͳ͍͜ͱͨ͘͞Μ͋Δͷʹ…
Flutter Golden Test
Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞͢Δ - GoldenTestͷͱղܾ
- reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ
Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞͢Δ - GoldenTestͷͱղܾ
- reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ
Flutter Golden Testsͬͯͳʹʁ - Widget TestͷҰ෦ - MatcherTestWidget୳ࡧධՁɺGoldenTestimageൺֱ - Unit
Test / Widget Test / Integreation Test
Flutter Golden Testsͬͯͳʹʁ - Widget TestͷҰ෦ - MatcherTestWidget୳ࡧධՁɺGoldenTestimageൺֱ - Unit
Test / Widget Test / Integreation Test
Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞͢Δ - GoldenTestͷͱղܾ
- reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ
1. Golden TestΛॻ͘
1. Golden TestΛॻ͘
1. Golden TestΛॻ͘ 3FGIUUQT fl VUUFSEFWEPDTDPPLCPPLUFTUJOHXJEHFU fi OEFST
2. Golden FileΛੜ͢Δ - flutter test - -update-goldensΛ࣮ߦ͢ΔͷΈ - ൺֱͷtestͱ࣮ͯ͠ߦ͢Δ߹
flutter testΛ࣮ߦ͢Δ
Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞͢Δ - GoldenTestͷͱղܾ
- reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ
Bad 1. font͕ϩʔυ͞Εͣจࣈ͕දࣔͰ͖ͳ͍ - flutter test্Ͱfontϩʔυ͞Εͳ͍🌀 - จࣈԽ͚͕ൃੜ͠ɺVRTʹར༻͢Δը૾ͱͯ͠ෆద - https://github.com/flutter/flutter/issues/17700
(3લ…)
XJEHFU@UFTUEBSU Try 1. FontLoaderΛͬͯfontΛಡΈࠐΉ QVCTQFDZBNM
QVCTQFDZBNM XJEHFU@UFTUEBSU Try 1. FontLoaderΛͬͯfontΛಡΈࠐΉ
Try 1. FontLoaderΛͬͯfontΛಡΈࠐΉ - rootͷMaterialApp.themeʹfontFamilyΛࢦఆ
Try 1. FontLoaderΛͬͯfontΛಡΈࠐΉ 🎉
Bad 2. Icon͕ϩʔυ͞ΕͣΞΠίϯ͕දࣔͰ͖ͳ͍ - flutter test্ͰFlutter.Iconϩʔυ͞Εͳ͍🌀 - จࣈԽ͚͕ൃੜ͠ɺVRTʹར༻͢Δը૾ͱͯ͠ෆద
Try 2. flutter͔ΒMaterialIconsΛಡΈࠐΉ IUUQTHJUIVCDPN fl VUUFS fl VUUFSJTTVFT
Try 2. flutter͔ΒMaterialIconsΛಡΈࠐΉ🎉
Tips. ը૾Λ࣮ػʹ͚ۙͮΔ - ը૾αΠζΛࢦఆ͢Δ
Tips. ScrollViewͷαΠζʹ߹ΘͤΔ
Tips. ScrollViewͷαΠζʹ߹ΘͤΔ
Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞͢Δ - GoldenTestͷͱղܾ
- reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ
reg-suitͬͯԿʁ - reg-suitVRTͷͨΊʹ࡞ΒΕͨOSS - ը૾ࠩͷڧௐදࣔɺը૾ͷCloudͷετΞɺGithub௨ 3FGIUUQTHJUIVCDPNSFHWJ[SFHTVJU
reg-suitಋೖ 1VMM3FRVFTU1VTI 4UPSFJNBHF &YFDVUFKPC fl VUUFSUFTUVQEBUFHPMEFOT SFHTVJUSVO 3FUVSO73563-
reg-suitಋೖ 1VMM3FRVFTU1VTI 4UPSFJNBHF &YFDVUFKPC fl VUUFSUFTUVQEBUFHPMEFOT SFHTVJUSVO 3FUVSO73563-
reg-suitಋೖ 3FWJFX 4UPSFJNBHF &YFDVUFKPC fl VUUFSUFTUVQEBUFHPMEFOT SFHTVJUSVO 3FUVSO73563-
Review - Approve͞ΕΔ·ͰSuccess͞Εͳ͍ - Golden TestͰςετ͠ͳ͍ͷՄࢹԽͯ͠ϨϏϡʔ͕ඞཁ͔ͩΒ
Mission Completed 🎉
·ͱΊ - ϑΥϯτɺΞΠίϯͷʹҙ͢Δ - FlutterͰVRTΛߦ͏ʹ Golden TestΛར༻͢Δ ɹɹ- ը૾͑͞ੜͰ͖Εҧ͏ํ๏Ͱ…ʁ -
Reg-suitͳͲͷՄࢹԽπʔϧΛ͓͢͢Ί͠·͢
Thanks