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

実践Flutter Visual Regression Testing

Avatar for Tomoki_Takahashi Tomoki_Takahashi
April 27, 2021
Technology
0
270

実践Flutter Visual Regression Testing

Flutter × Kotlin Multiplatform by CyberAgent #3
2021/4/27
Avatar for Tomoki_Takahashi

Tomoki_Takahashi

April 27, 2021
Tweet

More Decks by Tomoki_Takahashi

See All by Tomoki_Takahashi
SwiftUI Components Management
Avatar for Tomoki_Takahashi tomokitakahashi
0
190
旅行アプリでより正確にパスポートを読み込む技術
~ MLKit / Vision / CoreNFC ~
Avatar for Tomoki_Takahashi tomokitakahashi
2
670

Other Decks in Technology

See All in Technology
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
Avatar for kamijin_fanta kamijin_fanta
0
180
SnowflakeとDatabricks両方でRAGを構築してみた
Avatar for camay kameitomohiro
1
570
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
Avatar for convto convto
4
880
Computer Use〜OpenAIとAnthropicの比較と将来の展望〜
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
6
960
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
25k
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
Avatar for k-kun duelist2020jp
1
330
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
Avatar for Kihara, Takuya tacck
PRO
1
300
エンジニアリングで組織のアウトカムを最速で最大化する！
Avatar for ham ham0215
1
280
Pythonデータ分析実践試験 出題傾向や学習のポイントとテクニカルハイライト
Avatar for Manabu TERADA terapyon
1
110
Microsoft Fabric vs Databricks vs (Snowflake) -若手エンジニアがそれぞれの強みと違いを比較してみた- "A Young Engineer's Comparison of Their Strengths and Differences"
Avatar for 大竹礼二（REIJI OTAKE） reireireijinjin6
1
130
AIとSREで「今」できること
Avatar for HonMarkHunt honmarkhunt
3
690
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
5.4k

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.6k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
820
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
690
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
54
5.5k
The Language of Interfaces
Avatar for Des Traynor destraynor
157
25k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k

Transcript

  1. 2021/4/27 ࣮ફFlutter Visual Regression Testing 'MVUUFSº,PUMJO.VMUJQMBUGPSNCZ$ZCFS"HFOU

  2. Tomoki Takahashi - Twitter: @tomosan_dev - CyberAgent / 2019~ -

    Github: @tomokitakahashi - Flutter: ~6month

  3. Visual Regression Testing - ը૾ճؼςετ - मਖ਼લޙͷը૾Λൺֱ͠ɺࠩ෼͕ͳ͍ɺҙਤͨࠩ͠෼Ͱ͋Δ͜ͱΛ֬ೝ - ࠷ۙ͸ωΠςΟϒͰ΋ঃʑʹར༻͞ΕΔΑ͏ʹ -

    https://github.com/playbook-ui/playbook-ios

  4. FlutterͰVRT͸࣮ݱͰ͖Δͷ͔… 😨 ·ͩ·ͩൃల్্ͳͷͰ͸…. Flutter࢝Ίͯ·ͩ1ϲ݄… DartͰ͢Β஌Βͳ͍͜ͱͨ͘͞Μ͋Δͷʹ…

  5. Flutter Golden Test

  6. Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ

    - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

  7. Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ

    - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

  8. Flutter Golden Testsͬͯͳʹʁ - Widget TestͷҰ෦ - MatcherTest͸Widget୳ࡧධՁɺGoldenTest͸imageൺֱ - Unit

    Test / Widget Test / Integreation Test

  9. Flutter Golden Testsͬͯͳʹʁ - Widget TestͷҰ෦ - MatcherTest͸Widget୳ࡧධՁɺGoldenTest͸imageൺֱ - Unit

    Test / Widget Test / Integreation Test

  10. Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ

    - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

  11. 1. Golden TestΛॻ͘

  12. 1. Golden TestΛॻ͘

  13. 1. Golden TestΛॻ͘ 3FGIUUQT fl VUUFSEFWEPDTDPPLCPPLUFTUJOHXJEHFU fi OEFST

  14. 2. Golden FileΛੜ੒͢Δ - flutter test - -update-goldensΛ࣮ߦ͢ΔͷΈ - ൺֱͷtestͱ࣮ͯ͠ߦ͢Δ৔߹͸

    flutter testΛ࣮ߦ͢Δ

  15. Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ

    - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

  16. Bad 1. font͕ϩʔυ͞Εͣจࣈ͕දࣔͰ͖ͳ͍ - flutter test্Ͱfont͸ϩʔυ͞Εͳ͍🌀 - จࣈԽ͚͕ൃੜ͠ɺVRTʹར༻͢Δը૾ͱͯ͠͸ෆద੾ - https://github.com/flutter/flutter/issues/17700

    (3೥લ…)

  17. XJEHFU@UFTUEBSU Try 1. FontLoaderΛ࢖ͬͯfontΛಡΈࠐΉ QVCTQFDZBNM

  18. QVCTQFDZBNM XJEHFU@UFTUEBSU Try 1. FontLoaderΛ࢖ͬͯfontΛಡΈࠐΉ

  19. Try 1. FontLoaderΛ࢖ͬͯfontΛಡΈࠐΉ - rootͷMaterialApp.themeʹ͸fontFamilyΛࢦఆ

  20. Try 1. FontLoaderΛ࢖ͬͯfontΛಡΈࠐΉ 🎉

  21. Bad 2. Icon͕ϩʔυ͞ΕͣΞΠίϯ͕දࣔͰ͖ͳ͍ - flutter test্ͰFlutter.Icon͸ϩʔυ͞Εͳ͍🌀 - จࣈԽ͚͕ൃੜ͠ɺVRTʹར༻͢Δը૾ͱͯ͠͸ෆద੾

  22. Try 2. flutter͔ΒMaterialIconsΛಡΈࠐΉ IUUQTHJUIVCDPN fl VUUFS fl VUUFSJTTVFT

  23. Try 2. flutter͔ΒMaterialIconsΛಡΈࠐΉ🎉

  24. Tips. ը૾Λ࣮ػʹ͚ۙͮΔ - ը૾αΠζΛࢦఆ͢Δ

  25. Tips. ScrollViewͷαΠζʹ߹ΘͤΔ

  26. Tips. ScrollViewͷαΠζʹ߹ΘͤΔ

  27. Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ

    - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

  28. reg-suitͬͯԿʁ - reg-suit͸VRTͷͨΊʹ࡞ΒΕͨOSS - ը૾ࠩ෼ͷڧௐදࣔɺը૾ͷCloud΁ͷετΞɺGithub௨஌ 3FGIUUQTHJUIVCDPNSFHWJ[SFHTVJU

  29. reg-suitಋೖ 1VMM3FRVFTU1VTI 4UPSFJNBHF &YFDVUFKPC fl VUUFSUFTUŠVQEBUFHPMEFOT SFHTVJUSVO 3FUVSO73563-

  30. reg-suitಋೖ 1VMM3FRVFTU1VTI 4UPSFJNBHF &YFDVUFKPC fl VUUFSUFTUŠVQEBUFHPMEFOT SFHTVJUSVO 3FUVSO73563-

  31. reg-suitಋೖ 3FWJFX 4UPSFJNBHF &YFDVUFKPC fl VUUFSUFTUŠVQEBUFHPMEFOT SFHTVJUSVO 3FUVSO73563-

  32. Review - Approve͞ΕΔ·ͰSuccess͸͞Εͳ͍ - Golden TestͰςετ͠ͳ͍ͷ͸ՄࢹԽͯ͠ϨϏϡʔ͕ඞཁ͔ͩΒ

  33. Mission Completed 🎉

  34. ·ͱΊ - ϑΥϯτɺΞΠίϯͷ໰୊ʹ͸஫ҙ͢Δ - FlutterͰVRTΛߦ͏ʹ͸ Golden TestΛར༻͢Δ ɹɹ- ը૾͑͞ੜ੒Ͱ͖Ε͹ҧ͏ํ๏Ͱ΋…ʁ -

    Reg-suitͳͲͷՄࢹԽπʔϧΛ͓͢͢Ί͠·͢

  35. Thanks