実践Flutter Visual Regression Testing

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

Transcript

1. 2021/4/27 ࣮ફFlutter Visual Regression Testing 'MVUUFS
   º
   ,PUMJO
   .VMUJQMBUGPSN
   CZ
   $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Λॻ͘ 3FG
    IUUQT 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௨஌ 3FG
    IUUQTHJUIVCDPNSFHWJ[SFHTVJU
29. reg-suitಋೖ 1VMM
    3FRVFTU
    
    1VTI 4UPSF
    JNBHF &YFDVUF
    KPC
    fl VUUFS
    UFTU
    ŠVQEBUFHPMEFOT SFHTVJU
    SVO 3FUVSO
    735
    63-
30. reg-suitಋೖ 1VMM
    3FRVFTU
    
    1VTI 4UPSF
    JNBHF &YFDVUF
    KPC
    fl VUUFS
    UFTU
    ŠVQEBUFHPMEFOT SFHTVJU
    SVO 3FUVSO
    735
    63-
31. reg-suitಋೖ 3FWJFX 4UPSF
    JNBHF &YFDVUF
    KPC
    fl VUUFS
    UFTU
    ŠVQEBUFHPMEFOT SFHTVJU
    SVO 3FUVSO
    735
    63-
32. Review - Approve͞ΕΔ·ͰSuccess͸͞Εͳ͍ - Golden TestͰςετ͠ͳ͍ͷ͸ՄࢹԽͯ͠ϨϏϡʔ͕ඞཁ͔ͩΒ
33. Mission Completed 🎉
34. ·ͱΊ - ϑΥϯτɺΞΠίϯͷ໰୊ʹ͸஫ҙ͢Δ - FlutterͰVRTΛߦ͏ʹ͸ Golden TestΛར༻͢Δ ɹɹ- ը૾͑͞ੜ੒Ͱ͖Ε͹ҧ͏ํ๏Ͱ΋…ʁ - Reg-suitͳͲͷՄࢹԽπʔϧΛ͓͢͢Ί͠·͢
35. Thanks