Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
REFTEST-RUNNERͰ UIͷREVIEWΛ NDS in Niigata #8 @ooooooo_q 1
Slide 2
Slide 2 text
!PPPPPPP@Rʢͳͳ͓͘ʣ झຯͰηΩϡϦςΟ େମKT ϑϩϯτΤϯυ αʔόαΠυ 2
Slide 3
Slide 3 text
։ൃٕज़ +4ʹΑΔ41"ͷ։ൃ .7 ʹΑΔઃܭ ࣗಈςετ ։ൃϑϩʔ ίʔυϨϏϡʔ $*ʢܧଓతΠϯςάϨʔγϣϯʣ (*5'-08 (*5)6#'-08 લఏࣝ 3
Slide 4
Slide 4 text
6*ͷϨϏϡʔ Ͳ͏ͯ͠·͔͢ʁ 4
Slide 5
Slide 5 text
ʼ6*ͷϨϏϡʔͲ͏ͯ͠·͢ʁ ΩϟϓνϟΛͷͤͯΒ͏ ίʔυελΠϧͱಈ࡞ΛνΣοΫ ίʔυελΠϧͷΈνΣοΫ ϨϏϡʔ͍ͯ͠ͳ͍PS͢ΔจԽ͕ͳ͍ ʜʜ 5
Slide 6
Slide 6 text
ίʔυελΠϧͷνΣοΫͰ͖Δ ίʔυͷมԽͱ6*ͷมԽͲ͏݁ͼ͍͍ͭͯΔʁ $44ଞͷͱ͜ΖʹӨڹ͠ͳ͍ʁ ΫϩεϒϥβͰͪΌΜͱಈ͘ʁ 6
Slide 7
Slide 7 text
Ωϟϓνϟͷ%*''Ͱ ݟ͍ͨʂʂ 7
Slide 8
Slide 8 text
3&'5&45 36//&3 8
Slide 9
Slide 9 text
3&'5&4536//&3 OQNͰ͞Ε͍ͯΔOPEFKT༻Ϟδϡʔϧ !B[V͞Μ࡞ OQNHJOTUBMMSFGUFTUSVOOFS OPEFKTWܥҎ্͕ඞཁ 9
Slide 10
Slide 10 text
“ SFGUFTUSVOOFSͱ͍͏ϒϥβͰඳը༰ϨΠΞ τͱ͍ͬͨදࣔ݁ՌΛςετ͢ΔͨΊͷϥΠϒϥϦΛ ࡞Γ·ͨ͠ɻ ཁૉٕज़ͱͯ͠ϒϥβɺ8FC%SJWFS"1*ɺϨϯμ ϦϯάΩϟϓνϟɺը૾%J⒎ͱ͍͏ײ͡Ͱ͢ɻ ϒϥβͰϏδϡΞϧςετΛ͢Δreftest-runnerΛ࡞ͬͨ http://efcl.info/2015/05/14/reftest-runner/ 10
Slide 11
Slide 11 text
\ OBNFSFGUFTUSVOOFS BVUIPSB[V FNBJMB[VDJBP!HNBJMDPN IPNFQBHFIUUQTHJUIVCDPNB[VSFGUFTUSVOOFS MJDFOTF.*5 WFSTJPO EFTDSJQUJPO3FGUFTUSVOOFSXJUI8FC%SJWFS"1*z ʜ 11 QBDLBHFKTPO͔Βൈਮ
Slide 12
Slide 12 text
ʜ EFQFOEFODJFT\ CMJOLEJGG? CMVFCJSE? EBUFGPSNBU? ʜ ʜ PQUJPOBUPS? SFGUFTUMJTUQBSTFS? TFMFOJVNEPXOMPBE? TFMFOJVNXFCESJWFS? ^ 12
Slide 13
Slide 13 text
#-*/,%*'' :BIPPࣾͷը૾ൺֱπʔϧ ̎ͭͷը૾Λൺֱͯ͠ɺEJ⒎͕͋Δͱ͜Ζ͘ͳΔ 13 https://github.com/yahoo/blink-diff
Slide 14
Slide 14 text
8&#%3*7&3 㲈TFMFOJVN OPEFKTͳͲ͔ΒϒϥβΛૢ࡞Ͱ͖Δ *&ɺ'JSFGPYɺ$ISPNFɺ4BGBSJɺ0QFSBɺ 1IBOUPN+4ͳͲͷϒϥβΛαϙʔτ 14
Slide 15
Slide 15 text
15 reftest-runner browser A browser B capture A (canvas) output png webdriver webdriver static server blink-diff capture B (canvas) URL A, URL B
Slide 16
Slide 16 text
هड़ྫ 16
Slide 17
Slide 17 text
ଞ ΩϟϓνϟΛऔΔλΠϛϯάΛඇಉظʹͰ͖Δ IUNMλάʹΫϥεΛ͚͓͍ͭͯͯɺ֎͢ ֎෦63-ࢦఆͰ͖Δ VTF&YUFSNBM4FSWFS DMJ͔ΒΑΓOPEFKT͔Βͷݺͼग़͠ਪ CMJOLEJ⒎ͷPQUJPOͤΔΑ͏ʹͳΔ 17
Slide 18
Slide 18 text
3&'5&45 18
Slide 19
Slide 19 text
3&'5&45 ϦϑΝϨϯεςετ ϒϥβ։ൃ͚ͷٕज़ ςετ༻ͱϦϑΝϨϯε༻ͷϑΝΠϧΛͦΕͧΕ༻ҙ ผʑͷػೳΛͬͯɺಉ͡ද͕ࣔग़Δ͜ͱΛ֬ೝ͢Δ IUUQBEPCFHJUIVCJPXFCQMBUGPSNQSFTFOUBUJPOT UFTUUXGIPXUPXSJUFBSFGUFTUKQ 19
Slide 20
Slide 20 text
“ ը૾ൺֱϕʔεͷςετมԽʹऑ͘อक͕େม ͳͷͰɺҰ΄Ͳલʹ3FGUFTUTͱݺΕΔ৽͠ ͍λΠϓͷςετ͕αϙʔτ͞Εͨ -- ͷఉࢣ - steps to phantasien http://steps.dodgson.org/b/2012/05/20/gardening-with-canaries/ 20
Slide 21
Slide 21 text
3&'5&4536//&3 '03 6*3&7*&8 21
Slide 22
Slide 22 text
22 reftest-runner git push ci runner pull request add png files output png
Slide 23
Slide 23 text
ʜ%*'' 23
Slide 24
Slide 24 text
ݟ͍ͨͷϒϥϯνؒͷ%*'' ϚʔδઌͷϒϥϯνͱͷEJ⒎͕ཉ͍͠ ෳϒϥϯν͕ಉ࣌ʹଘࡏ͠ͳ͍ͱ͍͚ͳ͍ $*্ͰҰͭͷϒϥϯν͔͔͋ͭ͑͠ͳ͍ ࣗࣗΛίϐʔͤ͞Α͏ STZOD HJUJHOPSF HJUDIFDLPVU 24
Slide 25
Slide 25 text
࣮ԋ (BACKBONE.JS+GITHUB+CIRCLECI) https://github.com/ooooooo-q/reftest-branch-sample 25
Slide 26
Slide 26 text
ςετ͍ͨ͠ STATEҰͭʁ 26
Slide 27
Slide 27 text
45"5&ΛΓସ͑Δʹ %#αʔόͷσʔλΛςετͷͨͼʹΓସ͑ "1*ͷϞοΫαʔόΛཱͯͯΓସ͑ ςετίʔυΛೖΕͯϏϧυ࣌ʹΓସ͑ ʜ 27
Slide 28
Slide 28 text
ݟ͍ͨͷ 7*&8ͱ45"5&ͷ Έ߹Θͤ ʜ'-69 28
Slide 29
Slide 29 text
3&'5&4536//&3 8*5)'-69 '03 6*3&7*&8 29
Slide 30
Slide 30 text
FLUXͱͷΈ߹Θͤ ඞཁͳͷ63-ͱςετσʔλͷΈ߹Θͤ 'MVYͰ͋Εσʔλ͕Ͳ͔͜Βདྷ͍ͯΔ͔Θͳ͍ SFUFTUSVOOFSతʹ63-͔ΒͤΔͱָ MPDBUJPOIBTI l EBUB AFODPEF63*$PNQPOFOU +40/4USJOHJGZ EBUB Az 30
Slide 31
Slide 31 text
࣮ԋʢؒʹ߹͍·ͤΜͰͨ͠ʣ react.js 31
Slide 32
Slide 32 text
6* Πϕϯτ υϝΠϯ VOJUUFTU VOJUUFTU SFGUFTU SFWJFX &&UFTU
Slide 33
Slide 33 text
3&(3&44*0/ 33
Slide 34
Slide 34 text
ςετͷੑ࣭ VOJUUFTUͱҧͬͯಉ͑͡Λอূ͠ͳ͍ SFGUFTUͦͷͷͱ͍ํ͕ҧ͏ 6*͕ͪΐͬͱมΘΔͨͼʹςετΛॻ͖͢ͷਏ͍ ਓ͕ݟͯ0,ͳΒେମ0,ʁ 34
Slide 35
Slide 35 text
3&'5&4536//&3 '03 6*3&7*&8 "/%(*5'-08 35
Slide 36
Slide 36 text
36 master development feature branch A feature branch B ػೳ͝ͱͷϚʔδ ϦϦʔεϚʔδ
Slide 37
Slide 37 text
ϦϦʔε༰͕Ѳ͍͢͠ ʜΤϯδχΞ͡Όͳͯ͘ ϨϏϡʔʹࢀՃͰ͖Δʜ 37
Slide 38
Slide 38 text
PROBLEM? 38
Slide 39
Slide 39 text
ςετͮ͠Β͍༰ ϚεΦʔό࣌ͷσβΠϯมߋͳͲ $44Ξχϝʔγϣϯͷಈ࡞ ςετ࣌ͷॲཧΛ+4ଆʹॻ͘ SFGUFTUSVOOFSΛಈըʹରԠͤ͞Δʜʁ ςετͱͯ͠ΦʔόεϖοΫʹͳΓ͕ͪ 39
Slide 40
Slide 40 text
ڥߏங $*αʔό༻ͷڥߏங͍͠ ̎ͭͷϒϥϯνΛڞଘ͢Δϊϋ͕ಛघ +4ͷϏϧυγεςϜߏ͕བྷΉ ෳϒϥβͷڥߏங "NB[PO-BNEBXFCIPPLͰઐ༻αʔόʹඈ͢ TFMFOJVN(SJEͱ͔4BVDF-BCTͱ͔ 40
Slide 41
Slide 41 text
ςετͷอक '-69ͷͱ͖ɺશମͷTUBUFΛຖճهड़͢Δʁ ͏ςετσʔλϚʔδݩʁϚʔδઌʁ σʔλߏ͕มΘΔͱ࣮ߦͰ͖ͳ͍ $PNQPOFOU͝ͱʹςετͰ͖Ε ʜʜ·ͩΘ͔Βͳ͍ 41
Slide 42
Slide 42 text
REFTEST-RUNNERΛͬͯ UI REVIEWָ͕ʹͳΔ͔ ͠Εͳ͍ ͕·ͩͪΐͬͱԕ͍ 42