Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Tomoki Takahashi - Twitter: @tomosan_dev - CyberAgent / 2019~ - Github: @tomokitakahashi - Flutter: ~6month

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Flutter Golden Test

Slide 6

Slide 6 text

Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

Slide 7

Slide 7 text

Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

Slide 11

Slide 11 text

1. Golden TestΛॻ͘

Slide 12

Slide 12 text

1. Golden TestΛॻ͘

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Agenda - Flutter Golden Test ʹ͍ͭͯ - GoldenTestΛར༻ͯ͠SnapshotΛ࡞੒͢Δ - GoldenTestͷ໰୊఺ͱղܾ - reg-suitΛྫʹVRTͷӡ༻Λߟ͑Δ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Mission Completed 🎉

Slide 34

Slide 34 text

·ͱΊ - ϑΥϯτɺΞΠίϯͷ໰୊ʹ͸஫ҙ͢Δ - FlutterͰVRTΛߦ͏ʹ͸ Golden TestΛར༻͢Δ ɹɹ- ը૾͑͞ੜ੒Ͱ͖Ε͹ҧ͏ํ๏Ͱ΋…ʁ - Reg-suitͳͲͷՄࢹԽπʔϧΛ͓͢͢Ί͠·͢

Slide 35

Slide 35 text

Thanks