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
Looking back on AI-Powered iOS Development
tomokitakahashi
0
75
SwiftUI Components Management
tomokitakahashi
0
210
旅行アプリでより正確にパスポートを読み込む技術 ~ MLKit / Vision / CoreNFC ~
tomokitakahashi
2
810
Other Decks in Technology
See All in Technology
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
340
Wasmの気になる最新情報
askua
0
170
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
220
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
380
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
ソースを読むプロセスの例
sat
PRO
15
9.6k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2.2k
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
710
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
140
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
530
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Side Projects
sachag
455
43k
4 Signs Your Business is Dying
shpigford
185
22k
We Have a Design System, Now What?
morganepeng
53
7.8k
Git: the NoSQL Database
bkeepers
PRO
431
66k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
RailsConf 2023
tenderlove
30
1.3k
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