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
270
実践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
200
旅行アプリでより正確にパスポートを読み込む技術 ~ MLKit / Vision / CoreNFC ~
tomokitakahashi
2
700
Other Decks in Technology
See All in Technology
AIのための オンボーディングドキュメントを整備する - hirotea
hirotea
9
2.2k
Digitization部 紹介資料
sansan33
PRO
1
3.8k
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
17
13k
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
270
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
170
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
650
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
290
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
積み上げられた技術資産と向き合いながら、プロダクトの信頼性をどう守るか
plaidtech
PRO
0
270
令和トラベルQAのAI活用
seigaitakahiro
0
480
Scale Security Programs with Scorecarding
ramimac
0
410
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Code Review Best Practice
trishagee
68
18k
GitHub's CSS Performance
jonrohan
1031
460k
Raft: Consensus for Rubyists
vanstee
137
7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Typedesign – Prime Four
hannesfritz
41
2.6k
Bash Introduction
62gerente
614
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
650
Building Applications with DynamoDB
mza
95
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Why Our Code Smells
bkeepers
PRO
336
57k
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