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
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
0
180
エラーとアクセシビリティ
schktjm
0
980
生成AI時代のデータ基盤
shibuiwilliam
6
3.6k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
ガチな登山用デバイスからこんにちは
halka
1
210
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
220
[RSJ25] Feasible RAG: Hierarchical Multimodal Retrieval with Feasibility-Aware Embodied Memory for Mobile Manipulation
keio_smilab
PRO
0
100
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
9.9k
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
290
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
290
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1.3k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
320
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Facilitating Awesome Meetings
lara
55
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
A designer walks into a library…
pauljervisheath
207
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
The Invisible Side of Design
smashingmag
301
51k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
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